ASP.NET MVC-加载局部视图时的Ajax微调器

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?

Answer 1

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.