ASP.Net MVC Ajax.BeginForm with an example

Hi, recently I was working on a project in MVC to post a form using Ajax to avoid page post back.
Let's see the code to implement Ajax.BeginForm in an MVC application.

Ajax.BeginForm in MVC

Nowadays users don't want to see a page refresh and web technologies are smart enough to handle this page refresh while posting a data to the server.

So, you want to post data in MVC and don't want to refresh your web page. Good.

Ideally, there are 2 ways to achieve this. Either you write traditional JQuery function and call /{controllername}/{actionmethod} or you can use Ajax.BeginForm.

Let's see Ajax.BeginForm with an example.

Create an MVC application in Visual studio. Add a controller.

Write a piece of code in your Action method.

    public class UserController : Controller
    {
        //
        // GET: /User/

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

        [HttpPost]
        public ActionResult Index(string name)
        {
            ViewBag.Message = "Hello " + name;
            return View();
        }
    }


Add View in your project (Read this blog to know more about View - View in MVC).

Add below scripts at the top of View page -

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


Add Below 2 scripts on the bottom of the view page

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


Ajax.BeginForm accepts Action method, Controller name, Ajax Options as parameter.
Please see below code.

<div id="MainDiv">
    <h2>Index</h2>
    @using (Ajax.BeginForm("Index", "User", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "MainDiv", LoadingElementId = "progressBar", OnSuccess = "OnSuccess", OnFailure = "OnFailure" }))
    {
        <input type="text" id="txtName" name="name" />
        <input type="submit" id="btnSubmit" value="Say Hello" />
    }

    @if (ViewBag.Message != null)
    {   
        @ViewBag.Message
    }

</div>


Write OnSuccess and OnFailure functions -

<script>
    function OnSuccess(response) {
        $("#btnSubmit").html("Please Wait...");
        $("#btnSubmit").prop("disabled", false);
    }
    function OnFailure(response) {
        $("#btnSubmit").html("Submit");
        $("#btnSubmit").removeAttr('disabled');
    }

</script>

if you want to show some loader on the page then you can use the ajaxStart and ajaxStop function to achieve this.

<script>

    $(document).ajaxStart(function () {
        $('#progressBar').show();

    });

    $(document).ajaxStop(function () {
        $('#progressBar').hide();
    });

</script>

Div with ajax loader image to show in progress image.

<div id="progressBar" class="myModal">
    <img src="~/Content/ajax-loader.gif" />
</div>


Below is the complete code in View page (index.cshtml)

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<div id="MainDiv">
    <h2>Index</h2>
    @using (Ajax.BeginForm("Index", "User", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "MainDiv", LoadingElementId = "progressBar", OnSuccess = "OnSuccess", OnFailure = "OnFailure" }))
    {
        <input type="text" id="txtName" name="name" />
        <input type="submit" id="btnSubmit" value="Say Hello" />
    }

    @if (ViewBag.Message != null)
    {   
        @ViewBag.Message
    }

</div>
<script>

    $(document).ajaxStart(function () {
        $('#progressBar').show();

    });

    $(document).ajaxStop(function () {
        $('#progressBar').hide();
    });

</script>
<script>
    function OnSuccess(response) {
        $("#btnSubmit").html("Please Wait...");
        $("#btnSubmit").prop("disabled", false);
    }
    function OnFailure(response) {
        $("#btnSubmit").html("Submit");
        $("#btnSubmit").removeAttr('disabled');
    }

</script>

<div id="progressBar" class="myModal">
    <img src="~/Content/ajax-loader.gif" />
</div>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Error - Ajax.BeginForm shows a blank page when clicking on Ajax link

Recently I was facing an issue while working with Ajax.BeginForm.
Whenever I use a view without a Layout page my Ajax works fine, but same code doesn't work when I use the same view with a Layout page.

Resolution - To overcome this issue return PartialView() instead of return View()

Below code doesn't work for me, it returns blank page when I click on submit button.

        [HttpPost]
        public ActionResult Login(UsersModel userModel, string returnURL = "")
        {
            //Write come code here
            return View(userModel);
        }

Changing return View() to return PartialView() works for me.

        [HttpPost]
        public ActionResult Login(UsersModel userModel, string returnURL = "")
        {
            //Write come code here
            return PartialView(userModel);
        }


You may like other blogs -

MVC Tutorial
Web API Tutorial
Is Angular JS different from Angular?

Interview Questions and Answers Series -

MVC Interview Questions and Answers
Web API interview questions and answers

Comments

Popular