如何在提交ASP.NET MVC的部分视图时显示加载图标？

Question

如何在提交ASP.NET MVC的部分视图时显示加载图标？

javascriptjqueryasp.netasp.net-mvc

11

我写了一个应用程序，当你点击“继续”时加载部分视图。有时服务器会稍微卡一下，因此我想在用户点击提交时显示某种加载消息或旋转器，以便他们知道页面正在做某些事情。

这只是标准表单，但我的提交代码看起来像这样（包括一个字段，以便您可以看到示例）：

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

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

- TheDizzle

1

可能是如何在ajax请求期间显示处理动画/旋转器？的重复问题。 - Jeremy J Starcher

我链接到了一个类似的问题。服务器端的东西并不重要，jQuery代码是一样的。 - Jeremy J Starcher

2个回答

0

答案由ramiramilu提供，非常接近，但我们的团队无法将Ajax集成到我们的MVC 5 Web应用程序中。还有其他问题。因此，我将使用一些小的错误修复（或者更多地）来复制他的答案。

这里是完整的解决方案-

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

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

这个是用于以下 Ajax 视图的服务 -

            @{
            ViewBag.Title = "Ajax";
        }
        
        <h2>Ajax</h2>
        
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js" integrity="sha512-YHQNqPhxuCY2ddskIbDlZfwY6Vx3L3w9WRbyJCY81xpqLmrM6rL2+LocBgeVHwGY9SXYfQWJ+lcEWx1fKS2s8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/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>
        
    <form asp-action="LoadRules" asp-controller="Home" method="POST" data-ajax="true" data-ajax-update="#Rules" data-ajax-begin="onBegin" data-ajax-complete="onComplete">
        <input type="submit" value="Load Rules" />
    </form>
        
        <div id="divLoading"></div>
        
        <div id="Rules"></div>

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

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

而且部分视图是一个简单的视图 -

<div>
    This is Partial View
</div>

这里展示加载后，我只是简单地使用了以下GIF文件 -

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

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

- pianocomposer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ramiramilu · Accepted Answer

以下是完整解决方案：

假设你有一个这样的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秒延迟完成，它将显示部分视图 -

输入图像描述