How to DataBind User Interface Controls in ASP.NET & C#

Navigator : Home > Tutorials > Controls Tutorials > ...

How to DataBind User Interface Controls in ASP.NET & C#

This tutorials shows how we can Bind Data to controls and use those controls to manipulate this data. We use a GridView control and a DetailsView control to show data from a database, when the user clicks on a particular record. C# version. In this tutorial, we are going to add a GridView control and a DetailsView control. We are going to bind a SQL database to both of these, and use the DetailsView control to display just one recorded from a table within the database when the user selects it. This will allow more data to be displayed via the DetailsView, rather than the GridView. Also, the user will then be able to edit, delete and even add new data to the database via DetailsView control.

For the ASPX page, we have one GridView control, and one DetailsView control. We also have a SqlDataSource, which is the connection to our database. For this example, the database consisted of just one table of people, built using the Server Explorer within Visual Studio.

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

The GridView has Paging and Selection enabled to allow the user to select a particular record from the data.

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConflictDetection="CompareAllValues" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" DeleteCommand="DELETE FROM [People] WHERE [id] = @original_id AND [FirstName] = @original_FirstName AND [LastName] = @original_LastName AND [Location] = @original_Location" InsertCommand="INSERT INTO [People] ([FirstName], [LastName], [Location]) VALUES (@FirstName, @LastName, @Location)" OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT * FROM [People]" UpdateCommand="UPDATE [People] SET [FirstName] = @FirstName, [LastName] = @LastName, [Location] = @Location WHERE [id] = @original_id AND [FirstName] = @original_FirstName AND [LastName] = @original_LastName AND [Location] = @original_Location">

<asp:Parameter Name="original_id" Type="Int32" />
<asp:Parameter Name="original_FirstName" Type="String" />
<asp:Parameter Name="original_LastName" Type="String" />
<asp:Parameter Name="original_Location" Type="String" />

</DeleteParameters>
<UpdateParameters>

<asp:Parameter Name="FirstName" Type="String" />
<asp:Parameter Name="LastName" Type="String" />
<asp:Parameter Name="Location" Type="String" />
<asp:Parameter Name="original_id" Type="Int32" />
<asp:Parameter Name="original_FirstName" Type="String" />
<asp:Parameter Name="original_LastName" Type="String" />
<asp:Parameter Name="original_Location" Type="String" />

</UpdateParameters>
<InsertParameters>

<asp:Parameter Name="FirstName" Type="String" />
<asp:Parameter Name="LastName" Type="String" />
<asp:Parameter Name="Location" Type="String" />

</InsertParameters>

</asp:SqlDataSource>
Grid View: 
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource1" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">

<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />

</Columns>
</asp:GridView>
<br />
<br />
Details View:<br />
 <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" CellPadding="4" DataKeyNames="id" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" Height="50px" Width="125px">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<CommandRowStyle BackColor="#D1DDF1" Font-Bold="True" />
<EditRowStyle BackColor="#2461BF" />
<RowStyle BackColor="#EFF3FB" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<Fields>

<asp:BoundField DataField="id" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="id" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
<asp:BoundField DataField="Location" HeaderText="Location" SortExpression="Location" />
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowInsertButton="True" />

</Fields>
<FieldHeaderStyle BackColor="#DEE8F5" Font-Bold="True" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />

</asp:DetailsView>

</div>
</form>

This is the only code needed for this example.
This will set the DetailsView control to display the record that the user has selected from the GridView.

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{

}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{

DetailsView1.PageIndex = GridView1.SelectedIndex;

}

Looking for the VB.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!

Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!

100% SPAM FREE! We will never sell or rent your email address!