如何在加载数据时在 MVC 中显示微调器答案

【问题标题】：How to show spinner in MVC while loading data如何在加载数据时在 MVC 中显示微调器
【发布时间】：2018-05-03 04:04:47
【问题描述】：

我的操作很长，它从我的 Active Directory 中检索数据，然后在 MVC 视图中将这些数据显示为表格。除了需要 20 秒来呈现数据之外，所有工作都有效。我有疑问如何避免 UI 阻塞并在数据加载时显示微调器。

【问题讨论】：

【解决方案1】：

您可以显示加载图形，然后进行 ajax 调用以获取数据，当您收到来自异步 ajax 调用的响应时，将其显示给用户并隐藏（或替换）加载图像。

<div id="userTable">
  <p>Loading...</p>
  <img src="~/Content/images/loadingimage.png" alt="Please wait" />
</div>

并在文档就绪事件中进行 ajax 调用以获取您想要的数据。您可以使用 jquery load() 方法。

$(function(){
   $("#userTable").load("@Url.Action("UserList","Users")");
});

假设UsersController 中的UserList() 操作方法将返回带有用户列表表格数据标记的部分视图。

public ActionResult UserList()
{
   var useViewModelList = new List<YourUserViewModel>();
   useViewModelList.Add(new YourUserViewModel { Name="Scott" });
   return PartialView(useViewModelList);
}

在您的部分视图中 (~/Views/Shared/UserList.cshtml)，

@model List<YourUserViewModel>
<table>
  <tr><th>Name</th></tr>
  @foreach(var item in Model)
  {
    <tr><td>@item.Name</td></tr>
  }
</table>

【讨论】：