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" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  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>
  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;
  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. }
  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();
  31. }
  33. }
Output Chamber

GridView

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