Join Jess Chadwick for an in-depth discussion in this video Using the Razor syntax to render dynamic content, part of ASP.NET Core: Razor Pages.
- [Instructor] Serving static HTML and CSS files is great, but, to put it mildly, that's not really where Razor Pages excels. So, now that I've shown you how to render static HTML, let's get to the interesting stuff and see how to use the Razor syntax to generate dynamic HTML. It's important to understand that outside of few reserved keywords, Razor itself has no vocabulary or grammatical rules of it's own. It's simply a way to embed code expressed in other languages, such as C#, into your views, execute that code at runtime, and render the resulting output into your HTML to produce dynamically generated content.
It's ll start with the @ symbol. Consider the Razor engine as a text file parser with two modes, code or content. As it read through each character of your view, it tries to guess whether it should consider that character content to be rendered in the browser, or code to execute. The @ symbol is your way of telling the Razor parser, "Hey, I'm about to write some code." Then you just write your code. Notice how not only does Razor know that you're writing code, Visual Studio even gives you IntelliSense on that code.
And then once you're done writing your code, you just stop. Go back to writing HTML and Razor is smart enough to tell the difference. At that point, it will execute the code snippet to render the result of the execution in line, right where you put that @ symbol. In this case, I am rendering the date and time that the page is rendered by simply referring to the DateTime.Now property, and letting Razor call two string to convert it to a string for me.
Now, when I refresh the page, I can see the result rendered right at the bottom. But that's just the beginning. Where it really starts getting interesting is when you start writing conditional object in your page. For example, I can create a conditional statement that will only execute when the current user is not logged in. I can even write an else statement for when the user is logged in.
In this case, I want to show a logout button, but I need to do it within a form. So, first, I'll create the form tag. And in that form, I'll put a span tag that shows the current user's user name, and then a submit button to submit the form which will eventually enable them to log out of their session.
With this code in place, unauthenticated users will see the login link above which will bring them to the login page, and authenticated users will see the logout form in the else condition, allowing them to log out of their current session. Note that this is just a regular C# if else statement complete with opening and closing brackets. And inside of those brackets, I'm just writing my markup. The other bit of code that you'll find yourself writing a lot in Razor Pages is a for each loop.
For instance, I can create an array that contains string values with the names of recipes that I want to display. Then I can modify the markup to render these names as recipes.
Now, if I refresh the page, I can see this block of markup has been repeated for each recipe in the array. Or, instead of just string values, I can actually retrieve a collection of recipe objects by calling recipe service like this. Then since these are objects, I can modify the markup to make the appropriate Razor calls to render the various properties of the object.
Notice the call to the GetInLineImageSrc method on line 51. Up to this point, I've only been rendering the value of an object's properties, but here's an example where I call a method that returns a string. And since this method call is a valid C# expression that evaluates to a string, it too renders just as a normal property does. With this in place, I'll jump to the browser and see the list of all three recipes that my recipe service provides.
And finally, you can even use some of the C# directives such as the using keyword to clean up the namespace references in your code, like the one I've got right here. Just go to the top of the page, and write the using statement just as you normally would, only preceded with the @ symbol, since you're writing code. With this using statement in place, I can now remove any references to this namespace since they're now redundant.
And there you go, a nice clean way to render dynamic HTML with Razor.
- 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