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 > OKStep-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.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 codeStep-9: Run Application.
- 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();
- }
No comments:
Post a Comment