---

Search posts under ASP.NET MVC:

---

Insert record using Web API in ASP.NET MVC

How to insert a record into database by consuming ASP.NET Web API from ASP.NET MVC View?

To insert a record into the database by consuming ASP.NET Web API from ASP.NET MVC view, we can follow below approach.

Create a view with the respective fields.

VIEW CODE

@{
    ViewBag.Title = "Create";
}
<h2>Create</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()
            };

            $.ajax({
                type: "POST",
                url: 'http://localhost:28206/api/PersonalDetails/PostPersonalDetails',
                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);
                }
            });
        });
    </script>

In the above code, we have three TextBoxes for FirstName, LastName, Age field of the database table and then a dropdown for the Active field.

Notice the JavaScript code block now. When the Add button is clicked we are forming a JavaScript object and setting respective property of the Model with the value of the TextBox and the DropDown. Next we are calling jQuery Ajax method to post the data on the web api url.

In the jQuery.Ajax method, we are setting following properties

1. type : “POST”
2. url : the url of the Web API that is responsible to accept the Model object and insert the data
3. data: the JavaScript object is being stringify so that it can be posted to the server
4. contentType : setting the type of content being sent from this page
5. success: function that is giving the alert once the data is processed on the server successfully
6. error: function that shows the response error text in case error occurred on the server

        [HttpPost]
        public IHttpActionResult PostPersonalDetails([FromBody] PersonalDetails
personaldetails)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.PersonalDetails.Add(personaldetails);
            db.SaveChanges();

            return Ok(personaldetails);
        }