CRUD operations in ASP.NET Core 1.0 MVC Application Part 2

Let's first add View Model in application flow, then we will discuss data annotation and Tag Helpers. We have created a Get Details functionality in our previous discussion CRUD operations in ASP.NET Core 1.0 MVC Application Part 1. As we can see that we have hard coded Headings and embedded code to generate required HTML. Although this approach works fine for simple views, but we have to take care of lot of things and to write lot of code to handle features like forms and validations.
Similarly, it is not a good practice to use Models associated with Data Source like Entity Framework or Data Contracts from Services in Views. Instead of them, very concise and simple models are passed to views which called as ViewModels. These ViewModels are based on concept of POCO (Plain Old CLR Object). We will discuss pros and cons of POCO or ViewModels in detain in different session.

Add Contact View Model in Project

• Open existing Solution in Visual Studio 2015.
• Add new Folder Models in root of WebApplicationCore.NetCore Project
• Now Create a Sub folder Contact in Models Folder
• Now Add a new class ContactVM.CS in Models >> Contact.
• Add required properties in ContactVM.

 public class ContactVM  
   {  
     public Contact()  
     {  
     }  
     public int ContactId { get; set; }  
     public string Name { get; set; }  
     public string Address1 { get; set; }  
     public string Address2 { get; set; }  
     public string City { get; set; }  
     public string ProvinceState { get; set; }  
     public string ZipPostalCode { get; set; }  
     public string Country { get; set; }  
     public string ContactNumber { get; set; }  
     public string Email { get; set; }  
     public string WebSite { get; set; }  
   }

Update Contact GetContact View

• Change _ViewImports.cshtml by including name space of WebApplicationCore.NetCore.Models. So we can access Contact View Model without fully qualified name.
• Use as model ContactVM in View instead of Contact.
• Update GetContact view use LabelTagHelper to display field headings from View Model instead of hard codded text.
• Here we have used LabelTagHelper which uses the text from provided data filed. If provided has Display Attribute then it will use text from this attribute. Alternatively, it will displays the field name. We just have to provide asp-for tag (or other asp- depending on Tag Helper) with field name from model. 
• On the other, hand we have to just display the text, so there is ideally no need to use any data notation for a simple view. 
• Tag Helpers are special feature to enable server side code to create, update and render HTML in view file. They are said to be evaluation of Html Helpers. Although, Html Helpers do exist, yet Tag Helpers are very popular as they are just additional attributes   in existing Html elements and are very easy for UI designers or front stack developers to understand. We will discuss Tag Helpers in detail in future sessions.  

 @model ContactVM  
 <h2>Contact</h2>  
 <div>  
   <dl class="dl-horizontal">  
     <dt>  
       <label asp-for="Name"></label>  
     </dt>  
     <dd>  
       <span>@Model.Name</span>  
     </dd>  
     <dt>  
       <label asp-for="Address1"></label>  
     </dt>  
     <dd>  
       <span>@Model.Address1</span>  
     </dd>  
     <dt>  
       <label asp-for="Address2"></label>  
     </dt>  
     <dd>  
       <span>@Model.Address2</span>  
     </dd>  
     <dt>  
       <label asp-for="City"></label>  
     </dt>  
     <dd>  
       <span>@Model.City</span>  
     </dd>  
     <dt>  
       <label asp-for="ProvinceState"></label>  
     </dt>  
     <dd>  
       <span>@Model.ProvinceState</span>  
     </dd>  
     <dt>  
       <label asp-for="ZipPostalCode"></label>  
     </dt>  
     <dd>  
       <span>@Model.ZipPostalCode</span>  
     </dd>  
     <dt>  
       <label asp-for="Country"></label>  
     </dt>  
     <dd>  
       <span>@Model.Country</span>  
     </dd>  
     <dt>  
       <label asp-for="ContactNumber"></label>  
     </dt>  
     <dd>  
       <span>@Model.ContactNumber</span>  
     </dd>  
     <dt>  
       <label asp-for="Email"></label>  
     </dt>  
     <dd>  
       @if (!string.IsNullOrWhiteSpace(Model.Email))  
       {  
         <a href="mailto:@Model.Email">@Model.Email</a>  
       }  
     </dd>  
     <dt>  
       <label asp-for="WebSite"></label>  
     </dt>  
     <dd>  
       @if (!string.IsNullOrWhiteSpace(Model.WebSite))  
       {  
         <a href="@Model.WebSite" target="_blank">@Model.WebSite</a>  
       }  
     </dd>  
   </dl>  
 </div>   

