Create a view
Views in ASP.NET Core are built using the Razor templating language, which combines HTML and C# code. (If you've written pages using Handlebars moustaches, ERB in Ruby on Rails, or Thymeleaf in Java, you've already got the basic idea.)
Most view code is just HTML, with the occasional C# statement added in to pull data out of the view model and turn it into text or HTML. The C# statements are prefixed with the @ symbol.
The view rendered by the Index action of the TodoController needs to take the data in the view model (a sequence of to-do items) and display it in a nice table for the user. By convention, views are placed in the Views directory, in a subdirectory corresponding to the controller name. The file name of the view is the name of the action with a .cshtml extension.
Create a Todo directory inside the Views directory, and add this file:
Views/Todo/Index.cshtml
@model TodoViewModel
@{
ViewData["Title"] = "Manage your todo list";
}
<div class="panel panel-default todo-panel">
<div class="panel-heading">@ViewData["Title"]</div>
<table class="table table-hover">
<thead>
<tr>
<td>✔</td>
<td>Item</td>
<td>Due</td>
</tr>
</thead>
@foreach (var item in Model.Items)
{
<tr>
<td>
<input type="checkbox" class="done-checkbox">
</td>
<td>@item.Title</td>
<td>@item.DueAt</td>
</tr>
}
</table>
<div class="panel-footer add-item-form">
<!-- TODO: Add item form -->
</div>
</div>
At the very top of the file, the @model directive tells Razor which model to expect this view to be bound to. The model is accessed through the Model property.
Assuming there are any to-do items in Model.Items, the foreach statement will loop over each to-do item and render a table row (<tr> element) containing the item's name and due date. A checkbox is also rendered that will let the user mark the item as complete.
The layout file
You might be wondering where the rest of the HTML is: what about the <body> tag, or the header and footer of the page? ASP.NET Core uses a layout view that defines the base structure that every other view is rendered inside of. It's stored in Views/Shared/_Layout.cshtml.
The default ASP.NET Core template includes Bootstrap and jQuery in this layout file, so you can quickly create a web application. Of course, you can use your own CSS and JavaScript libraries if you'd like.
Customizing the stylesheet
The default template also includes a stylesheet with some basic CSS rules. The stylesheet is stored in the wwwroot/css directory. Add a few new CSS style rules to the bottom of the site.css file:
wwwroot/css/site.css
div.todo-panel {
margin-top: 15px;
}
table tr.done {
text-decoration: line-through;
color: #888;
}
You can use CSS rules like these to completely customize how your pages look and feel.
ASP.NET Core and Razor can do much more, such as partial views and server-rendered view components, but a simple layout and view is all you need for now. The official ASP.NET Core documentation (at https://docs.asp.net) contains a number of examples if you'd like to learn more.