In this Article I’ll show you about Bound Control in Grid View using Asp.net C# where we make a select query and you will see your output your result inside grid view.
INITIAL CHAMBER:
Step1) Open Your Visual Studio 2010 and Create an Empty Website, Give a suitable name [BoundControl_demo].
Step2) 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) -> Right Click -> Add New Item -> Web Form. Name it as -> BoundControl_demo.aspx.
For SQL Server Database:
Accordion_demo (Your Empty Website) -> Right Click -> Add New Item -> SQL Server Database. [Add Database inside the App_Data_folder].
DATABASE CHAMBER:
Step3) In Server Explorer, Click on your Database [Database.mdf] - -> Tables - -> Add New Table -:- Make table like this:
- Table - -> tbl_data [Don’t Forget to make ID as IS Identity -- True]
DESIGN CODE:
Step6) Open your BoundControl_demo.aspx file from solution Explorer and start design 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 - -> Data - -> Grid View - -> Drag it into the .aspx page.
When you press that arrow sign Grid view task will open from there - -> Select Edit Columns. You come to a new Window - -> Fields. Go to Available Window - -> Button Field - -> ADD.
Add three Button Field. [ID,Name,City]. Uncheck Auto-generate Fields.
Now Click on ID and in the Next Section you see – Template Field Properties. In that go to - -> HeaderText - -> Give name of the header that you want to show in your Grid view Column. Then in that section find Data Field - - > Name it as ID.
At the Bottom part of Template Field Properties - - > “Convert this field into Template Field” is there Click on that. You will see your Bound Field get converted into template field. Press OK. In the same way you have to do for Name and City. If you get any problem you can ask me in comments.
At the Bottom part of Template Field Properties - - > “Convert this field into Template Field” is there Click on that. You will see your Bound Field get converted into template field. Press OK. In the same way you have to do for Name and City. If you get any problem you can ask me in comments.
Step8) Come back to Grid view in Normal Mode. Press Again that arrow in grid view, your get back to grid view task. Inside that you will see – “Choose Data Source“.
As you had Added SQL Server Database [Database.mdf]. Select from that dropdown SqlDataSource1. You will get something like this:
Press that arrow in Sql DataSource - -> Configure Data Source. Inside Configure Datasource Window - -> Select your Database - - > Database.mdf (that you had added initially) - -> Press Next.
Get you table by going to - -> Specify Columns from table view - -> Select your table from dropdown - -> tbl_data.
As you can see they queried Select * from tbl_data - -> So we will get our Data from Database to our Grid View in our Browser. Just Press Next. You get to Test Query Window - -> Press Finish.
OUTPUT CHAMBER:
You even Can test your Query Here - - > Click Test Query - -> you will get your Result in that black window. It will fetch all content that you had added in your Database.
You also can check it out into the Browser. Going to - -> BoundControl_demo.aspx - -> View in Browser.
No comments:
Post a Comment