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

 We are going to extend our application from the last discussion,  CRUD Operations In ASP.NET Core 1.0 MVC Application - Part Four. And we will be using same existing ContactVM. Let’s add UpdateContact page for our Contacts.

Add UpdateContact method in ContactBusinessLogic

• Open existing Solution in Visual Studio 2015.
• Open WebApplicationCore.NetCore.BusinessLogic.ContactBusinessLogic class.
• Add new UpdateContact method.
• It may update the existing contact in mockup list data.
  

   public bool UpdateContact(Contact contact)
  {
      bool updated = false;
      Contact existingContact = this.GetContact(contact.ContactId);
  
      if (existingContact != null)
      {
          existingContact.Address1 = contact.Address1;
          existingContact.Address2 = contact.Address2;
          existingContact.City = contact.City;
          existingContact.ContactNumber = contact.ContactNumber;
          existingContact.Country = contact.Country;
          existingContact.Email = contact.Email;
          existingContact.Name = contact.Name;
          existingContact.WebSite = contact.WebSite;
          existingContact.ZipPostalCode = contact.ZipPostalCode;
          updated = true;
      }
  
      return updated;
  }

  
  

Add UpdateContact Action Methods in ContactController

• Add two new UpdateContact methods.
  
  
• One is a CreateContact method with ContactId parameter and HttpGet attribute to explicitly specify it as get method. It will be used to initialize and create the Update Page. We will pass View a ContactVM, having contact data.
  
  
• Get Contact Data from Business Logic for given id.
• Transform it into ContactVM and pass to view.
• Logically, this is almost similar to GetContact.
  
  
• The other is an UpdateContact method with parameter of ContactVM type and HttpPost attribute to explicitly specify that this is post method. It will be used to validate input at server side and to update object.
  
  
• Post method may use ModelState.IsValid property to check if model does not have any error. 
• Transform ContactVM object to Contact object and pass it to ContactBusinessLogic().UpdateContact for further processing.
• If no error is found there and we have performed all activities successfully, then we can move to the other page. For example, in our case, we may navigate to main list page. Alternatively, we may return the same View with current object for reprocessing.
• Logically, this is almost similar to CreateContact.
  
  
• It is not required for both methods to have the same name, but it is conventional and "in practice" for a long time.
  
  
• RedirectToAction is used to redirect to some other View.
  

  [HttpGet]
  public IActionResult UpdateContact(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);
  }
  
  [HttpPost]
  public IActionResult UpdateContact(ContactVM contactVM)
  {
      if (this.ModelState.IsValid)
      {
          Contact contact = new Contact
          {
              Address1 = contactVM.Address1,
              Address2 = contactVM.Address2,
              City = contactVM.City,
              ContactId = contactVM.ContactId,
              ContactNumber = contactVM.ContactNumber,
              Country = contactVM.Country,
              Email = contactVM.Email,
              Name = contactVM.Name,
              ProvinceState = contactVM.ProvinceState,
              WebSite = contactVM.WebSite,
              ZipPostalCode = contactVM.ZipPostalCode
          };
          ContactBusinessLogic contactBL = new ContactBusinessLogic();
          if (contactBL.UpdateContact(contact))
          {
              return RedirectToAction("Index");
          }
      }
      return View(contactVM);
  }

  
  

Add Contact UpdateContact View

• Add new View to Contact\Contact folder.
  
• Open Add New Item screen through Solution. Go to Context Menu of Contact >> Add >> New Item >> Installed >> .NET Core >> MVC View Page.
  
• Name it as UpdateContact.cshtml.
  
• Click OK.
  
