Question

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

在类似的说明中，当部分视图正在加载（或刷新）时，如何在视图区域上显示某种“加载”屏幕，以便用户知道发生了什么事情？

由于

Answer 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);
              }
          });

Answer 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（）作为触发器，以允许在加载部分视图时呈现页面。

Answer 3

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

在主视图后加载局部视图

3 个答案: