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

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

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

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

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

更新：

这是我目前无效的代码。 

        $('#continue').submit(function () { $('#LoanType').hide(); });   function onBegin() { $("#divLoading").html(''); } function onComplete() { $("#divLoading").html(""); }  

    
 
To continue using this application please enable Javascript in your browser.
 
   
 
 
 
 
 
Loan Type
 
 @using (Ajax.BeginForm("SelectLoanType", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "step2" })) { 
 @Html.LabelFor(m => m.LoanType, new { @class = "col-sm-2 control-label" }) 
 
 @Html.DropDownListFor(m => m.LoanType, new SelectList(Model.AllAvailableLoanTypes.Select(x => new { Value = x, Text = x }), "Value", "Text"), new { @class = "form-control", id = "loanType" }) 
 
 
 
 
 
  
 
 
 }

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

这是完整的解决方案 –

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

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

其中提供以下ajax视图 – 

 @{ ViewBag.Title = "Ajax"; } 
Ajax
    @using (Ajax.BeginForm("LoadRules", "Home", new AjaxOptions { UpdateTargetId = "Rules", OnBegin = "onBegin", OnComplete = "onComplete" })) {  }

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

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

部分视图是一个简单的视图 – 

 
 This is Partial View

这里显示加载我只是使用下面的gif文件 –

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述

Interesting Posts

Internet Explorer 8中的ScriptManager.RegisterClientScriptBlock和jQuery问题

ASP.NET MVC 4 – 客户端validation不起作用

Ajax调用状态无法加载资源。 简单的asp.net联系人类

回发后我的jQuery代码无法正常工作

ASMX相当于RegisterAsyncTask

将jQuery的结果用于C＃

如何创建jQuery Datatable Drill-down行？

使用jQuery的CORS请求 – $ .ajax（）

单击jQuery对话框按钮事件中的ASP.NET按钮

必需的字段validation器不适用于JQuery选择的下拉列表