在 asp.net MVC 中提交部分视图时如何显示加载微调器？答案

【问题标题】：How do I show a loading spinner when submitting for a partial view in asp.net MVC?在 asp.net MVC 中提交部分视图时如何显示加载微调器？
【发布时间】：2014-06-20 13:44:58
【问题描述】：

我编写了一个应用程序，当您单击“继续”时会加载部分视图。有时服务器会挂起一点，所以我想在用户单击提交时显示某种加载消息或微调器，以便他们知道页面正在执行某些操作。

这只是您的标准表单，但我的提交代码如下所示（包含一个字段，以便您查看示例）：

                    <div class="form-group">
                    @Html.LabelFor(m => m.JointAdditionalIncomeSource, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-10">
                        <div class="col-sm-4">
                            @Html.TextBoxFor(m => m.JointAdditionalIncomeSource, new { @class = "form-control", placeholder = "Additional Income Source" })
                            @Html.ValidationMessageFor(m => m.JointAdditionalIncomeSource)
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-3 col-sm-10">
                <div class="col-sm-4">
                    <input type="submit" value="Back" id="back" class="btn btn-default" />
                    <input type="submit" value="Continue" id="continue" class="btn btn-default" />
                </div>
            </div>
        </div>

我已经在谷歌上四处寻找方法来做到这一点，但到目前为止还没有任何运气。如果有人有这样的例子，Jquery 不会是一个糟糕的方法。

更新：

这是我当前不工作的代码。

<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>


<script>
    $('#continue').submit(function () {
        $('#LoanType').hide();
    });
</script>
<script type="text/javascript">
    function onBegin() {
        $("#divLoading").html('<image src="../Content/ajax-loader.gif" alt="Loading, please wait" />');
    }
    function onComplete() {
        $("#divLoading").html("");
    }
</script>

<body>
    <!--If user has javascript disabled-->
    <noscript>
        <div style="position: fixed; top: 0px; left: 0px; z-index: 3000;
                                  height: 100%; width: 100%; background-color: #FFFFFF">
            <p style="margin-left: 10px">To continue using this application please enable Javascript in your browser.</p>
        </div>
    </noscript>

    <!-- WIZARD -->
    <div id="MyWizard" class="site-padding-top container">


        <div data-target="#step1" id="step1" class="app-bg">

            <div class="form-horizontal">
                <div id="LoanType">
                    <div class="divider-app">
                        <p>Loan Type</p>

                    </div>
                    @using (Ajax.BeginForm("SelectLoanType", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "step2" }))
                    {
                        <div class="form-group">
                            @Html.LabelFor(m => m.LoanType, new { @class = "col-sm-2 control-label" })
                            <div class="col-sm-10">
                                <div class="col-sm-4">
                                    @Html.DropDownListFor(m => m.LoanType, new SelectList(Model.AllAvailableLoanTypes.Select(x => new { Value = x, Text = x }), "Value", "Text"), new { @class = "form-control", id = "loanType" })
                                </div>
                            </div>
                        </div>

                        <div class="form-group" id="LoanTypeSubmit">
                            <div class="col-lg-offset-3 col-sm-10">
                                <div class="col-sm-4">

                                    <input type="submit" value="Continue" id="continue" class="btn btn-default" />
                                </div>
                            </div>
                        </div>

                    }
                    <div id="divLoading"></div>
                </div>

控制器中的延迟正在起作用。

【问题讨论】：

How to show processing animation / spinner during ajax request? 的可能重复项
我链接到了一个类似的问题。服务端的东西无所谓，jQuery代码都是一样的。

标签： javascript jquery asp.net asp.net-mvc

【解决方案1】：

这里是完整的解决方案 -

假设你有一个这样的 ajax 控制器 -

    public ActionResult Ajax()
    {
        return View();
    }

服务于以下 ajax 视图 -

@{
    ViewBag.Title = "Ajax";
}

<h2>Ajax</h2>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
    function onBegin() {
        $("#divLoading").html('<image src="../Content/ajax-loader.gif" alt="Loading, please wait" />');
    }
    function onComplete() {
        $("#divLoading").html("");
    }
</script>

@using (Ajax.BeginForm("LoadRules", "Home", new AjaxOptions { UpdateTargetId = "Rules", OnBegin = "onBegin", OnComplete = "onComplete" }))
{
    <input type="submit" value="Load Rules" />
}

<div id="divLoading"></div>

<div id="Rules"></div>

然后，当您单击提交按钮时，它将点击以下控制器，该控制器在为局部视图提供服务时有 5 秒的延迟（模拟长时间运行的任务） -

    public ActionResult LoadRules(DDLModel model)
    {
        System.Threading.Thread.Sleep(5000);
        return PartialView("MyPartial");
    }

而局部视图是一个简单的视图 -

<div>
    This is Partial View
</div>

这里为了展示加载我只是简单的使用了下面的gif文件——

当我们点击提交按钮时，它将以下列方式显示进度 -

并且一旦在服务器端完成 5 秒的延迟，它将显示部分视图 -

【讨论】：

我不明白提交控件如何显示 .gif。我已经把代码放进去，当我点击提交时它似乎没有加载任何东西。我已经更新了我原来的帖子。
@TheDizzle，您没有在 AjaxOptions 中包含 OnBegin 和 OnComplete 事件处理程序。我也不确定谁给了我反对票，但我不知道为什么。它对我有用，原始海报应该完全按照我的叙述方式进行，但他错过了 AjaxOptions 中的重要一步。