Update GetContact Action Method

• Change GetContrat Actin Method in ContactController.
• After getting data object from ContactBusinessLogic, transform it into ContactVM object.
• Pass contactVM object to view.

 using System;  
 using System.Collections.Generic;  
 using System.Linq;  
 using System.Threading.Tasks;  
 using Microsoft.AspNetCore.Mvc;  
 using WebApplicationCore.NetCore.BusinessLogic;  
 using WebApplicationCore.NetCore.Model;  
 using WebApplicationCore.NetCore.Models;  
 // For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860  
 namespace WebApplicationCore.NetCore.Controllers  
 {  
   public class ContactController : Controller  
   {  
     // GET: /<controller>/  
     public IActionResult Index()  
     {  
       return View();  
     }  
     public IActionResult GetContact(int id)  
     {  
       ContactBusinessLogic contactBL = new ContactBusinessLogic();  
       Contact contact = contactBL.GetContact(id);  
       ContactVM contactVM = new ContactVM  
       {  
         Address1 = contact.Address1,  
         Address2 = contact.Address2,  
         City = contact.City,  
         ContactId = contact.ContactId,  
         ContactNumber = contact.ContactNumber,  
         Country = contact.Country,  
         Email = contact.Email,  
         Name = contact.Name,  
         ProvinceState = contact.ProvinceState,  
         WebSite = contact.WebSite,  
         ZipPostalCode = contact.ZipPostalCode  
       };  
       return View(contactVM);  
     }  
   }  
 }  

Run Application in Debug Mode

• Press F5 or Debug Menu >> Start Debugging or Start IIS Express Button on Toolbar to start application in debugging mode.
• It will show Home Page in browser.
• Type http://localhost:21840/Contact/GetContact/1 in address bar of browser and it will show Contact details of contact with Id 1.
• Type http://localhost:21840/Contact/GetContact/2 in address bar of browser and it will show Contact details of contact with Id 2.
• Type http://localhost:21840/Contact/GetContact/3 in address bar of browser and it will show Contact details of contact with Id 3.
• Now we can notice that email and Web Site fields are showing as URLs. While there is no change in label names, they are still filed name. 

Use Data Annotation

• Now lets add Display Attribute (from System.ComponentModel.DataAnnotations) with suitable heading to every field of ContactVM.
• Run Application and Type http://localhost:21840/Contact/GetContact/1 in address bar of browser and it will show Contact details of contact with Id 1.
• Now we can notice that we view is showing headings from ContactVM Display Attribute instead of field names.
• Please refer ASP.NET Core 1.0 MVC Model for more details about Data Annotation.

 public class ContactVM  
   {  
     [Display(Name = "Contact Id")]  
     public int ContactId { get; set; }  
     [Display(Name = "Contact Name")]  
     public string Name { get; set; }  
     [Display(Name = "Address 1")]  
     public string Address1 { get; set; }  
     [Display(Name = "Address 2")]  
     public string Address2 { get; set; }  
     [Display(Name = "City")]  
     public string City { get; set; }  
     [Display(Name = "Province/State")]  
     public string ProvinceState { get; set; }  
     [Display(Name = "Zip/Postal Code")]  
     public string ZipPostalCode { get; set; }  
     [Display(Name = "Country")]  
     public string Country { get; set; }  
     [Display(Name = "Contact Number")]  
     public string ContactNumber { get; set; }  
     [Display(Name = "Email")]  
     public string Email { get; set; }  
     [Display(Name = "Web Site")]  
     public string WebSite { get; set; }  
   }  

Sample Source Code

We have placed sample code for this session in "CRUD operations in ASP.NET Core 1.0 MVC Application Part 2_Code.zip" in https://aspdotnetcore.codeplex.com/SourceControl/latest CodePlex repository.

CRUD Operations in AP.NET Core 1.0 All Parts

CRUD operations in ASP.NET Core 1.0 MVC Application Part 1
CRUD operations in ASP.NET Core 1.0 MVC Application Part 2
CRUD operations in ASP.NET Core 1.0 MVC Application Part 3
CRUD operations in ASP.NET Core 1.0 MVC Application Part 4
CRUD operations in ASP.NET Core 1.0 MVC Application Part 5
CRUD operations in ASP.NET Core 1.0 MVC Application Part 6
CRUD operations in ASP.NET Core 1.0 MVC Application Part 7 
CRUD operations in ASP.NET Core 1.0 MVC Application Part 8