[英]How do I show a loading spinner when submitting for a partial view in asp.net MVC?
我編寫了一個應用程序，當您單擊“繼續”時會加載部分視圖。 有時服務器會掛起一點，所以我想在用戶單擊提交時顯示某種加載消息或微調器，以便他們知道頁面正在執行某些操作。
這只是您的標准表單，但我的提交代碼如下所示（包含一個字段，因此您可以查看示例）：
<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>
控制器中的延遲正在工作。
這是完整的解決方案 -
假設你有一個像這樣的 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 秒的延遲，它將顯示部分視圖 -
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 文件 -
當我們單擊提交按鈕時，它將以下列方式顯示進度 -
一旦在服務器端完成 5 秒的延遲，它將顯示部分視圖 -
當我從 ASP.NET MVC 中的 controller 返回數據時如何調用模態
[英]How to call a modal when I return data a partial view from the controller in ASP.NET MVC
如果Controller失敗，如何在View中顯示錯誤？ ASP.NET MVC
[英]How to show error in View if the Controller fails ? ASP.NET MVC
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.