ASP.NET & Databases Part 4: ASP Alliance

Print Add To Favorites Email To Friend Rate This Article
ASP.NET & Databases Part 4

Published: 26 Oct 2001

Unedited - Community Contributed

Abstract
This part will be looking at displaying the data from a DataSet.

by . .
Feedback

Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 23163/ 30

Article Contents:

Introduction
The Repeater Control
The DataList Control
The DataGrid Control
Summary

Introduction

[ Back To Top ]

ASP.NET & Databases : Part 4

Published 10/26/01

Introduction

Welcome to another part in ASP & Databases, this time we are going to be looking at how to display our data in or on something. We're going to be using the DataSet that we got in Part 3, and for you lazy people who want to steal my code, here it is -

<%@ Page Language="VB" Debug="true" %>

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.Oledb" %>
<script language="VB" runat="server">
Sub Page_Load(sender as object, e as eventargs)

Dim objConn as New OleDBConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=e:\sff\site\db\test.mdb")
objConn.Open()

Dim ds as Dataset = New DataSet()
Dim objAdapter as New OleDbDataAdapter("SELECT * FROM users", objConn)
Dim objCmdBld as New OleDbCommandBuilder(objAdapter)

objAdapter.Fill(ds, "users")
'add any more code that I show you here. Don't close Tags yet.

The Repeater Control

[ Back To Top ]

Repeater

I'll tell you now that all of these methods of viewing data is tedious and very complicated, but I'm sure that you can work it out, your relatively smart humans.

The Repeater is a control that loops through the data and displays it on templates that you create.

ItemTemplate. This is the template where it displays the main body of the data.

AlternativeItemTemplate. You can have an alternating style for every second item if you want.

HeaderTemplate. For any header you want.

SeparatorTemplate. For separating items (usually in the form of <br>, <hr> etc.).

FooterTemplate. For footers!

Before I show you the code there is one thing that I should tell you about.

DataBind()

DataBind() is a method that takes all of the data on the page and binds it to the controls that you have specified for example.

Repeater1.DataSource = ds.Tables("users").DefaultView
DataBind()

The first line sets the datasource and the second binds the data to the repeater, without binding, the data wouldn't be shown.

Repeater cont.

Remember that this code just snaps on to the one in the introduction.

Rpt.DataSource = ds.Tables("users").DefaultView
DataBind()
End Sub
</script>
<html><body><font face="Arial" size="2">
<asp:repeater id="Rpt" runat="server">

<HeaderTemplate>
     <table border="0" cellspacing="1" cellpadding="3">
     <tr>
     <td bgcolor="#6699FF" width="25%">Last Name</td>
     <td bgcolor="#6699FF" width="25%">First Name</td>
     </tr>
</HeaderTemplate>

<ItemTemplate>
     <tr>
     <td>
     <%# Container.DataItem("LName") %>
     </td><td>
     <%# Container.DataItem("FName") %>
     </td>
     </tr>
</ItemTemplate>

<FooterTemplate>
     </table>
</FooterTemplate>

</asp:repeater>
</font></body></html>

Lets look at this in sections -

We first set the repeater's datasource, which is the datatable "users". DefaultView is the view of the table, we'll look at views later (in another Part).

Then we bind the data to the repeater.

We start the repeater in the normal way to start any Web Form Control.

The HeaderTemplate starts a table with 2 columns, First Name and Last Name.

The ItemTemplate fills each column with the appropriate data, 'Container refers to the DataSource, we'll talk about that later (in another Part).

Finally the FooterTemplate closes the table and we then close up the remaining open tags.

I haven't put in any kind of Alternating Item in here, but its simple enough.

That is all a Repeater can do, it presents data and that is all there is to it.

The DataList Control

[ Back To Top ]

DataList

The DataList is very much like the Repeater but the DataList supports editing of data. You use the templates like we did with the repeater, but there are two new ones :

SelectedItemTemplate. This is the template the shows up when you select a row.

EditItemTemplate. This is what shows up when you select a row for editing.

Here is a very simple use of it.

dl.DataSource = ds.Tables("users").DefaultView
Databind()
End Sub
Sub dl_ItemCommand(sender as object, e as DataListCommandEventArgs)
    dl.SelectedIndex = e.Item.ItemIndex
    dl.DataBind()
End Sub
</script>

<html><body><font face="arial" size="2"><form runat="server">
<asp:datalist id="dl" runat="server"
     HeaderStyle-BackColor="#6699FF"
     SelectedItemStyle-BackColor="#6666FF"
     SelectedItemStyle-ForeColor="#FFFFFF"
     RepeatLayout = "table"
     RepeatDirection = "vertical"
     DataKeyField = "ID"
     OnItemCommand="dl_ItemCommand">

<HeaderTemplate>
     Last Name, click for full name.
</HeaderTemplate>

<ItemTemplate>
     <asp:linkbutton id="b1" runat="server" Text='<%# Container.DataItem("LName") %>' CommandName = "select" />
     <br>
