在部分视图中加载数据时 ASP MVC 4 预加载器答案

【问题标题】：ASP MVC 4 preloader while loading data in partial view在部分视图中加载数据时 ASP MVC 4 预加载器
【发布时间】：2015-11-02 14:11:58
【问题描述】：

我目前正在尝试在 ASP MVC 4 的部分视图中制作预加载器。

我有一个主视图和一个局部视图。我目前正在部分视图的 webgrid 中加载数据。局部视图“导出数据”中有一个按钮，它是一个提交按钮。单击它后，它将转到运行将 webgrid 导出到 excel 的代码的控制器。 数据量大时加载时间过长，所以我需要显示“请稍候..正在提取数据..”或旋转加载器以显示页面正在加载。

这是我的代码

控制器

    public void GetExcel()
    {
        var db = Database.Open("DBConnection");
        var data = db.Query(TempData["export"].ToString());
        ViewBag.Query = data;

        WebGrid wd = new WebGrid(ViewBag.Query, canPage: false, rowsPerPage: 100, canSort: false);
        Response.ClearContent();
        Response.AddHeader("content-disposition", "attachment; filename=" + TempData["reportName"] + ".xls");
        Response.ContentType = "application/octet-stream";
        Response.Write(wd.GetHtml(tableStyle: "border: 1px solid #a59f9f;"));
        Response.End();
    }

这是局部视图

    if (Model.results == null){
        @Html.ActionLink("Export Data", "GetExcel", null, new { @class="btn btn-danger btn-sm", @disabled="disabled" }) 
    }
    else
    {
        @Html.ActionLink("Export Data", "GetExcel", null, new { @class="btn btn-danger btn-sm" }) 
    }
    <div class="spacerQuery"></div>
    var grid = new WebGrid(Model.results, canPage: true, rowsPerPage: 20, canSort: true, ajaxUpdateContainerId: "grid2", ajaxUpdateCallback: "callBack");
    @grid.GetHtml(
    htmlAttributes: new { id = "grid2" }
    , tableStyle: "table table-bordered table-condensed small"
    , headerStyle:"",
    rowStyle: "val", 
    alternatingRowStyle: "total",
     fillEmptyRows: true
    )

这是主视图的代码

    <div id="grid"> 
                    @Html.Partial("_result", Model.results)
                </div>

我试过用json来捕捉buttonclick，然后调用控制器中的函数，然后使用.addClass("hidden")和.removeClass("hidden")，但是导出excel的代码不起作用。

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-4 loading webgrid

【解决方案1】：

请改用@Ajax.ActionLink。然后您可以在AjaxOptions 上使用OnBegin 和OnComplete 来确定导出是否完成。

这是一个例子：

@Ajax.ActionLink("Export Data", "GetExcel", "Controller", new AjaxOptions { 
    OnBegin = "onBegin",
    OnComplete = "onComplete"
});

function onBegin() {
    //show loading image
}

function onComplete() {
    //hide loading image
}

【讨论】：

代码工作正常，但导出excel的代码在应用这个时不起作用..任何建议如何解决这个..？
您有任何错误吗？如果你放一个断点，它会命中方法吗？
是的，与导出到 excel 的正常按钮相比，代码正在运行，但它不会生成任何东西。到目前为止没有错误，我不明白为什么导出 excel 的代码在使用它时不能正常工作，虽然我认为它应该是..
你在 var data = db.Query(TempData["export"].ToString()); 上看到任何数据了吗？
是的，数据还在，同样点击按钮后，在接下来的连续点击中不会再次进入控制器..但onBegin和onComplete的开关仍然有效..

【解决方案2】：

包括JqueryUnobtrusive，它将按照您的意愿行事（通过以所需的方式使用@Ajax.ActionLink和configureAjaxOptions），例如，调用控制器方法并显示加载程序直到获得响应.

【讨论】：