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

【问题标题】：BlockUI on button click with spinner使用微调器单击按钮时的 BlockUI
【发布时间】：2019-04-15 06:49:49
【问题描述】：

我拥有为我呈现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 func 将呈现我的 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 进行很多更改？

【问题讨论】：

请查看此链接 (stackoverflow.com/questions/68485/…)

标签： javascript jquery html asp.net-mvc

【解决方案1】：

替换为以下代码。该函数是一个回调函数，当对服务器的请求完成时执行。

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

回调函数可以有以下与响应相关的附加参数。

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

【讨论】：

【解决方案2】：

为什么不在你的点击函数中放置一个 ajax 调用？

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

【讨论】：