Thursday, 8 September 2016

CRUD operations in ASP.NET Core 1.0 MVC Application Part 5

Let’s add Update Contact page for our Contacts. We are going to extend our application from last discussion  CRUD operations in ASP.NET Core 1.0 MVC Application Part 4. And we will be using same existing ContactVM.

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 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 CreateContact method with ContactId parameter and HttpGet attribute to explicitly specify that this is get method. It will be used to initialize and create 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. 
    • Other 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 the and we have performed all activities successfully, then we can move to 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 to have both methods 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 Context Menu of Contact >> Add >> New Item >> Installed >> .NET Core >> MVC View Page.
  • Name it UpdateContact.cshtml.
  • Click OK Button.
  • 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 Start IIS Express Button on Toolbar to start application in debugging mode.
  • It will show Home Page in browser.
  • Click Contact List Menu Open to open Contact List Page.
  • Click Edit Details link to open Update Contact Page and 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.

1 comment:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from Dot Net Training in Chennai. or learn thru ASP.NET Essential Training Online . Nowadays Dot Net has tons of job opportunities on various vertical industry.
    or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete