Home ASP.NET Hosting Dedicated Servers Contact Us
Announcements
Virtual Tiers
.NET Applications
XML Web Services
SQL Server Database
Web Traffic Statistics
Much More...
ASP.NET Web Site Hosting
Dedicated Servers
Windows 2003 Server
2.4 GHz Pentium 4
1024 MB RAM
80 GB Hard Drive
1000 GB/month
Fully Managed
Free Setup!
$268.00/month
Windows Dedicated Servers
Specialized Plans
10 or more Domains
Windows Services
Custom Plans
Windows Services
Learning & Support
About Us



Lists, Data, and Data Binding


Learn More about Server Intellect


ASP.NET ships with a built-in set of data grid and list controls. These can be used to provide custom UI driven from queries against a database or other data source. For example, the following sample demonstrates how a <asp:datagrid runat=server> control can be used to databind book information collected using a SQL database query.

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<html>
<head>
</head>

<script language="VB" runat=server>

Sub SubmitBtn_Click(Sender As Object, E As EventArgs)

Dim DS As DataSet
Dim MyConnection As SqlConnection
Dim MyCommand As SqlDataAdapter

MyConnection = New SqlConnection( "server=(local)\NetSDK;database=pubs;Trusted_Connection=yes")
MyCommand = New SqlDataAdapter("select * from Titles where type='" + Category.SelectedItem.Value + "'", myConnection)

DS = new DataSet()
MyCommand.Fill(DS, "Titles")

MyList.DataSource = DS.Tables("Titles").DefaultView
MyList.DataBind()

End Sub


</script>

<body>

<center>

<form action="form.aspx" method="post" runat="server">

<asp:adrotator AdvertisementFile="ads.xml" BorderColor="black" BorderWidth=1 runat="server"/>

<h3> Name: <asp:textbox id="Name" runat="server"/>

Category: <asp:dropdownlist id="Category" runat=server>
<asp:listitem >psychology</asp:listitem>
<asp:listitem >business</asp:listitem>
<asp:listitem >popular_comp</asp:listitem>
</asp:dropdownlist>
</h3>

<asp:button text="Lookup" OnClick="SubmitBtn_Click" runat="server"/>

<p>

<ASP:DataGrid id="MyList" HeaderStyle-BackColor="#aaaadd" BackColor="#ccccff" runat="server"/>

</form>

</center>

</body>

</html>

ads.xml

<Advertisements>

<Ad>
<ImageUrl>banner1.gif</ImageUrl>
<NavigateUrl>http://www.microsoft.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Computers</Keyword>
<Impressions>80</Impressions>
</Ad>

<Ad>
<ImageUrl>banner2.gif</ImageUrl>
<NavigateUrl>http://www.microsoft.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Computers</Keyword>
<Impressions>80</Impressions>
</Ad>

<Ad>
<ImageUrl>banner3.gif</ImageUrl>
<NavigateUrl>http://www.microsoft.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Computers</Keyword>
<Impressions>80</Impressions>
</Ad>

</Advertisements>

The <asp:datagrid runat=server> DataGrid control provides an easy way to quickly display data results using a traditional grid-control UI. Alternatively, ASP.NET developers can use the <asp:DataList runat=server> DataList control and a custom ItemTemplate template to customize data information, as in the following sample.

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<html>
<head>
</head>

<script language="VB" runat=server>

Sub SubmitBtn_Click(Sender As Object, E As EventArgs)

Dim DS As DataSet
Dim MyConnection As SqlConnection
Dim MyCommand As SqlDataAdapter

MyConnection = New SqlConnection( "server=(local)\NetSDK;database=pubs;Trusted_Connection=yes")
MyCommand = New SqlDataAdapter("select * from Titles where type='" + Category.SelectedItem.Value + "'", myConnection)

DS = new DataSet()
MyCommand.Fill(DS, "Titles")

MyList.DataSource = DS.Tables("Titles").DefaultView
MyList.DataBind()

End Sub

</script>

<body>

<center>

<form action="form.aspx" method="post" runat="server">

<asp:adrotator AdvertisementFile="ads.xml" BorderColor="black" BorderWidth=1 runat="server"/>

<h3> Name: <asp:textbox id="Name" runat="server"/>

Category: <asp:dropdownlist id="Category" runat=server>
<asp:listitem >psychology</asp:listitem>
<asp:listitem >business</asp:listitem>
<asp:listitem >popular_comp</asp:listitem>
</asp:dropdownlist>
</h3>

<asp:button text="Lookup" OnClick="SubmitBtn_Click" runat="server"/>

<p>

<asp:datalist id="MyList" repeatcolumns="2" borderwidth="0" runat="server">

<ItemTemplate>

<table>
<tr>

