Ajax.BeginForm In ASP.NET MVC

Ajax.BeginForm In ASP.NET MVC

Two Example , First for Simple Ajax form and second for ajax form with loading gif file.

Controller Action

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

Note: To implement ajax.begin form to jquery and jquery .ajax.unbrustive package must be added

Create a Model Class(AjaxModel)

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace testCode.Models
{
    public class AjaxModel
    {
        [Required]
        public string Name { get; set; }
        [Required]
        public string City { get; set; }
        [Required]
        public string Address { get; set; }
    }
}

View Code:

@model testCode.Models.AjaxModel
@{
    ViewBag.Title = "AjaxFormExample";
}
<script src='@Url.Content("~/Scripts/jquery-1.10.2.min.js")'></script>
<script src='@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")'></script>
<!-- Simple Ajax.BeginForm Example Start-->
@*<div id="divajax">
        @using (Ajax.BeginForm("AjaxFormExample", "HtmlHelpersEx", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divajax" }))
        {
            @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>*@
<!-- Simple Ajax.BeginForm Example End-->
<!--  Ajax.BeginForm With Loading Image Example Start-->





<div id="divajax">
    @using (Ajax.BeginForm("AjaxFormExample", "HtmlHelpersEx", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divajax" , OnBegin= "disablebutton", OnSuccess="enablebutton", LoadingElementId= "loading" }))
    {
        @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" id="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 class="form-group">
            <div class="col-md-offset-2 col-md-12 text-success" id="loading" style="display:none">
                <img src='@Url.Content("~/Images/ajax.gif")' alt="" />
            </div>
        </div>

    </div>
    }
</div>
<script>


        function disablebutton() {
            $("#save").attr("disabled", "disabled");
        }
        function enablebutton() {
            $("#save").removeAttr("disabled");
        }



</script>
<!-- Ajax.BeginForm With Loading Image Example End-->
@*<script src='@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")'></script>*@

Action:

  [HttpPost]
        public ActionResult AjaxFormExample(AjaxModel obj)
        {
            if (ModelState.IsValid)
            {
                Thread.Sleep(3000);
                ViewBag.Records = "Employee Name is " + obj.Name + " City Name is " + obj.City + " Address is " + obj.Address;

                return PartialView("AjaxFormExample");
            }
            return View();
        }