Grid mvc export to excel

I might be late to the party here but I have found a solution that will work using the inbuilt filtering options of the GridMvc plugin. This solution DOES not require any client side manipulations or custom filter applying. This is how you go about it.

When you install the plugin, it generates a partial view called: _Grid.cshtml which is found at: ~/Views/Shared/_Grid.cshtml location.

Now I had observed that everytime you invoke an event on the grid, this partial view is called and I then debugged into the flow and found that the Model in question has different properties like RenderOptions, ItemsToDisplay etc.

So I found that the filtered data is also stored but not directly in a property. There is a property called: ItemsToDisplay but unfortunately if you apply paging on the grid then it will only store the first n items where n is the paging limit.

Then finally I had to resort to reflection to get the entire filtered list which impacts the performance of the grid but not very much and it will get the job done.

_Grid.cshtml:

@using GridMvc.Columns
@using System.Reflection;
@model GridMvc.IGrid
@{ 
    try
    {
        Type t = typeof(GridMvc.Html.GridHtmlOptions<MyModel>);
        FieldInfo[] fi = t.GetFields(BindingFlags.Public | BindingFlags.Instance | BindingFlags.NonPublic);
        foreach (FieldInfo info in fi)
        {
            if (info.Name == "_source")
            {
                object _source = info.GetValue(Model);
                PropertyInfo gridItemsProperty = _source.GetType().GetProperty("GridItems");
                object gridItemsData = gridItemsProperty.GetValue(_source);
                //Set the filtered list here in Session
                Session["CurrentFilteredGridForExcelExport"] = (IEnumerable<MyModel>)(gridItemsData);
            }
        }
    }
    catch
    {

    }
}

@if (Model.RenderOptions.RenderRowsOnly)
{
    @RenderGridBody();
}
else
{
    <div class="grid-mvc" data-lang="@Model.Language" data-gridname="@Model.RenderOptions.GridName" data-selectable="@Model.RenderOptions.Selectable.ToString().ToLower()" data-multiplefilters="@Model.RenderOptions.AllowMultipleFilters.ToString().ToLower()">
        <div class="grid-wrap">
            <table class="table table-striped grid-table">
                @* Draw grid header *@
                <thead>
                    @RenderGridHeader()
                </thead>
                <tbody>
                    @RenderGridBody()
                    @RenderGridFooter()
                </tbody>
            </table>
            @RenderGridFooter()
        </div>
    </div>
}
@helper RenderGridBody()
{
    if (!Model.ItemsToDisplay.Any())
    {
        <tr class="grid-empty-text">
            <td colspan="@Model.Columns.Count()">
                @Model.EmptyGridText
            </td>
        </tr>
    }
    else
    {
        foreach (object item in Model.ItemsToDisplay)
        {
            <tr class="grid-row @Model.GetRowCssClasses(item)">
                @foreach (IGridColumn column in Model.Columns)
                {
                    @column.CellRenderer.Render(column, column.GetCell(item))
                }
            </tr>
        }
    }
}
@helper RenderGridHeader()
{
    if (Model.RenderOptions.ShowGridItemsCount)
    {
            <div class="grid-itemscount">
                <span class="grid-itemscount-label">@Model.RenderOptions.GridCountDisplayName:</span>
                <span class="grid-itemscount-caption">@Model.ItemsCount</span>
            </div>
    }

    <tr>
        @foreach (IGridColumn column in Model.Columns)
        {
            @column.HeaderRenderer.Render(column)
        }
    </tr>
}
@helper RenderGridFooter()
{
    <div class="grid-footer">
        @if (Model.EnablePaging && Model.Pager != null)
        {
            @Html.Partial(Model.Pager.TemplateName, Model.Pager)
        }
    </div>
}

And finallllllyy, you can export this filtered grid on your Controller side like this:

public void ExportToExcel()
{
    List<MyModel> mymodel= new List<MyModel>();
    if(Session["CurrentFilteredGridForExcelExport"] != null)
    {
        var datasetFromSession = (IEnumerable<MyModel>)(Session["CurrentFilteredGridForExcelExport"]);
        mymodel = datasetFromSession.ToList();
    }
    
    //Use your export logic with this dataset   
}

Hope this helps someone who is still using this grid plugin. Cheers!

In this article I will explain with an example, how to export WebGrid to Excel file in ASP.Net Core MVC.

The WebGrid will be populated from database using Entity Framework and then the WebGrid will be sent as HTML string to the Controller which will be exported to Excel file in ASP.Net Core MVC.