<td>
<img src='<%# DataBinder.Eval(Container.DataItem, "title_id", "/quickstart/aspplus/images/title-{0}.gif") %>'>
</td>

<td width=250 valign=top>

<b><%# DataBinder.Eval(Container.DataItem, "title") %></b>

<br><br>

Price: <%# DataBinder.Eval(Container.DataItem, "price", "${0}") %>
</td>

</tr>
</table>

</ItemTemplate>

</asp:datalist>

</form>

</center>

</body>

</html>

ads.xml

<Advertisements>

<Ad>
<ImageUrl>banner1.gif</ImageUrl>
<NavigateUrl>http://www.microsoft.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Computers</Keyword>
<Impressions>80</Impressions>
</Ad>

<Ad>
<ImageUrl>banner2.gif</ImageUrl>
<NavigateUrl>http://www.microsoft.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Computers</Keyword>
<Impressions>80</Impressions>
</Ad>

<Ad>
<ImageUrl>banner3.gif</ImageUrl>
<NavigateUrl>http://www.microsoft.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Computers</Keyword>
<Impressions>80</Impressions>
</Ad>

</Advertisements>

Note that the <asp:datalist runat=server> control enables end users to exactly control the structure and layout of each item within the list (using the ItemTemplate template property). The control also automatically handles the two-column wrapping of content (users can control the number of columns using the RepeatColumns property on the data list).

The following sample provides an alternate view of the <asp:datalist runat=server> control.

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<html>
<head>
</head>

<script language="VB" runat=server>

Sub SubmitBtn_Click(Sender As Object, E As EventArgs)

Dim DS As DataSet
Dim MyConnection As SqlConnection
Dim MyCommand As SqlDataAdapter

MyConnection = New SqlConnection( "server=(local)\NetSDK;database=pubs;Trusted_Connection=yes")
MyCommand = New SqlDataAdapter("select * from Titles where type='" + Category.SelectedItem.Value + "'", myConnection)

DS = new DataSet()
MyCommand.Fill(DS, "Titles")

MyList.DataSource = DS.Tables("Titles").DefaultView
MyList.DataBind()

End Sub

</script>

<body>

<center>

<form action="form.aspx" method="post" runat="server">

<asp:adrotator AdvertisementFile="ads.xml" BorderColor="black" BorderWidth=1 runat="server"/>

<h3> Name: <asp:textbox id="Name" runat="server"/>

Category: <asp:dropdownlist id="Category" runat=server>
<asp:listitem >psychology</asp:listitem>
<asp:listitem >business</asp:listitem>
<asp:listitem >popular_comp</asp:listitem>
</asp:dropdownlist>

</h3>

<asp:button text="Lookup" OnClick="SubmitBtn_Click" runat="server"/>

<p>

<asp:datalist id="MyList" layout="flow" showfooter=true borderwidth=0 runat=server>

<HeaderTemplate>

<table cellpadding=1 cellspacing=0 >
<tr>
<td colspan=4>
<b><font face="Verdana" size=3>Product Listing </font></b>
</td>
</tr>
<tr>
<td colspan=4 height=5 bgcolor="000000"></td>
</tr>

</HeaderTemplate>

<ItemTemplate>
<tr>
<td colspan=3 style="font-size:10pt">
<b><%# DataBinder.Eval(Container.DataItem, "title_id") %></b>
<span> <%# DataBinder.Eval(Container.DataItem, "title") %> </span>
</td>
<td align=right style="font-size:10pt">
<b><%# DataBinder.Eval(Container.DataItem, "price", "${0}") %> </b>
</td>

</tr>
</ItemTemplate>

<SeparatorTemplate>
<tr>
<td colspan=4 height=1 bgcolor="000000"></td>
</tr>
</SeparatorTemplate>

<FooterTemplate>
<tr>
<td colspan=4 height=5 bgcolor="000000"></td>
</tr>
</table>
</FooterTemplate>

</asp:datalist>

</form>

</center>

</body>

</html>

ads.xml

<Advertisements>

<Ad>
<ImageUrl>banner1.gif</ImageUrl>
<NavigateUrl>http://www.microsoft.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Computers</Keyword>
<Impressions>80</Impressions>
</Ad>

<Ad>
<ImageUrl>banner2.gif</ImageUrl>
<NavigateUrl>http://www.microsoft.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Computers</Keyword>
<Impressions>80</Impressions>
</Ad>

<Ad>
<ImageUrl>banner3.gif</ImageUrl>
<NavigateUrl>http://www.microsoft.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Computers</Keyword>
<Impressions>80</Impressions>
</Ad>

</Advertisements>

Note that the control, data model, and page user in this example are exactly the same as those in the previous sample. The only difference is that, here, alternative templates are declaratively supplied to the code.