Insert record using Ajax in ASP.NET MVC

How to insert a record into database using Ajax?

To know more about Ajax and how it works, read jQuery Tips & Tricks ebook or watch the videos here.

After keeping the Microsoft jQuery Unobtrusive Ajax javascript file (see how to get it), scaffold Create view as we do normally for the model. In the Create method of Controller, we need to make few changes and below are the code highlighted that needs to be added/modified.

CONTROLLER CODE

        // GET: /AjaxStuff/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: /AjaxStuff/Create
        [HttpPost]
        public ActionResult Create(PersonalDetail personalDetail)
        {
            if (!Request.IsAjaxRequest())
            {
                Response.StatusCode = (int)System.Net.HttpStatusCode.BadRequest;
                return Content("Sorry, this method can't be called only from AJAX.");
            }
            try
            {
                if (ModelState.IsValid)
                {
                    db.PersonalDetails.Add(personalDetail);
                    db.SaveChanges();
                    return Content("Record added successfully !");
                }
                else
                {
                    StringBuilder strB = new StringBuilder(500);
                    foreach (ModelState modelState in ModelState.Values)
                    {
                        foreach (ModelError error in modelState.Errors)
                        {
                            strB.Append(error.ErrorMessage + ".");
                        }
                    }
                    Response.StatusCode = (int)System.Net.HttpStatusCode.BadRequest;
                    return Content(strB.ToString());
                }
            }
            catch (Exception ee)
            {
                Response.StatusCode = (int)System.Net.HttpStatusCode.BadRequest;
                return Content("Sorry, an error occured." + ee.Message);
            }
        }

The first action method simply returns the Create view.

The second method executes when Create button is clicked on the form. We are doing following in this Create method.

Checking whether the request to this method is Ajax or normal. We do not want normal request to this method so if the current request is not Ajax request we are throwing error.
In the try block

We are checking for the ModelState.IsValid, if it is then saving the record into the database by using normal approach that we have already seen in previous topics on inserting record into the database.
And returns the success message.
If ModelState is not valid then looping through each error and adding into the StringBuilder and then returning it.

If any error occurs, in the catch block also we are returning error.

Note that, setting the StatusCode of the Response is important to raise the OnFailure event of Ajax (we will see it later).

VIEW CODE

@model MVCTraining5.Models.PersonalDetail

@{
          ViewBag.Title = "Create";

          AjaxOptions options = new AjaxOptions
          {
                Confirm = "Are you sure to save record?",
                OnBegin = "OnBeginMethod",
                OnFailure = "OnFailtureMethod",
                OnSuccess = "OnSuccessMethod",
                OnComplete = "OnCompleteMethod"
          };
}

<h2>Create</h2>

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    @using (Ajax.BeginForm(options))
{
@Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>Personal Detail - Ajax</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class =
"control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new
{ @class = "form-control" } })
@Html.ValidationMessageFor(model => model.FirstName, "", new {
@class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class =
"control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new
{ @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LastName, "", new { @class
= "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Age, htmlAttributes: new { @class =
"control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Age, new { htmlAttributes = new {
@class = "form-control" } })
@Html.ValidationMessageFor(model => model.Age, "", new { @class =
"text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Active, htmlAttributes: new { @class =
"control-label col-md-2" })
            <div class="col-md-10">
                <div class="checkbox">
                    @Html.EditorFor(model => model.Active)
@Html.ValidationMessageFor(model => model.Active, "", new {
@class = "text-danger" })
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
                <label id="labelAjaxStatus" class="alert-warning"></label>
            </div>
        </div>
    </div>
    }

    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>

    <script type="text/javascript">
        var isError = false;
        function OnBeginMethod() {
            $("#labelAjaxStatus").text("Loading ....");
        }

        function OnFailtureMethod(error) {
            $("#labelAjaxStatus").text("Sorry, an error occured." + error.responseText);
            isError = true;
        }

        function OnSuccessMethod(data) {
            $("#labelAjaxStatus").text("Processed the data Successfully!");
            $("#FirstName").val('');
            $("#LastName").val('');
            $("#Age").val('');
        }

        function OnCompleteMethod(data, status) {
            if (!isError) {
                $("#labelAjaxStatus").text("Request completed. Here is the status: " +
                status);
            }
        }
    </script>
    @Scripts.Render("~/bundles/jqueryval")

Notice the above view and focus more on highlighted code snippets, we have first created the instance of the AjaxOptions and set following properties

Confirm - the message to ask from the user before actually submitting the form
OnBegin – function to call when OnBegin event executes (starts sending Ajax request)
OnFailure – function to call when any error occurs on the server side while processing the request
OnSuccess – function to call when request was processed successfully by server
OnComplete – function to call when the ajax operation is completed whether after failure or success

The next highlighted line is the reference of the jquery.unobtrusive-ajax.min.js file that is important In order to work with @Ajax helper method otherwise @Ajax helper method works as if it is @Html helper methods.

Now pass the AjaxOptions object as parameter to the @Ajax.BeginForm method.

We have also added a <label> element nearby Create button so that we will be displaying the status of the ajax request.

The last part of the highlighted code is the <script> block where isError variable is declared and used as a flag to write messages in the OnCompleteMethod.

OnBeginMethod – we are writing “Loading …” text to the label just beside Create button.

OnFailureMethod – we are writing error message returned from the server and also setting the isError to true

OnSuccessMethod – we are writing success message and resetting the value of textboxes

OnCompleteMethod – we are checking isError and if it is false (no error occurred, otherwise it will override the error message written in the OnFailureMethod), writing the complete message and the status returned from the server.

Note that all functionality works without any page refresh as we are working with ajax and it works with the help of jQuery that is why we need to reference the jquery.unobtrusive-ajax.min.js file into the page.

Views: 35728 | Post Order: 111

ASP.NET MVC > Ajax

Insert record using Ajax in ASP.NET MVC

How to insert a record into database using Ajax?

Related Posts

Utility Tools