The DataList control is very similar to the Repeater control. In fact, you can render exactly the same output using exactly the same controls, changing only the Repeater to a DataList control. If you examine Table 13-1, however, you will see that the DataList control provides support for column and flow layout. To see how this works, you’ll add radio buttons to offer the user the choice of vertical vs. horizontal flow, and one vs. two columns, as shown in Figure 13-2.
To create this page, you will modify the previous .aspx page and change the Repeater to a DataList, changing its name from Repeater1 to DataList1:
<asp:DataList ID="DataList1" Runat="server">
You’ll also need to modify the end tag by changing:
</asp:Repeater>
to:
</asp:DataList>
The template for the DataList is identical; no changes are needed at all! You will want to add RadioButtons, however, to allow the user to specify the direction the items will flow, and number of columns:
<table> <tr> <td class="item">Which direction?</td> <td class="item" colspan="2"> <asp:RadioButton ID="Vertical" GroupName="Direction" Runat="server" AutoPostBack="True" Checked="True" />Vertical</td> <td class="item" colspan="2"> <asp:RadioButton ID="Horizontal" GroupName="Direction" Runat="server" AutoPostBack="True" />Horizontal</td> </tr> <tr> <td class="item">How many columns?</td> <td class="item"> <asp:RadioButton ID="Col1" GroupName="NumCols" Runat="server" AutoPostBack="True" Checked="True"/>1</td> <td class="item"> <asp:RadioButton ID="Col2" GroupName="NumCols" Runat="server" AutoPostBack="True" />2</td> </tr> </table>
That’s it. No other changes are needed in the
.aspx
file. The code-behind page is almost
identical as well. You will, of course, change the declaration for
the DataList:
protected System.Web.UI.WebControls.DataList DataList1;
The VB.NET declaration is identical except for the final semicolon.
While you are at it, you’ll add declarations for the four radio buttons as well.
protected System.Web.UI.WebControls.RadioButton Vertical; protected System.Web.UI.WebControls.RadioButton Horizontal; protected System.Web.UI.WebControls.RadioButton Col1; protected System.Web.UI.WebControls.RadioButton Col2;
Once again, the VB.NET version of these statements is identical, except for the final semicolon.
The
Page_Load event is slightly different. In
the Repeater example, there was no need to check for a
postback because the page was drawn only
once. This time, you will check for a postback and load the data set
only if IsPostBack is
false
. If IsPostBack is true
,
however, you will check the status of the Radio Buttons, and
you’ll set the RepeatDirection and the
RepeatColumns properties of the
DataList control accordingly. In C#, this is done as follows:
DataList1.RepeatDirection = Vertical.Checked ? RepeatDirection.Vertical : RepeatDirection.Horizontal; DataList1.RepeatColumns = Col1.Checked ? 1 : 2;
The
?
operator in C#
is evaluated as follows: if the condition (Vertical.Checked)
evaluates to true
, then return the first argument
(RepeatDirection.Vertical
); otherwise, return the
second argument (RepeatDirection.Horizontal
). The
returned result is then assigned to the
RepeatDirection
property of the DataList1 control.
Similarly, the second invocation evaluates whether Col1.Checked is
true
, and if so assigns 1 to RepeatColumns;
otherwise, 2 is assigned.
In VB.NET, this is handled by the following code:
DataList1.RepeatDirection = IIf(Vertical.Checked, _ RepeatDirection.Vertical, RepeatDirection.Horizontal) DataList1.RepeatColumns = IIF(Col1.Checked, 1, 2)
The complete Page_Load method for the DataList control example is shown in C# in Example 13-4 and and in VB.NET in Example 13-5.
Example 13-4. C# version of Page_Load for the DataList control example
private void Page_Load(object sender, System.EventArgs e) { if (!Page.IsPostBack) { // connect to the Bugs database string connectionString = "server=YourServer; uid=sa; pwd=YourPasword; database=ProgASPDotNetBugs"; // get records from the Bugs table string commandString = "Select b.BugID, b.Description, p.ProductDescription, "; commandString += "peo.FullName from Bugs b "; commandString += "join lkProduct p on b.Product = p.ProductID "; commandString += "join People peo on b.Reporter = peo.PersonID "; // create the data set command object // and the DataSet SqlDataAdapter dataAdapter = new SqlDataAdapter( commandString, connectionString); DataSet dataSet = new DataSet( ); // fill the data set object dataAdapter.Fill(dataSet,"Bugs"); // Get the one table from the DataSet DataTable dataTable = dataSet.Tables[0]; DataList1.DataSource = dataTable; DataList1.DataBind( ); } else { // set the Repeat direction based on the value // in the radio buttons DataList1.RepeatDirection = Vertical.Checked ? RepeatDirection.Vertical : RepeatDirection.Horizontal; // set the number of columns based on the value // in the radio buttons DataList1.RepeatColumns = Col1.Checked ? 1 : 2; } }
Example 13-5. VB.NET version of Page_Load for the DataList control example
Private Sub Page_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load If Not Page.IsPostBack Then ' connect to the Bugs database Dim connectionString As String = "server=YourServer; uid=sa; " & _ "pwd=YourPasword; database=ProgASPDotNetBugs" ' get records from the Bugs table Dim commandString As String = _ "Select b.BugID, b.Description, p.ProductDescription, " & _ "peo.FullName from Bugs b " & _ "join lkProduct p on b.Product = p.ProductID " & _ "join People peo on b.Reporter = peo.PersonID " ' create the data set command object and the data set Dim dataAdapter As New SqlDataAdapter(commandString, connectionString) Dim dataSet As New DataSet( ) ' fill the data set object dataAdapter.Fill(dataSet, "Bugs") ' Get the one table from the DataSet Dim dataTable As DataTable = dataSet.Tables(0) DataList1.DataSource = dataTable DataList1.DataBind( ) Else ' set the Repeat direction based on the value ' in the radio buttons DataList1.RepeatDirection = IIf(Vertical.Checked, _ RepeatDirection.Vertical, RepeatDirection.Horizontal) ' set the number of columns based on the value ' in the radio buttons DataList1.RepeatColumns = IIf(Col1.Checked, 1, 2) End If End Sub
3.145.87.161