MVC6 Grid for ASP.Net Core

This article makes use of MVC6 Grid library for implementing WebGrid, as it is not available by default in .Net Core.

Database

Here I am making use of Microsoft’s Northwind Database. You can download it from here.

Namespaces

You need to import the following namespace.

Model

The Model class consists of the following four properties.

Database Context

Once the Entity Framework is configured and connected to the database table, the Database Context will look as shown below.

Controller

The Controller consists of following two Action methods.

Action method for handling GET operation

Inside this Action method, the Top 10 records are fetched from the Customers table using Entity Framework and returned to the View.

Action method for handling the Excel file Export and Download operation

This Action method is executed when the Export Button is clicked.

The HTML string sent from the View is extracted from the GridHtml parameter.

Then, the HTML string is read and converted to a Byte Array using the GetBytes method of Encoding class.

Finally, the Byte Array is exported and downloaded as Excel file using the File function.

View

Inside the View, in the very first line the Customer Model is declared as IEnumerable which specifies that it will be available as a Collection.

The ASP.Net TagHelpers, NonFactors.Mvc.Grid namespace and mvc-grid.css file is inherited inside the View.

Displaying the records

For displaying the records, MVC6 Grid is used.

The IEnumerable collection of Customer Model class object is passed to the Grid function of the MVC6 Grid HTML Helper class.

Exporting WebGrid to Excel file

Below the MVC6 WebGrid, there is an HTML Form created with following ASP.Net Tag Helpers attributes.

asp-action – Name of the Action. In this case the name is Export.

asp-controller – Name of the Controller. In this case the name is Home.

method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.

The Form consists of a Submit Button and an HTML Hidden Field element which will be used to send the MVC6 WebGrid content to the Controller’s Action method.

When the Export Button is clicked, first the HTML of the MVC6 WebGrid is extracted and set into the Hidden Field element and finally, the Form is submitted.

Screenshots

WebGrid

Exported Excel file

Downloads

Hi again everyone. In this tutorial, I am going to explain how to export Webgrid data into Microsoft Excel sheets. If you are new to Webgrid, please refer to  the links of the posts, given below, to understand the basics of Webgrid.

• Webgrid implementation in ASP.NET MVC5 application
• Implementing Custom paging in Webgrid in MVC5

1. Create Visual Studio Application in (2013 or 2015).
2. Please refe to this tutorial Webgrid implementation in ASP.NET MVC5 Application. I am using the code in this tutorial, without creating a new Application.
3. I am adding an extra code to implement exporting the data.
4. Add ActionLink, given below, in an Index View, as shown below:
   1.   
   2.  @Html.ActionLink(«Export to Excel», «PrintExcel», «Home», new { @class=«btn btn-success»})  
   3. <br/>  
5. The complete code of the View is shown below:

   Index.cshtml

   1. @model List<WebGridinMVC5.Models.UserTable>  
   2. @{  
   3.     ViewBag.Title = «www.mitechdev.com»;  
   4.     //create object for webgrid to use Webgrid helper  
   5.     var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 7);  
   6.     //pager  
   7.     grid.Pager(WebGridPagerModes.All);  
   8.  }     
   9. <h2>Fetching and displaying data from server in WebGrid</h2><br/>  
   10.   
   11.  @Html.ActionLink(«Export to Excel», «PrintExcel», «Home», new { @class=«btn btn-success»})  
   12. <br/>  
   13.   
   14. <style type=«text/css»>  
   15.     /*styles for altering rows*/  
   16.     .webgrid-row-style {  
   17.         padding: 3px 7px 2px;  
   18.     }  
   19.      .webgrid-alternating-row {  
   20.         background-color: #EAF2D3;  
   21.         padding: 3px 7px 2px;  
   22.     }  
   23. </style>  
   24.   
   25.   
   26. <div id=«webgrid»>  
   27.     @grid.GetHtml(  
   28.     //styles class for table  
   29.     //here i used bootstrap table templates  
   30.             tableStyle: «table table-responsive backcolor»,  
   31.             headerStyle:»wedgrid-header»,  
   32.             footerStyle:»webgrid-footer»,  
   33.             alternatingRowStyle:»webgrid-alternating-row»,  
   34.             rowStyle:»webgrid-row-style»,  
   35.             //binding table column to the grid  
   36.             columns:grid.Columns(  
   37.             grid.Column(header:»Serial No»,format:@<text><div>@(item.WebGrid.Rows.IndexOf(item)+1)</div></text>),  
   38.             grid.Column(columnName:»Name»,header:»Name»),  
   39.             grid.Column(header:»Email», format:@<text><a href=«mailto:@item.Email»>@item.Email</a></text>),  
   40.     grid.Column(columnName:»PhoneNumber»,header:»Phone No»),  
   41.             grid.Column(header:»Is Active», format:@<text><input type=«checkbox» checked=«@item.Status» disabled=«disabled» /></text>)  
   42.             )  
   43.     )  
   44. </div>  
