Post Data To Controller Without Page Refresh In ASP.NET MVC

Now the following window will appear and search for the jQuery unobtrusive Ajax as.

Choose the appropriate version and click on the Install button. It will install the jQuery UI library to your project and the library script file get added to the script folder of the created project which you can add references to the project.

• Use the CDN library provided by Microsoft, jQuery, Google, or any other that requires an active internet connection.
• Download the library using NuGet and reference it in the project.

The library will be look like as follows after adding it in the script folder.

To work Ajax.BeginForm functionality properly don't forget to add the reference of the following jQuery library.

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

After adding the necessary code, files, and logic the EmployeeMaster.cshtml code will look like the following.

@model AjaxBeginFormwithMVC.Models.EmpModel

@{
    ViewBag.Title = "www.compilemode.com";
}

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

<div id="divEmp">

    @using (Ajax.BeginForm("EmployeeMaster", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp" }))
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">

            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-primary" />
                </div>
            </div>
            <hr />
            <div class="form-group">
                <div class="col-md-offset-2 col-md-12 text-success">
                    @ViewBag.Records
                </div>
            </div>

        </div>
    }
</div>

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

Now run the application and click on the save button without entering text in the textbox, it will fire the validation as in the following.

From the preceding example, it is clear that validation also gets fired. Now enter the proper details and click on the save button, it will pass data to the controller asynchronously without the whole page refresh.

From all the above examples, how to post data to the controller without Page refresh in ASP.NET MVC using Ajax.BeginForm.

Note

• For the complete code, please download the sample zip file.
• You need to use the jQuery library.

Summary

I hope this article is useful for all readers. If you have a suggestion then please contact me.