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

Let’s create a contact page for our contacts. Instead of creating a new View Model, we will be using existing ContactVM, but we will do some amendments for the purpose of validation. We are going to extend our Application from the last discussion CRUD Operations In ASP.NET Core 1.0 MVC Application - Part Three.

Add CreateContact Method in ContactBusinessLogic

• Open existing solution in Visual Studio 2015.
• Open WebApplicationCore.NetCore.BusinessLogic.ContactBusinessLogic class.
• Add new CreateContact method.
• It may add new contact in mockup list data.

Add CreateContact Action Methods in ContactController

• Add two new CreateContact Methods.
  
  
• CreateContact method with the no parameter and HttpGet attribute to explicitly specify that this is a get method. It will be used to initialize and create a "Create Page". We will pass a view; an empty ContactVM.
  
  
• CreateContact method with the parameter of ContactVM type and HttpPost attribute to explicitly specify that this is the post method. It will be used to validate an input at Server side and to create an object.
  
  
• Post method may use ModelState.IsValid property to check, if the model does not have any error.
  
  
• Transform ContactVM object to contact object and pass it to ContactBusinessLogic().CreateContact for the further processing.
  
  
• If no error is found, we have performed all the activities successfully. We can move to another page, for example, in our case, we may navigate to the main list page. Alternatively, we may return the same view with the current object for the reprocessing.
  
  
• It is not required to have both methods with the same name, but it is conventional and has been in practice for a long time.
  
  
• RedirectToAction is used to redirect to some other view.
  
  1. [HttpGet]
  2. public IActionResult CreateContact()
  3. {
  4. ContactVM contactVM = new ContactVM();
  5. return View(contactVM);
  6. }
  7. [HttpPost]
  8. public IActionResult CreateContact(ContactVM contactVM)
  9. {
  10. if (this.ModelState.IsValid)
  11. {
  12. Contact contact = new Contact
  13. {
  14. Address1 = contactVM.Address1,
  15. Address2 = contactVM.Address2,
  16. City = contactVM.City,
  17. ContactId = contactVM.ContactId,
  18. ContactNumber = contactVM.ContactNumber,
  19. Country = contactVM.Country,
  20. Email = contactVM.Email,
  21. Name = contactVM.Name,
  22. ProvinceState = contactVM.ProvinceState,
  23. WebSite = contactVM.WebSite,
  24. ZipPostalCode = contactVM.ZipPostalCode
  25. };
  26. ContactBusinessLogic contactBL = new ContactBusinessLogic();
  27. contact = contactBL.CreateContact(contact);
  28. if(contact.ContactId>0)
  29. {
  30. return RedirectToAction("Index");
  31. }
  32. }
  33. return View(contactVM);
  34. }

Add Contact CreateContact 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 CreateContact.cshtml.
  
• Click OK button.
  
• It will add a new view in Contact view folder.
  
  
• Now, we have ContactVM objects as a model.
• First of all, we have used form TagHelper to create a form and it will post to CreateContact action method of Controller by specifying asp-action="CreateContact".
• Div TagHelper is used to show the validation summary of all the fields.
• Label TagHelper is used to show the label field.
• Input TagHelper is used to bind input of the fields with the related fields.
• Span TagHelper is used to show an error message of the related fields.
• Anchor TagHelper to add the link to navigate to the main list page.
• A simple native input button of submit type to submit the form.
  
  
• Change Index view implementation to add Create Contact option.
  
  1. @model ContactVM
  2. <h2>Create Contact</h2>
  3. <form asp-action="CreateContact">
  4. <div class="form-horizontal">
  5. <div asp-validation-summary="ModelOnly" class="text-danger"></div>
  6. <div class="form-group">
  7. <label asp-for="ContactId" class="col-md-2 control-label"></label>
  8. <div class="col-md-10">
  9. <input asp-for="ContactId" class="form-control" disabled="disabled" />
  10. <span asp-validation-for="ContactId" class="text-danger" />
  11. </div>
  12. </div>
  13. <div class="form-group">
  14. <label asp-for="Name" class="col-md-2 control-label"></label>
  15. <div class="col-md-10">
  16. <input asp-for="Name" class="form-control" />
  17. <span asp-validation-for="Name" class="text-danger" />
  18. </div>
  19. </div>
  20. <div class="form-group">
  21. <label asp-for="Address1" class="col-md-2 control-label"></label>
  22. <div class="col-md-10">
  23. <input asp-for="Address1" class="form-control" />
  24. <span asp-validation-for="Address1" class="text-danger" />
  25. </div>
  26. </div>
  27. <div class="form-group">
  28. <label asp-for="Address2" class="col-md-2 control-label"></label>
  29. <div class="col-md-10">
  30. <input asp-for="Address2" class="form-control" />
  31. <span asp-validation-for="Address2" class="text-danger" />
  32. </div>
  33. </div>
  34. <div class="form-group">
  35. <label asp-for="City" class="col-md-2 control-label"></label>
  36. <div class="col-md-10">
  37. <input asp-for="City" class="form-control" />
  38. <span asp-validation-for="City" class="text-danger" />
  39. </div>
  40. </div>
  41. <div class="form-group">
  42. <label asp-for="ProvinceState" class="col-md-2 control-label"></label>
  43. <div class="col-md-10">
  44. <input asp-for="ProvinceState" class="form-control" />
  45. <span asp-validation-for="ProvinceState" class="text-danger" />
  46. </div>
  47. </div>
  48. <div class="form-group">
  49. <label asp-for="ZipPostalCode" class="col-md-2 control-label"></label>
  50. <div class="col-md-10">
  51. <input asp-for="ZipPostalCode" class="form-control" />
  52. <span asp-validation-for="ZipPostalCode" class="text-danger" />
  53. </div>
  54. </div>
  55. <div class="form-group">
  56. <label asp-for="Country" class="col-md-2 control-label"></label>
  57. <div class="col-md-10">
  58. <input asp-for="Country" class="form-control" />
  59. <span asp-validation-for="Country" class="text-danger" />
  60. </div>
  61. </div>
  62. <div class="form-group">
  63. <label asp-for="ContactNumber" class="col-md-2 control-label"></label>
  64. <div class="col-md-10">
  65. <input asp-for="ContactNumber" class="form-control" />
  66. <span asp-validation-for="ContactNumber" class="text-danger" />
  67. </div>
  68. </div>
  69. <div class="form-group">
  70. <label asp-for="Email" class="col-md-2 control-label"></label>
  71. <div class="col-md-10">
  72. <input asp-for="Email" class="form-control" />
  73. <span asp-validation-for="Email" class="text-danger" />
  74. </div>
  75. </div>
  76. <div class="form-group">
  77. <label asp-for="WebSite" class="col-md-2 control-label"></label>
  78. <div class="col-md-10">
  79. <input asp-for="WebSite" class="form-control" />
  80. <span asp-validation-for="WebSite" class="text-danger" />
  81. </div>
  82. </div>
  83. <div class="form-group">
  84. <div class="col-md-offset-2 col-md-10">
  85. <input type="submit" value="Create" class="btn btn-default" />
  86. </div>
  87. </div>
  88. </div>
  89. </form>
  90. <p>
  91. <a asp-action="Index">Back to List</a>
  92. </p>
  1. @model List<ContactListVM>
  2. <h2>Contact List</h2>
  3. <table class="table">
  4. <thead>...</thead>
  5. <tbody>...</tbody>
  6. </table>
  7. <p>
  8. <a asp-action="CreateContact">Create Contact</a>
  9. </p>

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 the debugging mode.
  
