How do I show a loading spinner when submitting for a partial view in asp.net MVC?

Question

I've written an application that loads partial views when you click "Continue". Sometimes the server hangs a little so I'd like to show some sort of loading message or spinner when the user clicks submit so they know the page is doing something.

This is just your standard form but my submit code looks like this(included a field so you can see an example):

                    <div class="form-group">
                    @Html.LabelFor(m => m.JointAdditionalIncomeSource, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-10">
                        <div class="col-sm-4">
                            @Html.TextBoxFor(m => m.JointAdditionalIncomeSource, new { @class = "form-control", placeholder = "Additional Income Source" })
                            @Html.ValidationMessageFor(m => m.JointAdditionalIncomeSource)
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-3 col-sm-10">
                <div class="col-sm-4">
                    <input type="submit" value="Back" id="back" class="btn btn-default" />
                    <input type="submit" value="Continue" id="continue" class="btn btn-default" />
                </div>
            </div>
        </div>

I've looked around on google for ways to do this and so far haven't had any luck. Jquery wouldn't be a bad method to use if anyone has an example of that.

Updates:

This is my current code that is not working.

<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>


<script>
    $('#continue').submit(function () {
        $('#LoanType').hide();
    });
</script>
<script type="text/javascript">
    function onBegin() {
        $("#divLoading").html('<image src="../Content/ajax-loader.gif" alt="Loading, please wait" />');
    }
    function onComplete() {
        $("#divLoading").html("");
    }
</script>

<body>
    <!--If user has javascript disabled-->
    <noscript>
        <div style="position: fixed; top: 0px; left: 0px; z-index: 3000;
                                  height: 100%; width: 100%; background-color: #FFFFFF">
            <p style="margin-left: 10px">To continue using this application please enable Javascript in your browser.</p>
        </div>
    </noscript>

    <!-- WIZARD -->
    <div id="MyWizard" class="site-padding-top container">


        <div data-target="#step1" id="step1" class="app-bg">

            <div class="form-horizontal">
                <div id="LoanType">
                    <div class="divider-app">
                        <p>Loan Type</p>

                    </div>
                    @using (Ajax.BeginForm("SelectLoanType", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "step2" }))
                    {
                        <div class="form-group">
                            @Html.LabelFor(m => m.LoanType, new { @class = "col-sm-2 control-label" })
                            <div class="col-sm-10">
                                <div class="col-sm-4">
                                    @Html.DropDownListFor(m => m.LoanType, new SelectList(Model.AllAvailableLoanTypes.Select(x => new { Value = x, Text = x }), "Value", "Text"), new { @class = "form-control", id = "loanType" })
                                </div>
                            </div>
                        </div>

                        <div class="form-group" id="LoanTypeSubmit">
                            <div class="col-lg-offset-3 col-sm-10">
                                <div class="col-sm-4">

                                    <input type="submit" value="Continue" id="continue" class="btn btn-default" />
                                </div>
                            </div>
                        </div>

                    }
                    <div id="divLoading"></div>
                </div>

The delay in the controller is working.

possible duplicate of [How to show processing animation / spinner during ajax request?](http://stackoverflow.com/questions/4901537/how-to-show-processing-animation-spinner-during-ajax-request) — Jeremy J Starcher, May 04 '14 at 04:22
I linked to a similar question. The server-side stuff doesn't matter and the jQuery code is the same. — Jeremy J Starcher, May 04 '14 at 04:23

score 23 · Accepted Answer · answered May 04 '14 at 05:10

Here goes the complete solution -

Lets say you have an ajax controller like this -

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

Which serves the following ajax view -

@{
    ViewBag.Title = "Ajax";
}

<h2>Ajax</h2>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
    function onBegin() {
        $("#divLoading").html('<image src="../Content/ajax-loader.gif" alt="Loading, please wait" />');
    }
    function onComplete() {
        $("#divLoading").html("");
    }
</script>

@using (Ajax.BeginForm("LoadRules", "Home", new AjaxOptions { UpdateTargetId = "Rules", OnBegin = "onBegin", OnComplete = "onComplete" }))
{
    <input type="submit" value="Load Rules" />
}

<div id="divLoading"></div>

<div id="Rules"></div>

Then when you click on the submit button it will hit the following controller, which has a delay of 5 secs (simulation of long running task) in serving the partial view -

    public ActionResult LoadRules(DDLModel model)
    {
        System.Threading.Thread.Sleep(5000);
        return PartialView("MyPartial");
    }

and the partial view is a simple view -

<div>
    This is Partial View
</div>

Here to show the loaded I simply used the following gif file -

enter image description here

when we click on the submit button it will show the progress in the following way -

enter image description here

And once the delay of 5 secs completes on the server side, it will show the partial view -

enter image description here

I'm not understanding how the submit controls showing the .gif. I've put the code in and it doesnt seem to load anything when i hit submit. I've updated my original post. — TheDizzle, May 05 '14 at 03:26
@TheDizzle, You have not included OnBegin and OnComplete event handlers in AjaxOptions. Also I am not sure who had given me a negative vote, but I am not sure why. It is working for me and original poster should follow exactly the same way how i narrated, but he missed an important step in AjaxOptions. — ramiramilu, May 05 '14 at 06:12
Hmm. wait symbol appears for 5 seconds but "This is Partial View" does not ever show up. — pianocomposer, Jul 01 '22 at 14:56

pianocomposer · Answer 2 · 2022-07-05T17:01:31.340

The answer by ramiramilu is fairly close, but our Team was unable to integrate Ajax into our MVC 5 web app. There were other issues as well. So I am going to (more or less) duplicate his answer with some minor bug fixes.

Here goes the complete solution -

Lets say you have an ajax controller like this -

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

Which serves the following ajax view -

            @{
            ViewBag.Title = "Ajax";
        }
        
        <h2>Ajax</h2>
        
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js" integrity="sha512-YHQNqPhxuCY2ddskIbDlZfwY6Vx3L3w9WRbyJCY81xpqLmrM6rL2+LocBgeVHwGY9SXYfQWJ+lcEWx1fKS2s8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script>
        <script type="text/javascript">
            function onBegin() {
                $("#divLoading").html('<image src="../Content/ajax-loader.gif" alt="Loading, please wait" />');
            }
            function onComplete() {
                $("#divLoading").html("");
            }
        </script>
        
    <form asp-action="LoadRules" asp-controller="Home" method="POST" data-ajax="true" data-ajax-update="#Rules" data-ajax-begin="onBegin" data-ajax-complete="onComplete">
        <input type="submit" value="Load Rules" />
    </form>
        
        <div id="divLoading"></div>
        
        <div id="Rules"></div>

Then when you click on the submit button it will hit the following controller, which has a delay of 5 secs (simulation of long running task) in serving the partial view -

public PartialViewResult LoadRules(DDLModel model)
    {
        System.Threading.Thread.Sleep(5000);
        return PartialView("MyPartial", model);
    }

and the partial view is a simple view -

<div>
    This is Partial View
</div>

Here to show the loaded I simply used the following gif file -

when we click on the submit button it will show the progress in the following way -

And once the delay of 5 secs completes on the server side, it will show the partial view -

How do I show a loading spinner when submitting for a partial view in asp.net MVC?

2 Answers2

Linked