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.
If you have gone through these tutorials, you will get a basic understanding of Webgrid implementation. In this tutorial, I am going to use the code of the previous posts. I have implemented the screenshots given below of the Webgrid in the previous posts.
Exporting Webgrid to Excel in ASP.NET MVC
- Create Visual Studio Application in (2013 or 2015).
- 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.
- I am adding an extra code to implement exporting the data.
- Add ActionLink, given below, in an Index View, as shown below:
-
- @Html.ActionLink("Export to Excel", "PrintExcel", "Home", new { @class="btn btn-success"})
- <br/>
- The complete code of the View is shown below:
Index.cshtml
- @model List<WebGridinMVC5.Models.UserTable>
- @{
- ViewBag.Title = "www.mitechdev.com";
- //create object for webgrid to use Webgrid helper
- var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 7);
- //pager
- grid.Pager(WebGridPagerModes.All);
- }
- <h2>Fetching and displaying data from server in WebGrid</h2><br/>
-
- @Html.ActionLink("Export to Excel", "PrintExcel", "Home", new { @class="btn btn-success"})
- <br/>
-
- <style type="text/css">
- /*styles for altering rows*/
- .webgrid-row-style {
- padding: 3px 7px 2px;
- }
- .webgrid-alternating-row {
- background-color: #EAF2D3;
- padding: 3px 7px 2px;
- }
- </style>
-
-
- <div id="webgrid">
- @grid.GetHtml(
- //styles class for table
- //here i used bootstrap table templates
- tableStyle: "table table-responsive backcolor",
- headerStyle:"wedgrid-header",
- footerStyle:"webgrid-footer",
- alternatingRowStyle:"webgrid-alternating-row",
- rowStyle:"webgrid-row-style",
- //binding table column to the grid
- columns:grid.Columns(
- grid.Column(header:"Serial No",format:@<text><div>@(item.WebGrid.Rows.IndexOf(item)+1)</div></text>),
- grid.Column(columnName:"Name",header:"Name"),
- grid.Column(header:"Email", format:@<text><a href="mailto:@item.Email">@item.Email</a></text>),
- grid.Column(columnName:"PhoneNumber",header:"Phone No"),
- grid.Column(header:"Is Active", format:@<text><input type="checkbox" checked="@item.Status" disabled="disabled" /></text>)
- )
- )
- </div>
- 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
- 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.
- Replace the HomeController.cs file with the code, given below:
HomeController.cs
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.Mvc;
- using System.Web.Helpers;
- using WebGridinMVC5.Models;
-
- namespace WebGridinMVC5.Controllers
- {
- public class HomeController : Controller
- {
-
- public ActionResult Index()
- {
- List lst = new List();
- using (DatabaseEntities db = new DatabaseEntities())
- {
- lst = db.UserTables.ToList();
- }
-
- return View(lst);
-
- }
-
-
- public void PrintExcel()
- {
- List exceldata = new List();
- using (DatabaseEntities db = new DatabaseEntities())
- {
- exceldata = db.UserTables.ToList();
- }
-
- WebGrid grid = new WebGrid(source: exceldata,canPage:false, canSort: false);
- string gridData = grid.GetHtml(
- columns: grid.Columns(
- grid.Column("UserID", "UserID"),
- grid.Column("Name", "Name"),
- grid.Column("Email", "Email"),
- grid.Column("PhoneNumber", "PhoneNumber"),
- grid.Column("Status", "Status")
- )).ToString();
- Response.ClearContent();
-
- Response.AddHeader("content-disposition", "attachment; filename=UserData.xls");
-
- Response.ContentType = "application/excel";
-
- Response.Write(gridData);
- Response.End();
- }
- }
- }
- Now, run the Application and see the output.
- 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.