Join Jess Chadwick for an in-depth discussion in this video Adding code blocks to a Razor page, part of ASP.NET Core: Razor Pages.
- [Instructor] In the previous video, I showed you how to use the @ syntax to evaluate in-line code snippets and render the result as content in the page. However, there will be plenty of times where you'll want to execute some logic that doesn't result in rendering content to the page, for example, creating a variable to store this list of recipes that I've retrieved right there in the middle of that foreach loop. Luckily, Razor offers a syntax called a code block which allows you to do exactly that and it looks like this.
It's just the @ symbol followed by open and closed brackets, in between which you can write whatever code you like, and it's a perfect place to define things like variables. So, to introduce a variable to store the list of recipes and clean up this foreach loop, I can simply define a new variable in the code block. Then I can move the call to the GetAll method to populate that new variable, and then finally reference that new variable in my foreach loop.
The nice thing about code blocks is that you're free to write as many lines of code as you like in them, and since I don't have to try and cram all that code into one line anymore, I can even instantiate the RecipesService as separate variable, breaking this one long complex line into two simpler ones. What's more, since the logic in a Razor Page is executed asynchronously, I can even use the await keyword in this logic.
Luckily, I have an asynchronous version of this GetAllRecipes call. Perhaps the most important aspect of code blocks is that the code within them executes in the order or location that you put it in your page. For example, it was no coincidence that I decided to place this code block above the foreach loop on line 54 that uses the recipes variable that it defines because if I moved the code block below the foreach loop that recipes variable will be defined after the reference to it in the foreach block, making that reference invalid.
So clearly, I have to move this code block before the foreach loop that uses it. However, it's worth pointing out that although you can place code blocks anywhere in your page that you like, it's generally a good practice to try and keep them at the top of the page, so they're at least somewhat separated from the markup. So instead of moving this code block back to where it was, I'm actually going to move it all the way up to the top so that everything is nice and clean.
Now that I've fixed the index page, I'll also implement the recipes page using a similar set of logic. To save some time, I'll copy this logic from the index page and paste it into the recipe page, then start modifying it. First, I'll create a variable to hold the recipe ID that I'd like to look up. I'll hard-code this ID to one for now. Then, I'll replace the call to get all recipes with a call to the asynchronous find method to retrieve a single recipe using the ID in the id variable I just defined.
First, I'll replace the title of the page with the name of the recipe that I just retrieved. After that, I'll display the contents of the recipe's description property in place of this description placeholder. Then I'll loop through the ingredients in the recipe's ingredients list property and display each one as a list item in an unordered list.
Likewise, I'll do the same with the steps in the recipe's directions list, only this time, I'll use an ordered list. And finally, I'll set the source property of the image tag with the results of a call to the recipe's GetInLineImageSrc method, which will provide me with an in-line image. Now, with all of this in place, I can view my site again to look at all of these delicious recipes stored in my database, and I can even drill down to see the details of each one.
Now I was really able to make a lot happen with just a few lines of code and some simple markup. However, there is just one problem, and that is the fact that I've got a whole bunch of recipes in my database but my recipe page is hard-coded to only show the first one. So check out the next video, where I'll show you how to take care of that.
- Creating a new application
- Setting up pages
- Rendering dynamic content
- Reusing markup with layouts
- Increasing the maintainability of pages
- Processing data
- Validating input
- Securing an application