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

Let’s create a Get Details page with our first custom Model, View, and Controller. We are going to add new Controller ContactController and its GetContact action method will display the details of specified contact. We are going to use ASP.NET Core MVC Application from our previous discussion, Getting Started With ASP.NET Core 1.0 MVC. We have not discussed database connectivity yet. So, we are going to use a data mockup Model through static Contact List.

Create Data Model Project

• Open existing Solution in Visual Studio 2015.
  
• Now, add new Client Library .NET Core project in Solution.
  
  
• Open Add New Project Screen through Solution Context Menu >> Add >> New Project Or File >> New >> Project.
  
• Select Class Library (.NET Core) Template through Installed >> Templates >> Visual C# >> .NET Core.
  
• Name project as “WebApplicationCore.NetCore.Model”.
  
• Set suitable location as “C:\ASP.NET Core\Welcome To .NET Core 1.0\ ASP.NET Core” (selected by default to solution root).
  
• Click OK Button.
  
  
• It will create a new Class Library project.
  
• Rename Class1 as Contact and add the required properties.
  
  
  1. public class Contact
  2. {
  3. public Contact()
  4. {
  5. }
  6. public int ContactId { get; set; }
  7. public string Name { get; set; }
  8. public string Address1 { get; set; }
  9. public string Address2 { get; set; }
  10. public string City { get; set; }
  11. public string ProvinceState { get; set; }
  12. public string ZipPostalCode { get; set; }
  13. public string Country { get; set; }
  14. public string ContactNumber { get; set; }
  15. public string Email { get; set; }
  16. public string WebSite { get; set; }
  17. }
      
      
  
  

Create Business Logic Project

• Now, add new Client Library .NET Core project in Solution.
  
  
• Open Add New Project Screen through Solution Context Menu >> Add >> New Project Or File >> New >> Project.
• Select Class Library (.NET Core) through Installed >> Templates >> Visual C# >> .NET Core.
• Name project as “WebApplicationCore.NetCore.BusinessLogic”.
• Set suitable location as “C:\ASP.NET Core\Welcome To .NET Core 1.0\ ASP.NET Core” (selected by default to solution root).
• Click OK Button.
  
  
• It will create a new Class Library project.
  
• Add reference to “WebApplicationCore.NetCore.Model” because we are going to use Contact Model Class in project.
  
  
• Open WebApplicationCore.NetCore. BusinessLogic References >> Add References >> Reference Manager Screen >> Projects >> Solution >> Select WebApplicationCore.NetCore.Model.
• Click OK Button.
  
  
• Rename Class1 as ContactBusinessLogic and add method implementation for GetContact.
  
  
  1. public class ContactBusinessLogic
  2. {
  3. private static List<Contact> Contacts { get; set; } = new List<Contact>
  4. {
  5. new Contact { ContactId = 1, Name = "Imran Javed Zia", Address1 = "Street 1", Address2= string.Empty, City = "Lahore", ProvinceState = "Punjab", Country = "Pakistan", ZipPostalCode="12345", ContactNumber="+92123456789", Email="[email protected]", WebSite="http://www.ijz.today" },
  6. new Contact { ContactId = 2, Name = "Person Test", Address1 = "Street Test 1", Address2= "Test Address 2", City = "New York", ProvinceState = "NY", Country = "USA", ZipPostalCode="10000", ContactNumber="+1123456789", Email="[email protected]", WebSite="http://abc.com" },
  7. new Contact { ContactId = 3, Name = "Test Person", Address1 = "Street Test 1", Address2= "Test Address 2", City = "Dallas", ProvinceState = "NY", Country = "USA", ZipPostalCode="75201", ContactNumber="+1987654321", Email="[email protected]", WebSite=string.Empty }
  8. };
  9. public ContactBusinessLogic()
  10. {
  11. }
  12. public Contact GetContact(int contactId)
  13. {
  14. return ContactBusinessLogic.Contacts.FirstOrDefault(c => c.ContactId == contactId);
  15. }
  16. }
      
      
  
  

Add Reference to WebApplicationCore.NetCore.BusinessLogic in WebApplicationCore.NetCore

