ASP.NET MVC - Ajax Spinner while loading a Partial view

Question

I'm using ASP.NET MVC and I'm trying to use an Ajax Spinner. When the user submit a definied button, an ajax spinner should be displayed while my Partial View is builed and displayed. Here is what I'm doing.

Here's my button and the jQuery code linked to this button. The suggestionsContainer represents the container where the Partial View will be rendered :

<input type="button" value="Suggérer rdv" id="SuggestBtn" disabled ="disabled"/>


<div id="suggestionsContainer">

</div>

    $('#SuggestBtn').click(function() {

        var intervals = scheduler.GetSelectedInterval();
        //var $hiddenInput = jQuery('input:hidden', jQuery(this));
        //$hiddenInput.val(intervals.ToString());

        var chk = $('#chbxPADC').is(':checked');
        var chk1 = $('#chbxPADP').is(':checked');
        var chk2 = $('#chbxPremPADC').is(':checked');
        var chk3 = $('#chbxPremPADP').is(':checked');
        var chk4 = $('#chbxOther').is(':checked');
        var chkMan = $('#Homme').is(':checked');
        var chkWoman = $('#Femme').is(':checked');
        var NbPADC = $('#NbPADC').val();
        var NbPADP = $('#NbPADP').val();

        var isFemale = true;
        if (chkMan == true)
            isFemale = false;


        PADP = chk1;
        PADC = chk;
        PremedicationPADC = chk2;
        PremedicationPADP = chk3;
        autre = chk4;



        $.get('/Home/GetSuggestions', { PADP: PADP, PADC: PADC, isFemale : isFemale, PremedicationPADP: PremedicationPADP, PremedicationPADC: PremedicationPADC, NbPADC: NbPADC, NbPADP: NbPADP, autre: autre, intervals: intervals.ToString() }).success(function (html) {
            $('#suggestionsContainer').html(html);
        });
    });

I've read this StackOverflow Q&A but as you can see I'm not using the @Ajax.ActionLink.

Any idea of what to do here?

James S · Answer 1 · 2014-07-04T13:15:38.700

Assuming all your controls are in a form with an ID of myForm You could do something like

$('#SuggestBtn').click(function() {
   //maybe check if form is valid first... eg if ($('#myForm').validate().form()){...
   //start client side spin/progress bar
   $.ajax(
     type: "POST",
     url: "/Controller/Method",
     data: $('#myForm').serialize(),
     success: function (response){
        $('#suggestionsContainer').html(response);
        //end client side spin/progress bar
     }
   )
}

We are using the jQuery ajax function to request the partial view. (the url parameter should be set to your action method that returns the partial view) The form data that is posted to your partial view is gotten from $('#myForm').serialize(). You should note that no unobstrusive validation will be performed client side here unless you explicitly do so here.

Once it comes back from the server the success function gets invoked (assuming its a status 200 http response) which in this example replaces the contents of the suggestionsContainer with the returned HTML.

Thank you, but I still have a question : when you say 'start client side spin', what should I actually do? — Traffy, Jul 04 '14 at 13:18
Not sure what spinner you intend to use. The jQueryUI spinner is [this](http://jqueryui.com/spinner/) - which I don't think you mean. I suspect you'd rather show something like [this - a indeterminate progress bar](http://jqueryui.com/progressbar/#indeterminate). In which case just have it on your page somewhere and use `$('#myProgBar').show();` or `.hide();` — James S, Jul 04 '14 at 13:23

ASP.NET MVC - Ajax Spinner while loading a Partial view

1 Answers1