Question

我目前正在尝试在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的代码将不起作用。

Answer 1

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

以下是一个例子：

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

function onBegin() {
    //show loading image
}

function onComplete() {
    //hide loading image
}

Answer 2

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

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

2 个答案: