在主视图之后加载部分视图答案

【问题标题】：Load partial view after main view在主视图之后加载部分视图
【发布时间】：2014-11-27 18:57:10
【问题描述】：

我有几个部分视图已添加到我的 MVC 站点上的主视图中。但是，其中一个部分视图需要很长时间才能加载，因为它可能需要一段时间才能为其检索数据。是否可以加载主视图并开始加载部分视图，但如果视图仍在加载，则同时显示其余部分，最后一个在完成后显示？

类似地，当部分视图正在加载（或刷新）时，我如何才能在视图区域上显示某种“正在加载”屏幕，以便用户知道正在发生某些事情？

谢谢

【问题讨论】：

您必须更改较慢的部分，以便它们在后台通过 Ajax 调用获取数据，这样您就可以在页面的其余部分已经存在时显示“加载”图标。
不确定您正在使用的 javascript 库，但这可以通过使用 Angular 及其 ng-show 指令轻松实现。

标签： c# asp.net-mvc asp.net-mvc-4

【解决方案1】：

试试下面的代码

$.ajax(
          {
              url: '/Controller/Action',
              data: { Id: '1' }, //input parameters to action
              beforeSend: function () {
                  $('#div-result').show();
                  var img = '<img src="../../Images/loading.ico" />';
                  $('#div-result').html(img);
              },
              success: function (data) {

                  // $('#div-result') -> div in the main view

                  $('#div-result').html(data);
              }
          });

【讨论】：

非常感谢，我已经实现了一段与此类似的代码，它的工作原理是一种享受

【解决方案2】：

正如 Alexey 所说，只需在需要部分视图的地方添加内容元素

<div id="partialViewHolder" style="display:none">Ajax content goes here after initial page loads, but it is hidden until then</div>

然后在您的 javascript 中，添加类似的内容（假设您已经将 jquery 加载到 DOM 中）：

<script type="text/javascript">
$(window).load(function () {
   $( "#partialViewHolder" ).load( "@Url.Content("Your PartialView Controller Method Goes Here")" );
   $( "#partialViewHolder" ).show();
}
</script>

请注意，您需要使用 $(window).load() 而不是 $(document).ready() 作为触发器，以允许页面在部分视图加载时呈现。

【讨论】：

【解决方案3】：

据我了解，您希望部分视图异步。您可以使用 Ajax 绘制局部视图，例如，在 ajax 请求完成后，使用 jQuery ajax 从服务器获取数据并绘制它。所以你的主视图会加载得更快。

【讨论】：