Saturday, August 10, 2019

How to Export Webgrid to Excel in MVC4 Application

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 

  1. public ActionResult Index()
  2. {
  3. List<CustomerInfo> allCust = new List<CustomerInfo>();
  4. using (MyDatabaseEntities dc = new MyDatabaseEntities())
  5. {
  6. allCust = dc.CustomerInfoes.ToList();
  7. }
  8. return View(allCust);
  9. }

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 
  1. @model List<MVCExportWebgrid.CustomerInfo>
  2. @{
  3. ViewBag.Title = "Index";
  4. var grid = new WebGrid(source: Model, canPage: false);
  5. }
  6.  
  7. @* Here I will add some css for Looks webgrid better *@
  8.  
  9. <style type="text/css">
  10. table.gridtable {
  11. font-family: verdana,arial,sans-serif;
  12. font-size:11px;
  13. color:#333333;
  14. border-width: 1px;
  15. border-color: #666666;
  16. border-collapse: collapse;
  17. }
  18. table.gridtable th {
  19. border-width: 1px;
  20. padding: 8px;
  21. border-style: solid;
  22. border-color: #666666;
  23. background-color: #dedede;
  24. }
  25. table.gridtable td {
  26. border-width: 1px;
  27. padding: 8px;
  28. border-style: solid;
  29. border-color: #666666;
  30. background-color: #ffffff;
  31. }
  32. </style>
  33.  
  34.  
  35. <h2>Customer Info</h2>
  36. <div>
  37. @grid.GetHtml(
  38. tableStyle:"gridtable",
  39. columns:grid.Columns(
  40. grid.Column("CustomerID","Customer ID"),
  41. grid.Column("CustomerName","Customer Name"),
  42. grid.Column("Address","Address"),
  43. grid.Column("City", "City"),
  44. grid.Column("PostalCode","Postal Code")
  45. )
  46. )
  47. </div>
  48. <div>
  49. Export Data : @Html.ActionLink("Excel","GetExcel","Webgrid")
  50. </div>
  51.  

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 

  1. public void GetExcel()
  2. {
  3. List<CustomerInfo> allCust = new List<CustomerInfo>();
  4. using (MyDatabaseEntities dc = new MyDatabaseEntities())
  5. {
  6. allCust = dc.CustomerInfoes.ToList();
  7. }
  8.  
  9. WebGrid grid = new WebGrid(source: allCust, canPage: false, canSort: false);
  10.  
  11. string gridData = grid.GetHtml(
  12. columns: grid.Columns(
  13. grid.Column("CustomerID", "Customer ID"),
  14. grid.Column("CustomerName", "Customer Name"),
  15. grid.Column("Address", "Address"),
  16. grid.Column("City", "City"),
  17. grid.Column("PostalCode", "Postal Code")
  18. )
  19. ).ToString();
  20.  
  21. Response.ClearContent();
  22. Response.AddHeader("content-disposition", "attachment; filename=CustomerInfo.xls");
  23. Response.ContentType = "application/excel";
  24. Response.Write(gridData);
  25. Response.End();
  26. }
Step-9: Run Application.

No comments:

Post a Comment

How to register multiple implementations of the same interface in Asp.Net Core?

 Problem: I have services that are derived from the same interface. public interface IService { } public class ServiceA : IService { ...