Post
Ask Question

Bind GridView Using Dataset in ASP.Net

In my previous tutorials I have bound the data using a datatable, but here we will use a dataset. It is easy to use but for some reason I thought that this will be beneficial for .NET beginners who have no idea about dataset and datatable.

Initial Chamber 

Step 1

Open your Visual Studio 2010 and create an Empty Website, provide a suitable name (gridview_demo).

Step 2

In Solution Explorer you get your empty website, then add a web form and a SQL Server database as in the following.

For Web Form:

gridview_demo (your empty website) then right-click then select Add New Item -> Web Form. Name it gridview_demo.aspx.

For SQL Server Database

gridview_demo (your empty website) then right-click then select Add New Item -> SQL Server Database. (Add a database inside the App_Data_folder.)

DATABASE CHAMBER

Step 3

In Server Explorer, click on your database (Database.mdf) then select Tables -> Add New Table. Make the table like this.

Table tbl_data (Don't Forget to make ID as IS Identity -- True)

Table

Design Chamber

Step 4

Now open the gridview_demo.aspx file where we will create our design for binding a GridView using a dataset.

Gridview_demo.aspx:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <table style="width:100%;">  
  12.         <tr>  
  13.             <td>  
  14.                  </td>  
  15.             <td>  
  16.                  </td>  
  17.             <td>  
  18.                  </td>  
  19.         </tr>  
  20.         <tr>  
  21.             <td>  
  22.                 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"   
  23.                     BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px"   
  24.                     CellPadding="4" DataKeyNames="id">  
  25.                     <Columns>  
  26.                         <asp:TemplateField HeaderText="Name">  
  27.                             <EditItemTemplate>  
  28.                                 <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("name") %>'></asp:TextBox>  
  29.                             </EditItemTemplate>  
  30.                             <ItemTemplate>  
  31.                                 <asp:Label ID="Label1" runat="server" Text='<%# Bind("name") %>'></asp:Label>  
  32.                             </ItemTemplate>  
  33.                         </asp:TemplateField>  
  34.                         <asp:TemplateField HeaderText="City">  
  35.                             <EditItemTemplate>  
  36.                                 <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("city") %>'></asp:TextBox>  
  37.                             </EditItemTemplate>  
  38.                             <ItemTemplate>  
  39.                                 <asp:Label ID="Label2" runat="server" Text='<%# Bind("city") %>'></asp:Label>  
  40.                             </ItemTemplate>  
  41.                         </asp:TemplateField>  
  42.                     </Columns>  
  43.                     <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />  
  44.                     <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />  
  45.                     <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />  
  46.                     <RowStyle BackColor="White" ForeColor="#003399" />  
  47.                     <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />  
  48.                     <SortedAscendingCellStyle BackColor="#EDF6F6" />  
  49.                     <SortedAscendingHeaderStyle BackColor="#0D4AC4" />  
  50.                     <SortedDescendingCellStyle BackColor="#D6DFDF" />  
  51.                     <SortedDescendingHeaderStyle BackColor="#002876" />  
  52.                 </asp:GridView>  
  53.             </td>  
  54.             <td>  
  55.                  </td>  
  56.             <td>  
  57.                  </td>  
  58.         </tr>  
  59.         <tr>  
  60.             <td>  
  61.                  </td>  
  62.             <td>  
  63.                  </td>  
  64.             <td>  
  65.                  </td>  
  66.         </tr>  
  67.     </table>  
  68.     <div>  
  69.       
  70.     </div>  
  71.     </form>  
  72. </body>  
  73. </html>  
Your design will look like the following:

Design

Code Chamber

Step 5

Open the gridview_demo.aspx.cs file and write some code so that our application works.

Gridview_demo.cs:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9.   
  10. public partial class Default2 : System.Web.UI.Page  
  11. {  
  12.     protected void Page_Load(object sender, EventArgs e)  
  13.     {  
  14.         if (!Page.IsPostBack)  
  15.         {  
  16.             refreshdata();  
  17.         }  
  18.     }  
  19.   
  20.     public void refreshdata()  
  21.     {  
  22.         SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
  23.         SqlCommand cmd = new SqlCommand("select * from tbl_data", con);  
  24.         SqlDataAdapter sda = new SqlDataAdapter(cmd);  
  25.         DataSet ds = new DataSet();  
  26.         sda.Fill(ds);  
  27.         GridView1.DataSource = ds;  
  28.         GridView1.DataBind();  
  29.       
  30.       
  31.     }    
  32.   
  33. }  
Output Chamber

GridView

I hope you liked it. Thank you for reading, Have a good day.


Similar Articles