Question

我有一个为我呈现PartialView的表单（单击按钮时）。一切正常：

        <div class="form-group">
            @Html.LabelFor(m => m.Code, new { id = "Code", @class = "col-md2 control-label" })
            <div class="col-md-12">
                @Html.TextAreaFor(m => m.Code, new { @class = "form-control", @cols = 100, @rows = 20 })
                @Html.ValidationMessageFor(m => m.Code, null, new { @class = "text-danger" })
            </div>
        </div>          
        <div class="form-group">
            <div class="col-md-offset-0 col-md-10">
                <br />
                <input id="submit" type="button" class="btn btn-default" value="Submit" />
            </div>
            <br /><br />
            <div class="result" id="Result">
            </div>
        </div>

@section Scripts {
<script>
    $(document).ready(function () {
        $("#submit").click(function () {
            var url = "@Url.Action("Controller", "Home")"
            var code = $("#Code").val();
            $("#Result").load(url, { code: code });
        });
    });
</script>

我想做的是在按钮单击块ui上，直到我没有呈现出现在PartialView中的div id="Result"。如何在按钮上单击时阻止UI，直到脚本上的load函数将呈现我的PartialView并显示spinner或进度条，直到完成为止？该脚本无法工作：

<script>
    $(document).ready(function () {
        $("#submit").click(function () { 
            $.blockUI();
            var url = "@Url.Action("Controller", "Home")"
            var code = $("#Code").val();
            $("#Result").load(url, { code: code });
            $.unblockUI();
        });
    });
</script>

我不想使用Ajax.BeginForm，因为上面的cshtml可以正常工作。如果我使用Ajax，我需要对html进行很多更改吗？

Answer 1

用下面的代码替换。该函数是在对服务器的请求完成时执行的回调函数。

$("#Result").load(url, { code: code }, function(){
            $.unblockUI();
});

回调函数可以在下面具有与响应相关的其他参数。

function(String responseText, String textStatus, jqXHR jqXHR)
{
   //  Code to be executed after server response.
}

Answer 2

为什么不将ajax调用放入您的click函数中？

JS

<script>
        $(document).ready(function () {
            $("#submit").click(function () { 
                   $.ajax({
                    url: "/Controller/action/", //to get the partial view
                    beforeSend: function() {
                    },
                    complete: function() {
                        alert("ajax complete event")

                    }
            });
        });
</script>

然后阻止UI并在ajax启动/停止请求上添加加载gif吗？

var $loading = $('#loadingDiv').hide(); //add your spinner via css
$(document)
  .ajaxStart(function () {
    $loading.show();
    $.blockUI(); 
  })
  .ajaxStop(function () {
    $loading.hide();
    $.unblockUI(); 
  });

CSS

 .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba( 255, 255, 255, .8 ) 50% 50% no-repeat;
        background-image: url('../../Content/ajax-loader.gif');
    }

    /* When the body has the loading class, we turn
    the scrollbar off with overflow:hidden */
    body.loading .modal {
        overflow: hidden;
    }

    /* Anytime the body has the loading class, our
    modal element will be visible */
    body.loading .modal {
        display: block;
    }

使用微调器单击按钮时的BlockUI

2 个答案: