ASP MVC 4 preloader while loading data in partial view

Question

I am currently trying to make a preloader in partial view in ASP MVC 4.

I have a main view and a partial view. I am currently loading data inside the webgrid of the partial view. There is a button inside the partial view "Export Data" which is a submit button. After clicking it, it will go to the controller where the codes for exporting webgrid to excel will run. It takes too long to load when the data is big, so I need to show a "Please wait.. the data is being extracted.." or a spinning loader to show that the page is loading.

Here is my code

Controller

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

This is for the partial view

    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
    )

This is the code for the main view

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

I've tried using json to catch the buttonclick, then call the function in controller, then just use .addClass("hidden") and .removeClass("hidden"), but the codes for exporting excel won't work.

score 0 · Answer 1 · answered Aug 10 '15 at 15:36

0

Use @Ajax.ActionLink instead. You can then use OnBegin and OnComplete on AjaxOptions to determine the export is complete.

Here is an example :

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

function onBegin() {
    //show loading image
}

function onComplete() {
    //hide loading image
}

answered Aug 10 '15 at 15:36

Zaki

5,540
7
54
91

The codes work correctly but the codes for exporting excel won't work when applying this.. any suggestions how to fix this..? – Jerry Joe Desamito Aug 11 '15 at 07:26
do you get any errors? If you put a break point does it hit the method? – Zaki Aug 11 '15 at 08:05
yes, the codes are running but it doesn't generate anything, compared to the normal button where the export to excel is working. There are no errors as of now, I don't why the code for exporting excel is not working correctly when using this though I think It should be.. – Jerry Joe Desamito Aug 11 '15 at 08:44
do you see any data on var data = db.Query(TempData["export"].ToString());? – Zaki Aug 11 '15 at 11:31
yes, the data is still present, also after clicking the button, it will not enter the controller again in the next consecutive clicks.. but the switch onBegin and onComplete is still working.. – Jerry Joe Desamito Aug 11 '15 at 16:04
just created a dummy project and it works fine for me every time I click the ajax link it exports to excel. – Zaki Aug 12 '15 at 08:12
did you used the ajax link in a partial view..? can you send me the dummy project that you have made..? – Jerry Joe Desamito Aug 12 '15 at 09:28

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

Include the JqueryUnobtrusive which will act as you want (by using @Ajax.ActionLink and configure the AjaxOptions in a desired manner), say, making a call to controller method and shows a loader until getting the response.

edited May 23 '17 at 12:24

Community

1
1

answered Aug 10 '15 at 16:13

Amirhossein Mehrvarzi

18,024
7
45
70

ASP MVC 4 preloader while loading data in partial view

2 Answers2