• Add reference WebApplicationCore.NetCore.BusinessLogic in WebApplicationCore.NetCore project.
  
  
• Open Reference Manager screen through WebApplicationCore.NetCore References Context Menu >> Add References.
  
• Now in Reference Manager Screen >> Projects >> Solution >> Select WebApplicationCore.NetCore. BusinessLogic.
  
• Click OK button.
  
  
• It will add reference to the WebApplicationCore.NetCore.BusinessLogic along with WebApplicationCore.NetCore.Model.
  
  
  

Add Contact Controller

• Add new Controller.
  
  
• Open Add New Item screen through Solution Context Menu of Controller >> Add >> New Item >> Installed >> .NET Core >> MVC Controller Class.
• Name it ContactController.cs.
• Click OK button.
  
  
• It will add a new Controller in the Controllers Folder.
  
  
• Add GetContact Action Method implementations.
  
  
• It is important to note that Home Controller is the default Controller and Index method is treated as default method. So, if we do not specify any Controller in query string, then Home Controller is called. Similarly, if action method is skipped in query string, then Index method will be called. This behavior is defined in Route. We will discuss Routing in detail in the future.
  
  
  1. public class ContactController : Controller
  2. {
  3. // GET: /<controller>/
  4. public IActionResult Index()
  5. {
  6. return View();
  7. }
  8. public IActionResult GetContact(int id)
  9. {
  10. ContactBusinessLogic contactBL = new ContactBusinessLogic();
  11. Contact contact = contactBL.GetContact(id);
  12. return View(contact);
  13. }
  14. }
      
      
  
  

Add Contact GetContact View

• Change _ViewImports.cshtml by including name space of Model. So, we can access Contact Model without a fully qualified name.
  
• Add new Contact folder in View folder.
  
  
• Open Context Menu of View >> Add >> New Folder.
• Name it Contact.
  
  
• Add new View.
  
  
• Open Add New Item screen through Solution Context Menu of Contact >> Add >> New Item >> Installed >> .NET Core >> MVC View Page.
  
  
• Name it GetContact.cshtml.
  
  
• Click OK button.
  
  
• It will add a new View in the Contact Folder.
  
  
• Change GetContact view implementations.
  
  
• We are using Strongly Typed Views. Therefore, we are declaring Model type on start of View as @model Contact.
  
  
• We can directly write the value of a native type by using @Model.FieldMame, where @Model refers to the model object that is passed to View and FieldName refers to any field of that object.
  
  
• Although we can use Views with different names, even from different folders, by default, Views folder name should be similar to Controller folder name without Controller suffix. And, Views must have the same name as related action method for default mapping. We will discuss Views and its types in detail in future discussions.
  
  
  1. @model Contact
  2. <h2>Contact</h2>
  3. <div>
  4. <dl class="dl-horizontal">
  5. <dt>
  6. Name
  7. </dt>
  8. <dd>
  9. @Model.Name
  10. </dd>
  11. <dt>
  12. Address1
  13. </dt>
  14. <dd>
  15. @Model.Address1
  16. </dd>
  17. <dt>
  18. Address2
  19. </dt>
  20. <dd>
  21. @Model.Address2
  22. </dd>
  23. <dt>
  24. City
  25. </dt>
  26. <dd>
  27. @Model.City
  28. </dd>
  29. <dt>
  30. ProvinceState
  31. </dt>
  32. <dd>
  33. @Model.ProvinceState
  34. </dd>
  35. <dt>
  36. ZipPostalCode
  37. </dt>
  38. <dd>
  39. @Model.ZipPostalCode
  40. </dd>
  41. <dt>
  42. Country
  43. </dt>
  44. <dd>
  45. @Model.Country
  46. </dd>
  47. <dt>
  48. ContactNumber
  49. </dt>
  50. <dd>
  51. @Model.ContactNumber
  52. </dd>
  53. <dt>
  54. Email
  55. </dt>
  56. <dd>
  57. @Model.Email
  58. </dd>
  59. <dt>
  60. WebSite
  61. </dt>
  62. <dd>
  63. @Model.WebSite
  64. </dd>
  65. </dl>
  66. </div>
      
      
  
  

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 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.
  
  
  

Sample Source Code

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