Post
Ask Question

Export Gridview To HTML File Using ASP.Net C#

Background

There is often a need in a project's reporting module to export a Grid View to a HTML File, so by considering that requirement I decided to write this article especially focusing on beginners and those who want to learn how to export a Grid View to HTML file using ASP.NET C#.

Now before creating the application, let us create a table named employee in a database from where we show the records in a Grid View, the table has the following fields (shown in the following image): 
 


I hope you have created the same type of table.

Now create the project as:
  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".

  2. "File" - "New Project" - "C#" - "Empty Project" (to avoid adding a master page).

  3. Provide the Project name such as ExportGridToHTML or another as you wish and specify the location.

  4. Then right-click on Solution Explorer and select "Add New Item" then select Default.aspx page.

  5. One Button and a grid view.
Now the Default.aspx source code will be as follows:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ExportGridviewToHTML.Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html>  
  5. <head id="Head1" runat="server">  
  6.     <title></title>  
  7. </head>  
  8. <body bgcolor="Silver">  
  9.     <form id="form1" runat="server">  
  10.     <br />  
  11.     <h2 style="color: #808000; font-size: x-large; font-weight: bolder;">  
  12.         Article by Vithal Wadje</h2>  
  13.     <br />  
  14.     <div>  
  15.         <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" CellPadding="6"  
  16.             ForeColor="#333333" GridLines="None">  
  17.             <AlternatingRowStyle BackColor="White" />  
  18.             <EditRowStyle BackColor="#7C6F57" />  
  19.             <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />  
  20.             <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />  
  21.             <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />  
  22.             <RowStyle BackColor="#E3EAEB" />  
  23.             <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />  
  24.             <SortedAscendingCellStyle BackColor="#F8FAFA" />  
  25.             <SortedAscendingHeaderStyle BackColor="#246B61" />  
  26.             <SortedDescendingCellStyle BackColor="#D4DFE1" />  
  27.             <SortedDescendingHeaderStyle BackColor="#15524A" />  
  28.             <Columns>  
  29.                 <asp:BoundField DataField="id" HeaderText="id" />  
  30.                 <asp:BoundField DataField="Name" HeaderText="Name" />  
  31.                 <asp:BoundField DataField="City" HeaderText="City" />  
  32.                 <asp:BoundField DataField="Address" HeaderText="Address" />  
  33.                 <asp:BoundField DataField="Designation" HeaderText="Designation" />  
  34.             </Columns>  
  35.         </asp:GridView>  
  36.         <br />  
  37.                    <asp:Button ID="Button1" runat="server"  
  38.             Text="Export To HTML" OnClick="Button1_Click" />  
  39.     </div>  
  40.     </form>  
  41. </body>  
  42. </html> 

If you are a beginner and don't understand in detail how to bind a Grid View from a database then refer to my following article.

Now, for this article create the following function in the default.aspx.cs page to bind the Grid View:

  1. private void Bindgrid()    
  2. {    
  3.     connection();    
  4.     query = "select *from Employee";//not recommended this i have written just for example,write stored procedure for security    
  5.     com = new SqlCommand(query, con);    
  6.     SqlDataAdapter da = new SqlDataAdapter(query, con);    
  7.     DataSet ds = new DataSet();    
  8.     da.Fill(ds);    
  9.     GridView1.DataSource = ds;    
  10.     GridView1.DataBind();    
  11.     con.Close();  
  12. } 
Now, call the preceding function on page load as:
  1. protected void Page_Load(object sender, EventArgs e)    
  2. {    
  3.     if (!IsPostBack)    
  4.     {    
  5.         Bindgrid();  
  6.     }    
  7. } 
