Question

121

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

rated 0 times [ 123] [ 2] / answers: 1 / hits: 52476 / 10 Years ago, sun, may 4, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brynn

Add To Favorites

Follow

Total Points: 448

Total Questions: 83

Total Answers: 118

Location: Albania

Member since Sun, Nov 22, 2020

4 Years ago

answered 10 Years ago devinjadong · Accepted Answer

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

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

enter

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

enter