Question

在我的ASP.NET MVC 5网站中，我有一个带有多个itens的devexpress导航栏，每个项目都有一个唯一的控制器，总是当我点击一个项目时，会调用相应控制器的Index操作。

public ActionResult Index()
{
  //Load large data and return it into a gridview.
}

虽然我正在加载这些数据我想显示一个加载面板，但我不知道我可以在mvc中使用它，在aspnet webforms中更容易做到这样的事情。

任何MVC专家都可以帮我解决这个问题吗？

Answer 1

在您的视图中，您希望使用 Ajax表单，并指向其中LoadingElementId的定义。这是一个例子：

@using (Ajax.BeginForm("FilterNews", "News", null,
new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "container", LoadingElementId = "custom-loading" }))
{
<div id='container'>
    //Your helpers @Html.TextBoxFor(x => x.....) or render a partial 
</div>
}
<style>
.loading{
 position:absolute;
 width:100%,
 height:100%,
 top:0,
 left:0,
 background:white,
 }
</style>
<div id="custom-loading" class="loading">Loading..Please wait...</div>

此外，如果您想为每个XHR呼叫显示一个Loader，您可以在ajaxSend事件上设置一个活页夹，如下所示：

<div id="ajax-loader-element">
    <img src="@Url.Content("~/Content/Images/ajax-loader.gif")"/>
</div>

<script type="text/javascript">
    jQuery(document).ready(function() {
       jQuery(document).bind("ajaxSend", function () {
           jQuery('#ajax-loader-element').show();
       }).bind("ajaxComplete", function() {
           jQuery('#ajax-loader-element').hide();
       });
    });
</script>

在ASPNET MVC的索引操作上显示加载面板

1 个答案: