Question

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

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

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

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

Answer 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文件 -

enter image description here

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

enter image description here

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

enter image description here

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

1 个答案: