索引操作 MVC 的预加载器答案

【问题标题】：Pre loader for index action MVC索引操作 MVC 的预加载器
【发布时间】：2014-06-26 15:41:54
【问题描述】：

我正在尝试为页面做一个预加载器索引动作控制器：

myapp/FR/索引

public ActionResult Index(){
return View(db.SP_GetRegistrosFRByID(0).ToList());}

视图，没有开始表单，因为是获取请求：

@foreach (var item in Model)
            {
                ...etc...<tr>

                    <td>
                        @Html.DisplayFor(modelItem => item.CodIden)
                    </td>


                    <td>
                        @Html.DisplayFor(modelItem => item.Nombres)
                    </td> ...etc

【问题讨论】：

什么不起作用？ “预加载器”是什么意思？不清楚你在问什么。
是的 get 请求的预加载器
说“预加载器”并不能真正回答“什么是预加载器”的问题？请说明您实际尝试做什么以及它是如何不起作用的。
我有一个由控制器呈现的视图...在视图内部我有一个表我想要的是在它被填充之前有一个加载模式
这对于 Stack Overflow 问题来说非常广泛且开放。例如，您可以使用“正在加载...” div 呈现表格，然后通过 AJAX 填充实际的表格行。（DataTables 之类的插件使这变得非常容易。）或者，您可以在对局部视图进行 AJAX 调用以获取表格的同时加载具有结构内容和“正在加载...” div 的页面。您可以采用多种方法，其中任何一种都将涉及一些 AJAX，以便在获取其余数据之前呈现页面。

标签： asp.net-mvc razor visual-studio-2013

【解决方案1】：

正如大卫所说，这是一个广泛且开放式的问题，您可以采用多种方法。您还没有详细说明如何调用index（表单提交、按钮单击..）

首先，您需要一个div，并在需要显示预加载器的视图中显示加载器图像。

<div id="loader" class="loader">
         Working.. &nbsp;<img src="~/Images/loading_small.gif" />
</div>

现在 JS 函数根据您的数据加载状态显示/隐藏带有加载器图像的div。

function pageLoading(status) {
   if (status == 'true') {
       $("#loader").css('display', 'block');
   }
   else {
       $("#loader").css('display', 'none');
   }
}

在发出 AJAX 请求之前，您可以调用 pageLoading("true"); 开始显示图像，最后在填充表格数据时调用 pageLoading("false"); 以隐藏加载图像。类似的东西

$.ajax({
      url: 'your index method url',
      success: function (partial) {
        $('#results').html(partial);
        pageLoading("false");
      }
      error: function () {
        pageLoading("false");
      }
});

【讨论】：