• It will show Home Page in the Browser.
  
• Click Contact List Menu Open to open Contact List Page.
  
• Click Create Contact link to open Create Contact Page and URL will change to http://localhost:21840/Contact/CreateContact.
  
• Add contact data, click create button and it will add the contact in the list.
  
• It allows us to insert the contact with the incomplete or incorrect information.

Add Validation to Create Contact

• Add the required data annotation of the required string length, Email and WEB URL type.
  
• Add the script references to jquery-validation.js and jquery-validation-unobtrusive.js in the required view or in _Layout view. It is always recommended to include JavaScripts in the required views only, but for generic items we are going to include these in _Layout.
  
• Now run the Application and try to input the incorrect data or to miss the required data. It will not allow you to press create button. In this way, we not only achieve better user experience, but also make our data cleaner with few Server side hits.
  
• We will discuss the data validation in detail in future sessions.
  
  1. public class ContactVM
  2. {
  3. [Display(Name = "Contact Id")]
  4. public int ContactId { get; set; }
  5. [Required]
  6. [StringLength(100, MinimumLength = 3)]
  7. [Display(Name = "Contact Name")]
  8. public string Name { get; set; }
  9. [StringLength(100)]
  10. [Display(Name = "Address 1")]
  11. public string Address1 { get; set; }
  12. [StringLength(100)]
  13. [Display(Name = "Address 2")]
  14. public string Address2 { get; set; }
  15. [StringLength(100)]
  16. [Display(Name = "City")]
  17. public string City { get; set; }
  18. [StringLength(100)]
  19. [Display(Name = "Province/State")]
  20. public string ProvinceState { get; set; }
  21. [StringLength(10)]
  22. [Display(Name = "Zip/Postal Code")]
  23. public string ZipPostalCode { get; set; }
  24. [StringLength(100)]
  25. [Display(Name = "Country")]
  26. public string Country { get; set; }
  27. [Required]
  28. [StringLength(100, MinimumLength = 7)]
  29. [Display(Name = "Contact Number")]
  30. public string ContactNumber { get; set; }
  31. [EmailAddress]
  32. [StringLength(255)]
  33. [Display(Name = "Email")]
  34. public string Email { get; set; }
  35. [Url]
  36. [StringLength(100)]
  37. [Display(Name = "Web Site")]
  38. public string WebSite { get; set; }
  39. }

Run Application in Debug Mode Again

• Press F5 or Debug Menu >> Start Debugging or start IIS Express button on the toolbar to start the Application in the debugging mode.
  
• It will show Home Page in the Browser.
  
• Click Contact List Menu to open Contact List Page.
  
• Click Create Contact link to open Create Contact Page and URL will change to http://localhost:21840/Contact/CreateContact.
  
• Without adding any data, click Create button and it will show the errors for the required fields.
  
• Now, try to add zip code larger than 10 character or incorrect Email or Website. It will show you error messages.
  
• Now correct the data, click Create button and it will create contact.

Sample Source Code

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