13.2. Creating a Template¶

Using templates is a useful way to reduce the effort required to create and maintain a web-based project. Before you can dive into using templates, however, you need to take care of a little groundwork first.

13.2.1. Razor¶

Razor is a templating syntax included in the application framework for our MVC project. It allows us to write C# code directly into an HTML tree.

More information on Razor can be found in this reference page.

For the most part, Razor templates look and operate just like regular HTML code. Any C# logic we add to a template is preceded with the at sign, @. You can open any template in a browser and view it just like a static HTML file. Before we begin adding C# logic to Razor templates, we’ll first demonstrate creating a view using only HTML.

In this chapter, you will construct some small practice projects to help you learn how to implement Razor templates.

13.2.2. Hello Views¶

Before you start coding, we refactored HelloController. Now Index() is responding to GET requests at localhost:5001/hello and Welcome() is only responding to POST requests at localhost:5001/hello. Check out the views-starter branch of the HelloASPDotNETDemo repo to see how we refactored our code.

Open up your HelloASPDotNET project in Visual Studio and make sure you have committed any recent changes. Make a new branch and code along with the following video.

Warning

In the videos in this chapter, we select the View Page type when creating a new view instead of Razor View. In this system, these are the same! However, it is good practice to make sure that you are selecting for a Razor view no matter what option you choose.

The videos in this chapter walk you through building small web-based projects. Do NOT skip this practice, because the end of chapter exercises pick up where the tutorials end.

Note

The starter code for this video is found at the views-starter branch of HelloASPDotNETDemo. The final code presented in this video is found on the views-static branch.

13.2.2.1. Controllers Return View Templates¶

So far, you’ve seen action methods in controller classes return Content objects to render some view. Now, we pivot to another option. We mention in the introduction to controller classes that action methods can return HTML templates. Indeed, the HomeController contains a few methods that do just that.

Out of the box, your MVC project contains several Razor templates within the Views directory. The sub-directory Home, found inside of Views, contains the Razor templates returned from the HomeController action methods. Just as an action method’s name will map to a route with the same name, an action method’s name can also correspond to a Razor template’s name. The Index() method inside of HomeController returns the Index.cshtml template found inside of Views/Home.

In order to return that template, the action method calls a View() method. The View() method finds a template that’s associated with the particular controller and action method that it is called from.

Tip

To override the default behavior of the View() method, you can pass in a parameter which is the name of the template you want to render. For example, if we want an action method named Form() to return a Razor template named WelcomeForm.cshtml, we have Form() return View("WelcomeForm");.

13.2.2.2. Add a Template¶

To create a template, we update HelloController.Index() to return a Razor template instead of a string of HTML. In Views, create a new subdirectory called Hello.

Within Hello create a new file of the Razor View file template.

Windows Users:

Right click on the Views directory or any subdirectory and select Add -> New Item.
The Razor View - Empty option is found in the ASP.NET Core menu.

Mac Users:

Right click on the Views directory or any subdirectory and select Add -> New File.
The Razor View option is found in the ASP.NET Core menu.

All Users:

Once you have your Razor View or Razor View - Empty selected, name it Index.
We are naming our Views after there corresponding action methods.

Add the HTML form from the Index() method to your new template. Once you are done with that, update the Index() method to return View().

13.2.2.2.1. `_Layout.cshtml`¶

When you re-render the app now, you’ll notice some additional features and different styling. There is a _Layout.cshtml file inside of the Views/Shared folder that provides some scaffolding for the application views. You can edit this file once and any other template will also render whatever elements you add to it. This can help give your application a polished, unified look and feel. If you do not want to use this file, adding @{Layout = null;} at the top of the template will cause this shared layout template to be ignored.

13.2.3. Check Your Understanding¶

Question

Which symbol is required to use C# code in a Razor template?