NET 6 - MVC - View

A view in ASP.NET 6 is responsible for User Interface, displaying the model data to the user. A user will perform all sorts of actions such as clicking a button or submitting a form with the data. A view consists of HTML, CSS, and JavaScript for communicating with the model and controller.

The extension of View in ASP.NET 6 is ".cshtml", which mean "cs" is "c-sharp" and HTML (Hypertext Mark-up Language). The controller returns ViewResult as a return type to the view. Usually, views live inside the Views folder of the ASP.NET 6 application.

Table of Content

• Event - Index
• Event - Create
• Event - Edit
• Event - Delete
• Event Booking - Index
• Event Booking - Create

Remove Async suffix from View name

Event

Right-click on Index() method and select 'Add View' and then 'Razor View'.

When we create a view, the controller name becomes a folder and the action will be become a view file.

We use List template (will display in table format), select EventViewModel as a Model class and finally select EventContext as Data context class. Eveything auto generate view code is fine except we do not need <a asp-action="Details" asp-route-id="@item.Id">Details</a>

Index

@model IEnumerable<TicketingSystem.Service.ViewModels.EventViewModel> @{ ViewData["Title"] = "Index"; } <h1>Index</h1> <p> <a asp-action="Create">Create New</a> </p> <table class="table"> <thead> <tr> <th> @Html.DisplayNameFor(model => model.Name) </th> <th> @Html.DisplayNameFor(model => model.Location) </th> <th> @Html.DisplayNameFor(model => model.Date) </th> <th></th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Name) </td> <td> @Html.DisplayFor(modelItem => item.Location) </td> <td> @Html.DisplayFor(modelItem => item.Date) </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.Id }) | @Html.ActionLink("Delete", "Delete", new { id=item.Id }) </td> </tr> } </tbody> </table>

Right-click on Create() method and select 'Add View' and then 'Razor View'.

For Create() method, we do similar except the template is Create and give the view name "Create.cshtml". Once code is generated, we remove the item for Id and the final code should be below.

Create

@model TicketingSystem.Service.ViewModels.EventViewModel @{ ViewData["Title"] = "Create"; } <h1>Create</h1> <h4>EventViewModel</h4> <hr /> <div class="row"> <div class="col-md-4"> <form asp-action="Create"> <div asp-validation-summary="ModelOnly" class="text-danger"></div> <div class="form-group"> <label asp-for="Name" class="control-label"></label> <input asp-for="Name" class="form-control" /> <span asp-validation-for="Name" class="text-danger"></span> </div> <div class="form-group"> <label asp-for="Location" class="control-label"></label> <input asp-for="Location" class="form-control" /> <span asp-validation-for="Location" class="text-danger"></span> </div> <div class="form-group"> <label asp-for="Date" class="control-label"></label> <input asp-for="Date" class="form-control" /> <span asp-validation-for="Date" class="text-danger"></span> </div> <div class="form-group"> <input type="submit" value="Create" class="btn btn-primary" /> </div> </form> </div> </div> <div> <a asp-action="Index">Back to List</a> </div> @section Scripts { @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} }

Do the same thing for Edit (name view Edit.cshtml) and Delete(name view Delete.cshtml) methods to generate the views.

Edit

@model TicketingSystem.Service.ViewModels.EventViewModel @{ ViewData["Title"] = "Edit"; } <h1>Edit</h1> <h4>EventViewModel</h4> <hr /> <div class="row"> <div class="col-md-4"> <form asp-action="Edit"> <div asp-validation-summary="ModelOnly" class="text-danger"></div> <div class="form-group"> <label asp-for="Name" class="control-label"></label> <input asp-for="Name" class="form-control" /> <span asp-validation-for="Name" class="text-danger"></span> </div> <div class="form-group"> <label asp-for="Location" class="control-label"></label> <input asp-for="Location" class="form-control" /> <span asp-validation-for="Location" class="text-danger"></span> </div> <div class="form-group"> <label asp-for="Date" class="control-label"></label> <input asp-for="Date" class="form-control" /> <span asp-validation-for="Date" class="text-danger"></span> </div> <div class="form-group"> <input type="submit" value="Save" class="btn btn-primary" /> </div> </form> </div> </div> <div> <a asp-action="Index">Back to List</a> </div> @section Scripts { @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} }

Delete

@model TicketingSystem.Service.ViewModels.EventViewModel @{ ViewData["Title"] = "Delete"; } <h1>Delete</h1> <h3>Are you sure you want to delete this?</h3> <div> <h4>EventViewModel</h4> <hr /> <dl class="row"> <dd class = "col-sm-10"> @Html.DisplayFor(model => model.Id) </dd> <dt class = "col-sm-2"> @Html.DisplayNameFor(model => model.Name) </dt> <dd class = "col-sm-10"> @Html.DisplayFor(model => model.Name) </dd> <dt class = "col-sm-2"> @Html.DisplayNameFor(model => model.Location) </dt> <dd class = "col-sm-10"> @Html.DisplayFor(model => model.Location) </dd> <dt class = "col-sm-2"> @Html.DisplayNameFor(model => model.Date) </dt> <dd class = "col-sm-10"> @Html.DisplayFor(model => model.Date) </dd> </dl> <form asp-action="Delete"> <input type="submit" value="Delete" class="btn btn-danger" /> | <a asp-action="Index">Back to List</a> </form> </div>

Event Booking

Index

We do the same thing to generate the view. Now we need to use "EventBookingViewModel" as Model as shown below. Once the view is generated, we can remove "Edit", "Delete", and "Delete" action.

@model IEnumerable<TicketingSystem.Service.ViewModels.EventBookingViewModel> @{ ViewData["Title"] = "Index"; } <h1>Index</h1> <p> <a asp-action="Create">Create New</a> </p> <table class="table"> <thead> <tr> <th> @Html.DisplayNameFor(model => model.Email) </th> <th> @Html.DisplayNameFor(model => model.EventName) </th> <th></th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Email) </td> <td> @Html.DisplayFor(modelItem => item.EventName) </td> <td> @Html.ActionLink("Edit", "Edit", new {id= item.Id }) | @Html.ActionLink("Delete", "Delete", new { id= item.Id }) </td> </tr> } </tbody> </table>

Create

For the "Create" method of event booking, we are going to generate an empty view and build ourselves. Give the name "Create.cshtml" for this view. We used select tag helper to create a event drop down list.

@model TicketingSystem.Service.ViewModels.EventBookingViewModel @{ ViewData["Title"] = "Create"; } <h1>Create</h1> <h4>EventBookingViewModel</h4> <hr /> <div class="row"> <div class="col-md-4"> <form asp-action="Create"> <div asp-validation-summary="ModelOnly" class="text-danger"></div> <div class="form-group"> <label asp-for="Email" class="control-label"></label> <input asp-for="Email" class="form-control" /> <span asp-validation-for="Email" class="text-danger"></span> </div> <div class="form-group"> <label asp-for="EventId" class="control-label"></label> <select asp-for="EventId" class="form-control" asp-items="@(new SelectList(Model.Events,"Id","Name"))"> <option value="">Please select one</option> </select> </div> <div class="form-group"> <input type="submit" value="Create" class="btn btn-primary" /> </div> </form> </div> </div> <div> <a asp-action="Index">Back to List</a> </div> @section Scripts { @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} }