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.

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.

Hello Views

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

Before you start coding, we need to refactor HelloController:

1. Index() should respond to GET requests at localhost:5001/hello
2. Welcome() should only responding to POST requests at localhost:5001/hello.

Check out the code block below to refactor your code.

13
14
15
16
17
18
19
20
21
22
23

[HttpGet]
public IActionResult Index()

//...code continues

[HttpPost]
[Route("/hello")]
public IActionResult Welcome(string name)

//...code continues

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.

You can 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");.

Add a Template

To create a template, we update HelloController.Index() to return a Razor template instead of a string of HTML.

Start by creating a new subdirectory within the Views directory called Hello.

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

1. Right click on the Views directory or any subdirectory and select Add -> New File or New Item depending on your OS.
2. Look in the ASP.NET Core menu for the Razor View or Razor View - Empty option.
3. Once you have your Razor View or Razor View - Empty selected, name it Index. We are going to name the Views after their corresponding action methods for the MVC projects in this course.

Add the HTML form from the Index() method to your new template. Make sure to remove any residual C# syntax, like + or " or ;. The form should only be in HTML.

 6
 7
 8
 9
10
11

//inside the Views/Hello/Index.cshtml

<form method='post' action='/hello'>
    <input type='text' name='name' />
    <input type='submit' value='Greet Me!' />
</form>

Once you are done with that, update the Index() method to return View().

11
12
13
14
15
16

   [HttpGet]
   public IActionResult Index()
   {
      return View();
   }

_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.

3
4
5
6

//inside the Views/Hello/Index.cshtml
@{
   Layout = null;
}

Check Your Understanding