---

Search posts under ASP.NET MVC:

---

Update record using Web API in ASP.NET MVC

How to update record to database by consuming ASP.NET Web API from ASP.NET MVC View?

To demonstrate update record into the database, we have updated the list view of listing post to add a Edit link just beside the Auto ID value as demonstrated below.

Clicking Edit link send the user to Edit action method of the controller with autoid querystring value. The action method looks like below.

         http://localhost:28206/home/edit?autoid=2

CONTROLLER ACION METHOD

public ActionResult Edit()
{
    return View();
}

This method simply shows the Edit view as shown below.

VIEW CODE

@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>
    <div>
        <label>First Name</label>
        @Html.TextBox("FirstName")
    </div>
    <div>
        <label>Last Name</label>
        @Html.TextBox("LastName")
    </div>
    <div>
        <label>Age</label>
        @Html.TextBox("Age")
    </div>
    <div>
        <label>Active</label>
        @Html.DropDownList("Active", new List<selectlistitem>
        {
new SelectListItem {Text = "Yes", Value = "true", Selected = true},
new SelectListItem {Text = "No", Value = "false"},
}, "Select ...")
    </div>
    <div>
        <button id="btnAdd">Add</button>
        @Html.ActionLink("Back to List", "ListRecords")
    </div>

    <script type="text/javascript">

        $("#btnAdd").click(function () {
        
            var PersonalDetails = {
                "FirstName": $("#FirstName").val(),
                "LastName": $("#LastName").val(),
                "Age": $("#Age").val(),
                "Active": $("#Active").val(),
                "AutoId": @Request.QueryString["autoid"]
            };
            $.ajax({
                type: "PUT",
                url:
                'http://localhost:28206/api/PersonalDetails/PutPersonalDetails/@Request.QueryString[
            "autoid"]',
                data: JSON.stringify(PersonalDetails),
            contentType: "application/json;charset=utf-8",
            success: function (data, status, xhr) {
                alert("The result is : " + status + ": " + data);
            },
            error: function (xhr) {
                alert(xhr.responseText);
            }
        });
        });

        function ShowDetails(id) {
            var myurl = 'http://localhost:28206/api/PersonalDetails/GetPersonalDetails/' + id
            $.ajax(
            {
                url: myurl,
                type: 'GET',
                dataType: 'json',
                success: function (person, status, xhr) {
                    $("#FirstName").val(person.FirstName);
                    $("#LastName").val(person.LastName);
                    $("#Age").val(person.Age);
                    document.getElementById("Active").value = person.Active;
                    $("#btnAdd").text("Update");
                },
                error: function (xhr, status, error) {
                    alert(error);
                }
            });
        }
        ShowDetails(@Request.QueryString["autoid"]);
    </script>

The above view is almost same as the Create view, we have made minor changes to fit for Update.

1. We have changed the text of the button to “Update”
2. On click of the Update button, in the PersonalDetails object, now are also sending the AutoId property whose value is the queystring value coming in to this page.

        // GET: api/PersonalDetailsAPI/5
        [ResponseType(typeof(PersonalDetail))]
        public IHttpActionResult GetPersonalDetail(int id)
        {
            PersonalDetail personalDetail = db.PersonalDetails.Find(id);
            if (personalDetail == null)
            {
                return NotFound();
            }

            return Ok(personalDetail);
        }

        // PUT api/PersonalDetails/5
        public IHttpActionResult PutPersonalDetails(int id, PersonalDetails
personaldetails)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != personaldetails.AutoId)
            {
                return BadRequest("Sorry, seems something wrong. Couldn't determine
record to update.");
            }

            db.Entry(personaldetails).State = EntityState.Modified;

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!PersonalDetailsExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return Ok(personaldetails);
        }