如何显示加载微调提交在asp.net MVC局部视图的时候？ [英] How do I show a loading spinner when submitting for a partial view in asp.net MVC?
问题描述
我已经写了，当你点击继续加载局部视图的应用程序。有时服务器挂起一点，所以我想表现出某种加载消息或微调的，当用户点击提交，让他们知道在页面做一些事情。
I've written an application that loads partial views when you click "Continue". Sometimes the server hangs a little so I'd like to show some sort of loading message or spinner when the user clicks submit so they know the page is doing something.
这只是你的标准形式，但我提交code看起来像这样（包括了外地，所以你可以看到一个例子）：
This is just your standard form but my submit code looks like this(included a field so you can see an example):
<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的不会是一个坏的方法，如果任何人有这样一个例子来使用。
I've looked around on google for ways to do this and so far haven't had any luck. Jquery wouldn't be a bad method to use if anyone has an example of that.
更新：
这是我目前的code，它是行不通的。
This is my current code that is not working.
<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>
在控制器的延迟是工作
The delay in the controller is working.
推荐答案
下面那张完整的解决方案 -
Here goes the complete solution -
假设你有一个Ajax控制器这样的 -
Lets say you have an ajax controller like this -
public ActionResult Ajax()
{
return View();
}
这符合以下阿贾克斯视图 -
Which serves the following ajax view -
@{
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秒（长时间运行的任务模拟）的服务于局部视图的延迟 -
Then when you click on the submit button it will hit the following controller, which has a delay of 5 secs (simulation of long running task) in serving the partial view -
public ActionResult LoadRules(DDLModel model)
{
System.Threading.Thread.Sleep(5000);
return PartialView("MyPartial");
}
和局部视图是一个简单的观点 -
and the partial view is a simple view -
<div>
This is Partial View
</div>
下面显示加载我只是用下面的gif文件 -
Here to show the loaded I simply used the following gif file -
当我们点击提交按钮，它会显示在下面的方法的进展 -
when we click on the submit button it will show the progress in the following way -
和一次5秒的延迟在服务器端完成，它会显示在局部视图 -
And once the delay of 5 secs completes on the server side, it will show the partial view -
这篇关于如何显示加载微调提交在asp.net MVC局部视图的时候？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
