javascript - 使用微调器单击按钮上的 BlockUI

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，直到我没有渲染出现在div id="Result"中的PartialView。如何阻止按钮点击时的 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.
}