6. You can get the code, shown above, from the previous post’s links also (I specified above).

Create method to Export the Data into Excel

1. Now, add a method to export the data into Microsoft Excel format. When you click ‘Export to Excel’ button in an Index view page this method (PrintExcel) gets the grid data from the Server and exports it to Excel Sheet.
2. Replace the HomeController.cs file with the code, given below:

   HomeController.cs

   1. using System;  
   2. using System.Collections.Generic;  
   3. using System.Linq;  
   4. using System.Web;  
   5. using System.Web.Mvc;  
   6. using System.Web.Helpers;  
   7. using WebGridinMVC5.Models;  
   8.   
   9. namespace WebGridinMVC5.Controllers  
   10. {  
   11.     public class HomeController : Controller  
   12.     {  
   13.           
   14.         public ActionResult Index()  
   15.         {  
   16.             List lst = new List();  
   17.             using (DatabaseEntities db = new DatabaseEntities())  
   18.             {  
   19.                 lst = db.UserTables.ToList();  
   20.             }  
   21.               
   22.             return View(lst);  
   23.           
   24.      }  
   25.           
   26.           
   27.         public void PrintExcel()  
   28.         {  
   29.             List exceldata = new List();  
   30.             using (DatabaseEntities db = new DatabaseEntities())  
   31.             {  
   32.                 exceldata = db.UserTables.ToList();  
   33.             }  
   34.               
   35.             WebGrid grid = new WebGrid(source: exceldata,canPage:false, canSort: false);  
   36.             string gridData = grid.GetHtml(  
   37.             columns: grid.Columns(  
   38.                             grid.Column(«UserID», «UserID»),  
   39.                             grid.Column(«Name», «Name»),  
   40.                             grid.Column(«Email», «Email»),  
   41.                             grid.Column(«PhoneNumber», «PhoneNumber»),  
   42.                             grid.Column(«Status», «Status»)  
   43.                             )).ToString();  
   44.                 Response.ClearContent();  
   45.               
   46.                 Response.AddHeader(«content-disposition», «attachment; filename=UserData.xls»);  
   47.               
   48.                 Response.ContentType = «application/excel»;  
   49.               
   50.                 Response.Write(gridData);  
   51.                 Response.End();  
   52.         }  
   53.  }  
   54. }  
3. Now, run the Application and see the output.

4. Now, click on «Export to Excel» and you will get the Window, as shown below:

Conclusion: I hope, this blog may be helpful for many readers.

Introduction

Background

I was recently building an ASP.NET MVC 3 based reporting application.
One of the features was to provide a downloadable Excel file for the
report that was being rendered as a grid/table. Rather than recreate an entire module to accomplish this, I wanted to find a way to reuse the data being used to render the view, with the least amount of code possible.

Using the code

I have tried to encapsulate much of the implementation in a custom ActionResult class (DownloadFileActionResult), so you can just pass data in the form of a GridView object and expect a downloadable Excel file with tabulated data.

You can download the complete code from the below link.

• Download MvcGridApp — 494.87 KB

As stated above most of the implementation is contained in the DownloadFileActionResult class.

public class DownloadFileActionResult : ActionResult
    {

        public GridView ExcelGridView { get; set; }
        public string fileName { get; set; }


        public DownloadFileActionResult(GridView gv, string pFileName)
        {
            ExcelGridView = gv;
            fileName = pFileName;
        }


        public override void ExecuteResult(ControllerContext context)
        {

           
            HttpContext curContext = HttpContext.Current;
            curContext.Response.Clear();
            curContext.Response.AddHeader("content-disposition", "attachment;filename=" + fileName);
            curContext.Response.Charset = "";
            curContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
            curContext.Response.ContentType = "application/vnd.ms-excel";

            
            StringWriter sw = new StringWriter();
            HtmlTextWriter htw = new HtmlTextWriter(sw);
            ExcelGridView.RenderControl(htw);
            
            
            byte[] byteArray = Encoding.ASCII.GetBytes(sw.ToString());
            MemoryStream s = new MemoryStream(byteArray);
            StreamReader sr = new StreamReader(s, Encoding.ASCII);

            
            curContext.Response.Write(sr.ReadToEnd());
            curContext.Response.End();

        }

    } 

