CRUD Operations In ASP.NET Core 1.0 MVC Application - Part Two

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 One

We can see that we have hard coded headings and embedded the code to generate required HTML. Although this approach works fine for simple Views, we have to take care of a lot of things and write a lot of code to handle the 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 is called ViewModels. These ViewModels are based on the concept of POCO (Plain Old CLR Object). We will discuss pros and cons of POCO or ViewModels in detail, in a different session.

Add Contact View Model in Project.

• Open existing Solution in Visual Studio 2015.
• Add new folder, Models, in the 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 the namespace of WebApplicationCore.NetCore.Models. So, we can access Contact View Model without fully qualified name.
  
  
• Use ContactVM as model in the View, instead of Contact.
  
  
• Update GetContact View - Use LabelTagHelper to display the field headings from View Model instead of hard coded 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 display 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 features used to enable server side code to create, update, and render the HTML in View file. They are said to be evaluations of HTML Helpers. Although, HTML Helpers do exist seperately, 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 GetContact Action Method in ContactController.
  
  
• After getting the 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 the Home Page in browser.
  
  
• Type http://localhost:21840/Contact/GetContact/1 in address bar of browser and it will show the Contact details of contact with Id 1.
  
  
• Type http://localhost:21840/Contact/GetContact/2 in address bar of browser and it will show the Contact details of contact with Id 2.
  
  
• Type http://localhost:21840/Contact/GetContact/3 in address bar of browser and it will show the Contact details of contact with Id 3.
  
  
• Now, we can notice that email and website fields are showing as URLs. While there is no change in label names, they are still filed name.
  
  
  

Use Data Annotation

• Now, add Display Attribute (from System.ComponentModel.DataAnnotations) with suitable heading to every field of ContactVM.
  
  
• Run the application and type http://localhost:21840/Contact/GetContact/1 in address bar of browser. It will show the Contact details of contact with Id 1.
  
  
• Now, we can notice that the View is showing the headings from ContactVM Display Attribute instead of field names.
  

  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

I have placed sample code for this session in "CRUD operations in ASP.NET Core 1.0 MVC Application Part 2_Code.zip" in the CodePlex repository.