• It will add a new View in Contact View folder.
  
  
• Now, we have ContactVM objects as model.
• Form does not process disabled items, so we have added a hidden field for ContactId, to make it available in Post method.
  
  
• Change Index View implementation to add Update Contact option with each record.
  

  @model ContactVM
  <h2>Update Contact</h2>
  <form asp-action="UpdateContact">
      <input type="hidden" asp-for="ContactId" />
      <div class="form-horizontal">
          <div asp-validation-summary="ModelOnly" class="text-danger"></div>
          <div class="form-group">
              <label asp-for="ContactId" class="col-md-2 control-label"></label>
              <div class="col-md-10">
                  <input asp-for="ContactId" class="form-control" disabled="disabled" />
                  <span asp-validation-for="ContactId" class="text-danger" />
              </div>
          </div>
          <div class="form-group">
              <label asp-for="Name" class="col-md-2 control-label"></label>
              <div class="col-md-10">
                  <input asp-for="Name" class="form-control" />
                  <span asp-validation-for="Name" class="text-danger" />
              </div>
          </div>
          <div class="form-group">
              <label asp-for="Address1" class="col-md-2 control-label"></label>
              <div class="col-md-10">
                  <input asp-for="Address1" class="form-control" />
                  <span asp-validation-for="Address1" class="text-danger" />
              </div>
          </div>
          <div class="form-group">
              <label asp-for="Address2" class="col-md-2 control-label"></label>
              <div class="col-md-10">
                  <input asp-for="Address2" class="form-control" />
                  <span asp-validation-for="Address2" class="text-danger" />
              </div>
          </div>
          <div class="form-group">
              <label asp-for="City" class="col-md-2 control-label"></label>
              <div class="col-md-10">
                  <input asp-for="City" class="form-control" />
                  <span asp-validation-for="City" class="text-danger" />
              </div>
          </div>
          <div class="form-group">
              <label asp-for="ProvinceState" class="col-md-2 control-label"></label>
              <div class="col-md-10">
                  <input asp-for="ProvinceState" class="form-control" />
                  <span asp-validation-for="ProvinceState" class="text-danger" />
              </div>
          </div>
          <div class="form-group">
              <label asp-for="ZipPostalCode" class="col-md-2 control-label"></label>
              <div class="col-md-10">
                  <input asp-for="ZipPostalCode" class="form-control" />
                  <span asp-validation-for="ZipPostalCode" class="text-danger" />
              </div>
          </div>
          <div class="form-group">
              <label asp-for="Country" class="col-md-2 control-label"></label>
              <div class="col-md-10">
                  <input asp-for="Country" class="form-control" />
                  <span asp-validation-for="Country" class="text-danger" />
              </div>
          </div>
          <div class="form-group">
              <label asp-for="ContactNumber" class="col-md-2 control-label"></label>
              <div class="col-md-10">
                  <input asp-for="ContactNumber" class="form-control" />
                  <span asp-validation-for="ContactNumber" class="text-danger" />
              </div>
          </div>
          <div class="form-group">
              <label asp-for="Email" class="col-md-2 control-label"></label>
              <div class="col-md-10">
                  <input asp-for="Email" class="form-control" />
                  <span asp-validation-for="Email" class="text-danger" />
              </div>
          </div>
          <div class="form-group">
              <label asp-for="WebSite" class="col-md-2 control-label"></label>
              <div class="col-md-10">
                  <input asp-for="WebSite" class="form-control" />
                  <span asp-validation-for="WebSite" class="text-danger" />
              </div>
          </div>
          <div class="form-group">
              <div class="col-md-offset-2 col-md-10">
                  <input type="submit" value="Update" class="btn btn-default" />
              </div>
          </div>
      </div>
  </form>
  <p>
      <a asp-action="Index">Back to List</a>
  </p>

  <td>
     <a asp-controller="Contact" asp-action="GetContact" asp-route-id="@item.ContactId">Get Details</a> |
     <a asp-controller="Contact" asp-action="UpdateContact" asp-route-id="@item.ContactId">Edit Details</a>
  </td>

  
  

Run Application in Debug Mode

• Press F5 or Debug Menu >> Start Debugging or click IIS Express on Toolbar to start application in debugging mode.
  
• It will show Home Page in browser.
  
• Click Contact List menu "Open" to open the Contact List Page.
  
• Click "Edit Details" link to open Update Contact Page and the URL will change to http://localhost:21840/Contact/UpdateContact/3.
  
• Edit contact data and click Update Button and it will update contact in the list.
  
  
  

Sample Source Code

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