Bound Control in GridView Using ASP.Net

Nilesh Jadav
May 27, 2015
4.1k
0
0
Article

INITIAL CHAMBER

Step 1

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

Step 2

In Solution Explorer you get your empty website, add a web form and SQL Database. By going like this:

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

For SQL Server Database: BoundControl_demo (your empty website) then right-click then select Add New Item -> SQL Server Database. (Add 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.)

Figure 1 Data Table

DESIGN CODE

Step 4

Open your BoundControl_demo.aspx file from Solution Explorer and start designing you're application.

Here is the Code

<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="id">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("id") %>'>
</asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("id") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("name") %>'>
</asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("name") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="City">
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("city") %>'>
</asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("city") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
DeleteCommand="INSERT INTO tbl_data(id, name, city) VALUES (5, Keyur, Pune)"
SelectCommand="SELECT * FROM [tbl_data] ">
</asp:SqlDataSource>
<div></div>
</form>
</body>

Besides this if you don't want to go with code than you can manually add the thing by going to your Toolbox then select Data -> Grid View then drag it into the .aspx page.

Figure 2

When you press that arrow sign the Grid view task will open. From there then select Edit Columns. You come to a new Window then select Fields. Go to Available Window then select Button Field -> ADD.

Add three Button Fields (ID, Name and City). Uncheck Auto-generate Fields.

Figure 3 Uncheck Auto-generate Fields

Now click on ID and in the next section you will see Template Field Properties. In that go to HeaderText then provide the name of the header that you want to show in your Grid view Column. Then in that section find Data Field then name it ID. At the bottom part of Template Field Properties is “Convert this field into Template Field”, click on that. You will see your Bound Field converted into a template field. Press OK. In the same way you need to do Name and City. If you get any problem you can ask me in comments.

Figure 4 TempleteField

Figure 5 BoundField

Step 5

Return to the Grid view in Normal Mode. Press that arrow in the grid view again, you will get back to the grid view task. Inside that you will see “Choose Data Source“.

Figure 6 GridView Task

Since you had added a SQL Server Database (Database.mdf), select from that dropdown SqlDataSource1. You will get something like this:

Figure 7 SqlDataSource

Press that arrow in SQL DataSource then select Configure Data Source. Inside the Configure Datasource Window select your database Database.mdf (that you had added initially) then press Next.

Figure 8 Configure Data Source

Get to the table by going to Specify Columns from table view then select your table from the dropdown then select tbl_data.

Figure 9 Configure the Select Statement

As you can see they queried Select * from tbl_data so we will get our data from the database into our Grid View in our browser. Just press Next. You will get to the Test Query Window. Then press Finish.

OUTPUT CHAMBER

Figure 10 Test Query

You can even test your query here. Click Test Query then you will get your result in that black window. It will fetch all the content that you had added to your database.

You also can check it out into the browser. Go to BoundControl_demo.aspx then select View in Browser.