How to Export Webgrid to Excel in MVC4 Application

Introduction

In this post, I am explain How to Export Webgrid to Excel in asp.net MVC4 Application.

Steps :

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net MVC4 web application > Entry Application Name > Click OK > Select Internet Application > Select view engine Razor > OK

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create table for fetch data.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

In this example, I have used one tables as below

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add a new Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Step-6: Add new action into your controller for data in webgrid.

Here I have added "Index" Action into "Webgrid" Controller. Please write this following code

             public ActionResult Index()
            {
                List<CustomerInfo> allCust = new List<CustomerInfo>();
                using (MyDatabaseEntities dc = new MyDatabaseEntities())
                {
                    allCust = dc.CustomerInfoes.ToList();
                }
                return View(allCust);
            }

Step-7: Add view for the Action & design.

Right Click on Action Method (here right click on form action) > Add View... > Enter View Name > Select View Engine (Razor) > Check "Create a strong-typed view" > Select your model class > Add.
[N:B:Please Rebuild solution before add view.]
Complete View

            @model List<MVCExportWebgrid.CustomerInfo>
            @{
                ViewBag.Title = "Index";
                var grid = new WebGrid(source: Model, canPage: false);
            }

            @* Here I will add some css for Looks webgrid better *@

            <style type="text/css">
                table.gridtable {
                 font-family: verdana,arial,sans-serif;
                 font-size:11px;
                 color:#333333;
                 border-width: 1px;
                 border-color: #666666;
                 border-collapse: collapse;
                }
                table.gridtable th {
                 border-width: 1px;
                 padding: 8px;
                 border-style: solid;
                 border-color: #666666;
                 background-color: #dedede;
                }
                table.gridtable td {
                 border-width: 1px;
                 padding: 8px;
                 border-style: solid;
                 border-color: #666666;
                 background-color: #ffffff;
                }
            </style>


            <h2>Customer Info</h2>
            <div>
                @grid.GetHtml(
                tableStyle:"gridtable",
                columns:grid.Columns(
                        grid.Column("CustomerID","Customer ID"),
                        grid.Column("CustomerName","Customer Name"),
                        grid.Column("Address","Address"),
                        grid.Column("City", "City"),
                        grid.Column("PostalCode","Postal Code")
                    )
                )
            </div>
            <div>
                Export Data : @Html.ActionLink("Excel","GetExcel","Webgrid")
            </div>

Step-8: Add another action into your controller for export webgrid in excel format.

Here I have added "GetExcel" Action into "Webgrid" Controller. Please write this following code

            public void GetExcel()
            {
                List<CustomerInfo> allCust = new List<CustomerInfo>();
                using (MyDatabaseEntities dc = new MyDatabaseEntities())
                {
                    allCust = dc.CustomerInfoes.ToList();
                }

                WebGrid grid = new WebGrid(source: allCust, canPage: false, canSort: false);

                string gridData = grid.GetHtml(
                    columns: grid.Columns(
                            grid.Column("CustomerID", "Customer ID"),
                            grid.Column("CustomerName", "Customer Name"),
                            grid.Column("Address", "Address"),
                            grid.Column("City", "City"),
                            grid.Column("PostalCode", "Postal Code")
                            )
                        ).ToString();

                Response.ClearContent();
                Response.AddHeader("content-disposition", "attachment; filename=CustomerInfo.xls");
                Response.ContentType = "application/excel";
                Response.Write(gridData);
                Response.End();
            }

Step-9: Run Application.

Download Application Live Demo