From the course: Learning ASP.NET Core MVC

Render HTML with Razor

From the course: Learning ASP.NET Core MVC

Start my 1-month free trial

Render HTML with Razor

“

- [Instructor] At this point, I've shown you how to create controller actions that respond to Web requests with basic string content. However more often than not, you're going to want to respond to these requests by rendering an HTML page back to browser rather than that raw text. In this chapter, I'm going to show you how to deliver rich client size experiences with HTML and the browser by creating dynamic ASP.NET Core MVC views using the Razor syntax. Since returning an HTML view back to the user is the most common task that an ASP.NET Core MVC controller action does, the Visual Studio Controller template includes a call to the view method in every new controller class. Previously, I deleted that generated code just to demonstrate how controller action respond to request but now that I'm ready to return in HTML view, let me revert back to that original code and see what happens. Now, I haven't created a view yet but let's just run this anyway. Unsurprisingly, I get an error. Our controller action ran and told ASP.NET Core MVC to render the view with the same name as the controller action, Index. However MVC couldn't find the view by that name and actually tried looking in a couple of different places. Notice the places that MVC says that it's looking for the view, /Views/Home/Index.cshtml and /Views/Shared/Index.cshtml. In other words, it's looking for a .cshtml file with the same name as the action that was called, in this case Index, and it's looking for that file in a couple of different folders. The first folder it looks for is a folder with the same name as the controller that's handling the request. In this case, that controller is named Home. Using this convention, we can put all of the views for our Home controller into one folder so they're easy for us to find and work with. Next is the Shared folder. This is a folder where you can put all of the views that are used across multiple controllers in your application. I'll show you how to use both of these folders in this chapter but I'll just start with the Home folder first. Since we have no views folder at all in our project, the first thing we need to do is create it. Then we can create the Home folder right under it. Now that we've got the Home folder to hold our views, I'll create the Index.cshtml view that ASP.NET Core MVC is looking for. The cshtml extension indicates that the view is defined in the Razor syntax. A syntax that lets you combine HTML and C# code all in one file. That means I can start by simply moving our existing .html file from our www root folder into this new folder and then rename it to the .cshtml file extension. And that's it. Since HTML is perfectly valid Razor syntax, we don't have to change anything else in the file in order to make it render properly. Now I can just run the application again and refresh our page. And instead of that error message, I see my wonderful home page again. Only this time it's not the static Index.html file but a Razor view rendered by our controller action. Notice also how all of the CSS and image files continue to load just fine because the file server middleware is still serving them from the www root folder just as it was before. Nothing has changed there.

Contents