Now create the following function to export the Grid View to HTML File:
  1. private void ExportGridToHTML()    
  2. {  
  3.     HtmlForm form = new HtmlForm();    
  4.     GridView1.AllowPaging = false;    
  5.     Bindgrid();    
  6.     Response.ClearContent();    
  7.     Response.AddHeader("content-disposition", string.Format("attachment; filename=VithalWadje.html"));    
  8.     Response.Charset = "";    
  9.     Response.ContentType = "text/html";    
  10.     StringWriter sw = new StringWriter();    
  11.     HtmlTextWriter htw = new HtmlTextWriter(sw);    
  12.     form.Attributes["runat"] = "server";    
  13.     form.Controls.Add(GridView1);    
  14.     this.Controls.Add(form);    
  15.     Form.RenderControl(htw);    
  16.     Response.Write(sw.ToString());    
  17.     Response.Flush();    
  18.     Response.End();  
  19. } 
We have created the preceding function to export the GridView to a HTML file. Now call the preceding function on the Export HTML button click as:
  1. protected void Button1_Click(object sender, EventArgs e)    
  2. {  
  3.     ExportGridToHTML();  
  4. } 
The entire code of the default.aspx page will look as follows:
  1. using System;  
  2. using System.IO;  
  3. using System.Data;  
  4. using System.Threading;  
  5. using System.Data.SqlClient;  
  6. using System.Configuration;  
  7. using System.Text;  
  8. using System.Web.UI.WebControls;  
  9. using System.Web.UI.HtmlControls;  
  10. using System.Web.UI;  
  11.   
  12. namespace ExportGridviewToHTML  
  13. {  
  14.     public partial class Default : System.Web.UI.Page  
  15.     {  
  16.         private SqlConnection con;  
  17.         private SqlCommand com;  
  18.         private string constr, query;  
  19.         private void connection()  
  20.         {  
  21.             constr = ConfigurationManager.ConnectionStrings["getconn"].ToString();  
  22.             con = new SqlConnection(constr);  
  23.             con.Open();  
  24.   
  25.         }  
  26.         protected void Page_Load(object sender, EventArgs e)  
  27.         {  
  28.             if (!IsPostBack)  
  29.             {  
  30.                 Bindgrid();  
  31.   
  32.             }  
  33.         }
  34.         private void Bindgrid()  
  35.         {  
  36.             connection();  
  37.             query = "select *from Employee";//not recommended this i have written just for example,write stored procedure for security  
  38.             com = new SqlCommand(query, con);  
  39.             SqlDataAdapter da = new SqlDataAdapter(query, con);  
  40.             DataSet ds = new DataSet();  
  41.             da.Fill(ds);  
  42.             GridView1.DataSource = ds;  
  43.             GridView1.DataBind();  
  44.             con.Close();  
  45.   
  46.         }  
  47.   
  48.         protected void Button1_Click(object sender, EventArgs e)  
  49.         {  
  50.   
  51.             ExportGridToHTML();  
  52.   
  53.         }  
  54.         private void ExportGridToHTML()  
  55.         {  
  56.   
  57.             HtmlForm form = new HtmlForm();  
  58.             GridView1.AllowPaging = false;  
  59.             Bindgrid();  
  60.             Response.ClearContent();  
  61.             Response.AddHeader("content-disposition", string.Format("attachment; filename=VithalWadje.html"));  
  62.             Response.Charset = "";  
  63.             Response.ContentType = "text/html";  
  64.             StringWriter sw = new StringWriter();  
  65.             HtmlTextWriter htw = new HtmlTextWriter(sw);  
  66.             form.Attributes["runat"] = "server";  
  67.             form.Controls.Add(GridView1);  
  68.             this.Controls.Add(form);  
  69.             Form.RenderControl(htw);  
  70.             Response.Write(sw.ToString());  
  71.             Response.Flush();  
  72.             Response.End();  
  73.   
  74.         }  
  75.   
  76.     }  
  77. } 
Now run the application and then we can see the following records in the Grid view:
 
 
Now click on the export text button, the following popup will appear:
 
 
Now click on the button by the selection option. Open it or save it on your system, to see that I will save it on my Desktop as:
 
 
Now double-click on the above file, then the Exported Grid view will look like as follows:
 
Now you see the Grid View exported to the HTML file and the Exported Grid view records we can see offline.

Notes
  • Download the Zip file from the attachment for the full source code of the application.
  • Change the connection string in the web.config file to specify your server location.
Summary

I hope this article is useful for all readers, if you have any suggestion then please contact me including beginners also.


Similar Articles