You've traveled the long and arduous journey of reading through my 3 other articles on using the DataGrid and Repeater controls in ASP.Net. This is the last but not least, the DataList. You can look at it as either a stripped-down DataGrid or a beefed-up repeater, but either way it's got a good mix of flexibility and functionality that will make it the best choice in many situations.
Contributed by Justin Cook Rating: / 21 July 20, 2004
Previous articles on this topic include DataGrid and Repeater controls.
Introduction
In my last article, I detailed how to make good use of the Repeater control. By setting up a template for the repeating data, you saw how easy it was to surface data from a dataset onto a web page. Beyond just merely repeating or displaying the data, I illustrated a real-life application of its use, putting it to work in an e-commerce environment. To do this I explain what is meant by 'event bubbling' and how to use it effectively.
You'll find it an easy transition to now move into the DataList control. Its use is very similar to the repeater, but it has some additional flexibility and functionality. You have more control over the display of the data, as well as provisions for data selection and editing.
Let's get right into the code, and I'll explain how it works along the way
Into the Code
Like any data-bound control in .Net, we'll start off the example by retreiving the actual data with which to populate the DataList. We don't really need to re-invent the wheel here; we can use very similar code to what is used with a repeater. We'll call the binding subroutine doBinding():
Sub doBinding()
Dim strConn As String = "Provider=Microsoft.Jet.OLEDB.4.0; " & _
"Ole DB Services=-4; " & _
"Data Source=C:\Inetpub\wwwroot\test.mdb"
Dim dbConnection As OleDbConnection = New OleDbConnection(strConn)
Dim strSQL As String = "SELECT * FROM products"
Dim dataAdapter As OleDbDataAdapter = New OleDbDataAdapter( strSQL, strConn)
Dim dataSet As DataSet = New DataSet
dataAdapter.Fill(dataSet)
dList.DataSource = dataSet
dList.DataBind()
End Sub
Nothing too groundbreaking here. We just made the connection, established the query string with results in a dataset filled with the products data. Then we instantiate the datalist and bind the data to it.
Now of course this will all do exactly nothing unless we call the subroutine at some event. And naturally we will use the page load event to call it:
Now we get to the meat -- the actual implementation of the DataList. I will first show it in its most basic form, just using the required ItemTemplate and embedding some simple HTML.
Now you'll notice the two things different from a repeater, the RepeatColumns and RepeatDirection properties. What this does in effect is throw the data into an HTML table (unless you modify the RepeatLayout), configured to the number of columns/rows in the direction that you specify. We could have easily added in some quick formatting with the following optional properties:
So at this point you're thinking that the only thing that the DataList really does is save you having to manually include the code to output a repeater into a table. So far you're right, but I haven't gotten into the selecting or editing capabilities. Let's do that now.
Suppose we wanted to strip down the initial display and only provide a picture and description of the product. This is very practical in a shopping cart, as this would preserve landscape, and allow users to click on individual products to get more specific information. We can do that through the SelectedItemTemplate and by modifying the SelectedIndex of the DataList.
So let's modify the item template to only provide the description and a picture:
Then we will bubble the click on the LinkButton up to the container with OnItemCommand:
<asp:DataList id="dList" runat="server"
onItemCommand="getItem" OnEditCommand="editItem"
RepeatDirection="Horizontal" RepeatColumns="3">
And this necessitates a subroutine called getItem. This subroutine will determine the index of the item clicked, and set the SelectedIndex to that one:
Sub getItem( s as object, e as DataListCommandEventArgs )
dList.SelectedIndex = e.Item.ItemIndex
doBinding()
End Sub
And now all we need to do is modify the selectedItemTemplate, to provide the additional information:
Now when you click the LinkButton for one item, it will display its extended info, as well as have a gray background. Users have a link that says 'buy', which you could configure to send them off to a page to do credit card processing and shipping and whatnot.
Now suppose you're the site administrator. You should be able to edit the items. You might have opted to use the DataGrid for this. However, you like the idea of having full control of your editing abilities, and that's what the DataList provides. (For example, you can very easily toss validation controls into your editing template). I have included the fake checking routine called isAdmin(); you can use whatever device you want. All that matters is that somehow the administrator gets the extra little link that says 'edit'.
If you go back to the actual DataList configuration, you'll notice I placed in there the 'onEditCommand' method handler. It wants to hand things off to a routine called editItem, which will look like this:
Sub editItem( s as object, e as DataListCommandEventArgs )
dList.EditItemIndex = e.Item.ItemIndex
doBinding()
End Sub
And now that we've set the EditItemIndex, we actually have to do something with it by setting the EditItemTemplate. We'll place every attribute in a text box for editing, and provide the buttons to update, delete, and cancel.
You can see just how easy it was to make an item editable. And of course you could very simply throw into validation controls to make sure the cost field is still numeric and so forth. But you may be a little disappointed when you click on 'upd' and nothing happens. That's because we haven't installed the method handlers. To provide the actual update, delete and cancel methods, you need to implement the onUpdateCommand, onDeleteCommand, and onCancelCommand handlers of the DataList.
Sub doCancel( s as object, e as DataListCommandEventArgs )
dList.SelectedIndex = -1
dList.EditItemIndex = -1
doBinding()
End Sub
So where are we now? I've showed you how to install a DataList, pump it full of data, and configure its output. You can select a specific item to see its extended properties, and then if you're the administrator you have editing capabilities. When you click cancel, it takes you back to the original, non-selected dataList. If you want the ability to actually update or delete data, (which you will) you can use the code from my other article: http://www.aspfree.com/c/a/.NET/Return-of-the-DataGrid-Paging-and-Editing-Explained/2/
/ 21 
ASP.NET Export to Excel and Word using VB.NET and C#
