ASP.. NET MVC -加载分部视图时的Ajax旋转器

本文关键字:Ajax 旋转 视图 MVC NET 加载 ASP | 更新日期: 2023-09-27 18:11:39

我正在使用ASP。. NET MVC和我试图使用Ajax旋转器。当用户提交一个已定义的按钮时,在构建和显示我的局部视图时,应该显示一个ajax旋转器。这就是我正在做的。

这是我的按钮和jQuery代码链接到这个按钮。建议容器表示将呈现局部视图的容器:

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

我已经读过这个StackOverflow Q&A,但你可以看到我没有使用@Ajax.ActionLink。

知道该怎么做了吗?

ASP.. NET MVC -加载分部视图时的Ajax旋转器

假设所有控件都在一个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替换建议容器的内容。