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

Let’s create List page for our contacts. Instead of creating a new Action Method, we will use Index method for this purpose. It is always recommended to implement the Index (default View), and a List page is a good candidate for it. We are going to extend our application from the last discussion, CRUD Operations In ASP.NET Core 1.0 MVC Application - Part Two.

We will also remove unnecessary Menu items and add new items for our ContactList page.

Add Contact View Model in the project.

• Open the existing Solution in Visual Studio 2015.
• Now, add a new class ContactListVM.CS in Models\Contact folder in WebApplicationCore.NetCore.
• Add required properties in ContactListVM.
• It is noticeable that we have added only those fields which are required for List View. This not only makes the application lighter and faster, but also makes it secure.
  
  1. public class ContactListVM
  2. {
  3. [Display(Name = "Contact Id")]
  4. public int ContactId { get; set; }
  5. [Display(Name = "Contact Name")]
  6. public string Name { get; set; }
  7. [Display(Name = "Contact Number")]
  8. public string ContactNumber { get; set; }
  9. [Display(Name = "Email")]
  10. public string Email { get; set; }
  11. [Display(Name = "Web Site")]
  12. public string WebSite { get; set; }
  13. }

Add Contact Index View

• Add new View to Contact\Contact folder.
  
• Open Add New Item Screen through Solution Context Menu of Contact >> Add >> New Item >> Installed >> .NET Core >> MVC View Page.
  
• Name it as Index.cshtml.
  
• Click on OK.
  
• It will add a new View in Contact View folder.
  
  
• Now, we have List of ContactListVM objects as Model.
• Here, we have used foreach loop in the View to iterate on the List of Contacts.
• Add a link in GetContact View to return to the ContactList page. We have explicitly omitted Controller details and added action method name only. In such case, action method form current Controller is referenced.
  
  
• Change Index View implementation.
• Remove extra menu items that are not required from _Layout.cshtml. Add Menu item for new Contact List.
  
  1. @model List<ContactListVM>
  2. <h2>Contact List</h2>
  3. <table class="table">
  4. <thead>
  5. <tr>
  6. <th>
  7. <label asp-for="FirstOrDefault().Name"></label>
  8. </th>
  9. <th>
  10. <label asp-for="FirstOrDefault().ContactNumber"></label>
  11. </th>
  12. <th>
  13. <label asp-for="FirstOrDefault().Email"></label>
  14. </th>
  15. <th>
  16. <label asp-for="FirstOrDefault().WebSite"></label>
  17. </th>
  18. <th></th>
  19. </tr>
  20. </thead>
  21. <tbody>
  22. @foreach (var item in Model)
  23. {
  24. <tr>
  25. <td>
  26. <span>@item.Name</span>
  27. </td>
  28. <td>
  29. <span>@item.ContactNumber</span>
  30. </td>
  31. <td>
  32. <span>@item.Email</span>
  33. </td>
  34. <td>
  35. <span>@item.WebSite</span>
  36. </td>
  37. <td>
  38. <a asp-controller="Contact" asp-action="GetContact" asp-route-id="@item.ContactId">Get Details</a>
  39. </td>
  40. </tr>
  41. }
  42. </tbody>
  43. </table>
  
  

Update Controller and Business Logic

• Add new method GetContacts to get all contacts in WebApplicationCore.NetCore.BusinessLogic.ContactBusinessLogic class.
  
• Update the Index Method of Contact Controller Class to load all the contacts, and to transform them into contactListVM.
  
  
  

Run Application in Debug Mode

• Press F5 or Debug Menu >> Start Debugging or Start IIS Express button on the Toolbar to start the application in debugging mode.
  
• It will show Home Page in browser.
  
• Click Contact List Menu to open the Contact List Page.
  
• Click Get Details link of first contact and it will take us to contact details page and URL will change to http://localhost:21840/Contact/GetContact/1.
  
  
  

Sample Source Code

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