Within your controller’s Action result where you bind the view with model data you will need to create a gridview, bind the model data to it and store it in a session variable.

public ActionResult Index()
       {
           ViewBag.Message = "Welcome to ASP.NET MVC!";
           CarModels cm = new CarModels();
           List<Cars> model = cm.getAllCars();

           GridView gv = new GridView();
           gv.DataSource = model;
           gv.DataBind();
           Session["Cars"] = gv;

           return View(model);
       }

In the same controller we need to create a new ActionResult called Download to handle the file download request.

public ActionResult Download()
        {
            if (Session["Cars"] != null)
            {
                return new DownloadFileActionResult((GridView)Session["Cars"], "Cars.xls");
            }
            else 
            {
               
               
            }
        }

In the view you place the following download link

@Html.ActionLink("Download File", "Download")

Points of Interest

I hope this article goes to show how you can override the default ActionResult class with a custom implementation to generate a custom response.

I am somehow not too happy about storing the results of the grid in a Session variable and will endeavor to come up with a for a better solution.

Limitation

As this is html being rendered as an Excel sheet you will not be able to make use of most of the Excel functionality. In my case, the client wanted was a downloadable version of the data so it was fine. But in case you want to create a true Excel file you could look at using XSLT to convert your html output to an Excel file.

Reference

http://www.codeshelve.com/code/details/54/export-to-excel-in-asp-net-mvc

Introduction

This article introduces how to export data to an Excel file. Most of the back-end applications have report functionality that shows the data in the grid. So, we are required to export this grid data into an Excel file. The export to Excel functionality is
implemented using the EPPlus NuGet package, as shown in this example.

Configuration and Process

We install EPPlus NuGet package in the application. The EPPlus is a library to manage Excel spreadsheets using OOXML. The OOXML stands for Office Open Extended Markup Language and is also called Open XML. The OOXML is developed by Microsoft. It has by default
target file formats for Microsoft office.

The EPPlus is a NuGet package and can be installed from Manage NuGet Packages window, as shown in figure 1. The package is available
here also.

Figure 1: Install EPPlus NuGet

When we use ORM in our application, we keep most of the data in the collection which easily converts it into a list. The list can’t be exported to the Excel directly. That’s why we need to convert this list into a data table first. After that, this data
table can be exported in the Excel file as shown in figure 2.

Figure 2: Process Export to Excel

Using the Code

As per the above process, we need four operations here. These are as follows,

1. Data: We use static data to keep this example simple.
2. List: Static data store in a List.
3. Data Table : Convert List in to DataTable.
4. Export: DataTable exports to excel file.

First of all, we create a class, so that we can have a collection of similar data. The following code snippet is for Technology class.

namespace
ExportExcel.Code 

Now, we create a static data list of Technology types in that StaticData class, as per the following code snippet.

This data will be used to export to Excel. After that, we create export to excel functionality helper class which has the following features.

1. Convert List to DataTable method
2. Customize the columns which need to export means dynamically choose columns which will be export from list to Excel.
3. Serial number in Excel sheet.
4. Add and Remove functionality for the custom heading in Excel sheet.
5. Excel sheet heading with colors.
6. Dynamic name for worksheet.

The following code snippet is used for the class ExcelExportHelper

Now, we do front-end development and create Model, View, and Controller. We create TechnologyViewModel view model that binds to the View, as per the following code snippet.

After this, we create a controller, HomeController, which has an Index action method. It returns View with Model in the browser.

Now, we create a view that shows the data in the listing and has a button linked to export to Excel functionality. The following code snippet is for the Index view.

The application runs and shows results as follows.

Figure 3: Listing for Data

Now, we write the action method to call the export to Excel functionality. This action method returns an exported Excel file. The action method returns FileContentResult which is used when we have a byte array and return as a file. The following code snippet
is used for the same.

Now, click The Export button. The button calls the above action method and the result is as shown in the figure.

Figure 4: Dialog for Excel

The resulted Excel file has the data. It has only those columns that we exported rather than all the columns of the collection.

Figure 5: Excel with Data

Download

You can download the complete solution source code from the code gallery using the following URL.

https://gallery.technet.microsoft.com/Export-To-Excel-In-ASPNET-cf17ea0d