</ItemTemplate>

<SelecteditemTemplate>
     <%# Container.DataItem("LName") & ", " & Container.DataItem("FName") %>
     <br>
</SelectedItemTemplate>
</asp:datalist>
</form></font>
</body>
</html>

This is a rather large piece of code, but here is the explanation....

After the databinding we put a new procedure (this will be explained soon).

We enclose the DataList in a form tag because it needs to reload the page to select items.

We define properties of the DataList -

HeaderStyle-BackColor The background of the Header (instead of putting it in the table code).

SelectedItem-BackColor The background of the Selected Item.

RepeatLayout This is how the DataList should be laid out - either 'table' or 'flow' (flow is just nothing ie. You define exactly how you want it.)

RepeatDirection The direction in which to display the items (horizontal or vertical).

DataKeyField The primary key to use, this helps when selecting and editing data.

OnItemCommand Explained Later.

HeaderTemplate This is just a very simple Header column.

ItemTemplate The link button is a link that serves as a submit type button (but text-only). You display the Last Name and the CommandName of "Select" sends the command "Select" to the DataList (which then performs whatever it needs to do.

SelectedItemTemplate Shows the First and Last Name.

Then we close up everything

This is quite complicated and there are many unexplained things, here is an explanation for one of them :

Most of these controls have events that happen when you do something, like when you click on an item or automatic ones like when an item is created. All of these events can have event handlers. In the above example we used an event handler for the ItemCommand event. It takes in the usually parameters with one difference - its DataListCommandEventArgs and not EventArgs, this provides you with more properties that are specialized for use with the DataList.

dl.SelectedIndex tells the DataList what Item to put the selected template on.
e.Item.ItemIndex returns the index of the Item that was selected.

There are many more events for Data Viewers and I hope to provide them in a future part.

But that wraps up the DataList, don't be afraid to experiment with properties and ways to view data.

The DataGrid Control

[ Back To Top ]

DataGrid

This is probably the most powerful control, it can go from simple to complex. I have already written an article on it but there are a few things that I can show you with it that it didn't cover.

Instead of templates, the DataGrid has types of columns :

Bound Columns These allow you to specify how a column is displayed, these are the default ones used by the DataGrid.

Button Columns These columns have buttons in them that can be customized.

Edit Command Column This allows you to edit items, when clicked it replaced the items with editable fields and several options.

Hyperlink Column A column with a hyperlink.

Templated Column A custom column.

dg.DataSource = ds.tables("users").DefaultView
DataBind()
End Sub
</script>

<asp:DataGrid id="dg" runat="server" />

This is the most simple form of viewing data in a DataGrid, this creates a table with the column names equaling the names in the actual DataTable and the information is just listed in rows, no special formatting or anything.

dg.DataSource = ds.tables("users").DefaultView
DataBind()
End Sub
</script>

<asp:DataGrid id="dg" runat="server"
     BorderColor="black"
     GridLines="vertical"
     cellpadding="3"
     cellspacing="1"
     width="50%"
     Font-Names="Arial"
     Font-Size="10pt"
     HeaderStyle-BackColor="#6699FF"
     AlternatingItemStyle-BackColor="#6666FF"
     AutoGenerateColumns="False">
<Columns>

<asp:BoundColumn HeaderText="ID" DataField="ID" />

<asp:templateColumn HeaderText="Name">
     <ItemTemplate>
      <asp:label id="Name" runat="server" Text='<%# Container.DataItem("FName") & " " & Container.DataItem("LName") %>' />
     </ItemTemplate>
</asp:templatecolumn>

</Columns>

</asp:datagrid>

This is a bit more complicated, but not as bad as it gets.

After a Standard Databinding session we set many properties of the DataGrid (self explanatory ones are left out)

GridLines If you want to specify a single way that the gridlines go, do it here.

AutoGenerateColumns If this is true it makes the columns up for you, if its false, it relies on your Columns that you set up. If it is true and you have defined columns then it will use both your columns and the Auto Generated ones.

Next we start to put in columns.

The BoundColumn for the ID Field

A Template Column (you can see the template that we're using here (the ItemTemplate)) and we then put a label on it.

We close tags.

This is no where NEAR the amount of stuff you can do on DataGrids, and because I like them, look out for an article - Advanced DataGrids.

Summary

[ Back To Top ]

Summary

And you thought DataSets were bad, In future parts I will show you how to edit the data in the table, make them more interactive, show you some more properties and techniques, and more stuff like that.

The amount of properties that you can set is enormous. In Classic ASP it would have taken some time to set all of this up, but now its simple (well, kind of simple).

You can experiment with properties and ways to do stuff.

If you want to see more about the other columns of a DataGrid see Part 6 (we're doing a quick Part on XML next).

See ya! wisemonk@aspalliance.com

User Comments

No comments posted yet.

Product Spotlight