Server Intellect
 
Home   Asp.Net Tutorials   What's New   Newsletter   More Resources
 
 
  Categories
Advanced Technologies
AJAX
Internet Browsers
Controls
Database
Email
Error Handling
File
Graphics
Website Navigation
Network
Performance
User Interface and Themes
Validation
Visual Web Developer
Web Services
XML
Suggest Tutorial


Navigator: Home - Tutorials - Controls - How to DataBind User Interface Controls in ASP.NET & C#
How to DataBind User Interface Controls in ASP.NET & C#


ASP.NET Controls Tutorial

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.

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.

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.
The GridView has Paging and Selection enabled to allow the user to select a particular record from the data.
<form id="form1" runat="server">
<div>
<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">
<DeleteParameters>
<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:&nbsp;
<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">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<EditRowStyle BackColor="#2461BF" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<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 />
&nbsp;<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>

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

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;
}
}

Download the Full Working Version of this Project written with Visual Studio.NET C# 2005 Here!

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

Looking for more ASP.NET Tutorials? Click Here!







 
  Developer Resources







Server Intellect Rocks