ASP.NET MVC - 加载部分视图时的 Ajax Spinner

Question

我正在使用 ASP.NET MVC，并且正在尝试使用 Ajax Spinner。当用户提交定义的按钮时，应该显示一个 ajax 微调器，同时构建和显示我的部分视图。这就是我正在做的事情。

这是我的按钮和链接到该按钮的 jQuery 代码。 SuggestionsContainer 表示将呈现部分视图的容器：

<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);
        });
    });

我已阅读 this StackOverflow Q&A，但正如您所见，我没有使用 @Ajax.ActionLink。

知道在这里做什么吗？

Answer 1

假设您的所有控件都在一个 ID 为 myForm 的表单中 你可以做类似的事情

$('#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
     }
   )
}

我们正在使用 jQuery ajax 函数来请求局部视图。 （url 参数应设置为返回局部视图的操作方法） 发布到局部视图的表单数据来自$('#myForm').serialize()。您应该注意，除非您在此处明确执行此操作，否则此处不会在客户端执行不显眼的验证。

一旦从服务器返回，success 函数就会被调用（假设它的状态为 200 http 响应），在本例中，它会用返回的 HTML 替换SuggestionsContainer 的内容。