| The DataList server control provides
additional control over bound data through user-defined templates. The
template allows you to control the look and feel of the list's Items,
Header, Footer, etc.
In this walkthrough, you will develop an ItemTemplate that binds a
Label to the ProductName column in the OrderDetails
table.
- Open the myFirstDataPage.aspx file in Design view.
- Remove the DataGrid from the ASP.NET page.
- From the Web Controls tab in the Toolbox, drag a
DataList control onto the ASP.NET page. Place the DataList in
the same position on the form as the deleted DataGrid.
- Right-click on the DataList and select Edit Templates.
- You will see the Edit Templates dialog box.
- Select ItemTemplates from the Select a Template to edit
drop-down box.
- Select ItemTemplate from the Template Type drop-down
box.
- Type ProductName: in the Template Design box.
- From the Web Controls tab in the Toolbox, drag a
Label control onto the Template Design box, immediately to the
right of ProductName:.
- Select the Label in the Template Design box.
- Select the (DataBindings) property in the Properties
window.
- You will see the DataBindings dialog box appear. The
DataBindings dialog box displays a list of properties for the control
and allows you to specify what data source properties are bound to.
- Select the Text node in the Bindable Properties tree
view (default).
- Select the Custom binding expression radio button.
- Type DataBinder.Eval(Container.DataItem, "ProductName") in the
Custom binding expression box. This expression binds the value of
the OrderDetailID column to the Text property of the
Label control for each row in the database table.
- Click OK.
Note The Label will have square brackets surrounding it.
This indicates that the control is now data bound.
- Click OK to close the Edit Templates dialog box.
- Select the Code tab.
- Modify the Button Click event code so that it populates the
DataList with the results of calling the GetOrderDetails
function:
Sub Button1_Click(sender As Object, e As EventArgs)
DataList1.DataSource = GetOrderDetails(CInt(TextBox1.Text))
DataList1.DataBind()
End Sub
- Select the HMTL tab.
- Add attributes to the DataList HTML tag that renders a black
border:
<asp:DataList id="DataList1" runat="server"
BorderColor="Black" BorderStyle="Solid" BorderWidth="2">
</asp:datalist>
- Save and run the ASP.NET page.
- Your ASP.NET page will automatically appear in a new instance of your
Web browser.
- Type 1 into the TextBox and press the Button.
- The DataList will show all of the rows in the OrderDetails
table for the specified OrderID.
- Close the Web browser instance.
Next Step >> |
