WorldofASP.NET : ASP.NET Directory, Tutorial, Hosting, and Source Code
You are 1 of 245 users


Simplifying ASP.NET ListView Control Templates

Blogger : Dan Wahlins WebLog
All posts : All posts by Dan Wahlins WebLog
Category : ASP.NET
Blogged date : 2008 Feb 16

I've been working with the new ListView control in ASP.NET 3.5 combining it with LINQ and Lambda expressions and was finding myself duplicating a lot of code between ItemTemplate and AlternatingItemTemplate templates (I'll be posting the sample application that demonstrates using LINQ, Lambdas and Stored Procedures soon).  The AlternatingItemTemplate contained the same code as the ItemTemplate except for a CSS class added to the first <tr> element to change the background color.  Here's an example of both templates that were used initially:

<ItemTemplate>
    <tr class="even">
        <td class="tdControls">
            <asp:LinkButton ID="EditButton" CommandName="Edit" runat="server" 
Text="Edit"></asp:LinkButton> <asp:LinkButton ID="DeleteButton"
OnClientClick="return confirm('Delete Record?');"
CommandName="Delete" CommandArgument='<%# Eval("CustomerID")%>'
runat="server" Text="Delete"></asp:LinkButton> </td> <td> <%# Eval("CustomerID") %> </td> <td> <%# Eval("CompanyName") %> </td> <td> <%# Eval("ContactName") %> </td> <td> <%# Eval("ContactTitle") %> </td> <td> <%# Eval("Address") %> </td> <td> <%# Eval("City") %> </td> <td> <%# Eval("Country") %> </td> <td> <asp:LinkButton ID="lbOrders" runat="server" Text="Orders"
CommandName="ViewOrders"
CommandArgument='<%# Eval("CustomerID") %>' /> </td> </tr> <tr id="trOrders" runat="server" visible="false"> <td>&nbsp;</td> <td colspan="8"> <asp:GridView id="gvOrders" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="Solid"
BorderWidth="1px" CellPadding="3" ForeColor="Black" GridLines="Vertical" Width="500px" EnableViewState="false"> <FooterStyle BackColor="#CCCCCC" /> <Columns> <asp:BoundField DataField="OrderID" HeaderText="OrderID" SortExpression="OrderID" /> <asp:BoundField DataField="OrderDate" HeaderText="OrderDate" SortExpression="OrderDate" HtmlEncode="false"
DataFormatString="{0:d}" /> <asp:BoundField DataField="RequiredDate"
HeaderText="RequiredDate" SortExpression="RequiredDate" HtmlEncode="false"
DataFormatString="{0:d}" /> <asp:BoundField DataField="ShippedDate"
HeaderText="ShippedDate" SortExpression="ShippedDate" HtmlEncode="false"
DataFormatString="{0:d}" /> </Columns> <AlternatingRowStyle BackColor="#eaeaea" /> </asp:GridView> </td> </tr> </ItemTemplate> <AlternatingItemTemplate> <tr class="odd"> <td class="tdControls"> <asp:LinkButton ID="EditButton" CommandName="Edit" runat="server"
Text="Edit"></asp:LinkButton> <asp:LinkButton ID="DeleteButton"
OnClientClick="return confirm('Delete Record?');"
CommandName="Delete" CommandArgument='<%# Eval("CustomerID")%>'
runat="server" Text="Delete"></asp:LinkButton> </td> <td> <%# Eval("CustomerID") %> </td> <td> <%# Eval("CompanyName") %> </td> <td> <%# Eval("ContactName") %> </td> <td> <%# Eval("ContactTitle") %> </td> <td> <%# Eval("Address") %> </td> <td> <%# Eval("City") %> </td> <td> <%# Eval("Country") %> </td> <td> <asp:LinkButton ID="lbOrders" runat="server" Text="Orders"
CommandName="ViewOrders"
CommandArgument='<%# Eval("CustomerID") %>' /> </td> </tr> <tr id="trOrders" runat="server" visible="false"> <td>&nbsp;</td> <td colspan="8"> <asp:GridView id="gvOrders" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="Solid"
BorderWidth="1px" CellPadding="3" ForeColor="Black" GridLines="Vertical" Width="500px" EnableViewState="false"> <FooterStyle BackColor="#CCCCCC" /> <Columns> <asp:BoundField DataField="OrderID" HeaderText="OrderID" SortExpression="OrderID" /> <asp:BoundField DataField="OrderDate" HeaderText="OrderDate" SortExpression="OrderDate" HtmlEncode="false"
DataFormatString="{0:d}" /> <asp:BoundField DataField="RequiredDate"
HeaderText="RequiredDate" SortExpression="RequiredDate" HtmlEncode="false"
DataFormatString="{0:d}" /> <asp:BoundField DataField="ShippedDate"
HeaderText="ShippedDate" SortExpression="ShippedDate" HtmlEncode="false"
DataFormatString="{0:d}" /> </Columns> <AlternatingRowStyle BackColor="#eaeaea" /> </asp:GridView> </td> </tr> </AlternatingItemTemplate>


It seemed like a waste (and a maintenance headache) to have both templates duplicating the same code while only needing background color changes so I decided to adjust it by adding a little code into the first <tr> tag to dynamically assign the CSS class based upon odd or even rows. It calls the ListViewDataItem class's DataItemIndex property and applies a modulus operation to it.  This isn't anything new of course (I've done the same type of thing for years with GridView and DataGrid controls), but it's a nice trick that can save a lot of duplicated code if you haven't seen it.


<ItemTemplate>
    <tr class='<%# (Container.DataItemIndex % 2 == 0)?"even":"odd" %>'>    
<td>
<asp:LinkButton ID="EditButton" CommandName="Edit" runat="server"
Text="Edit"></asp:LinkButton> <asp:LinkButton ID="DeleteButton"
OnClientClick="return confirm('Delete Record?');"
CommandName="Delete" CommandArgument='<%# Eval("CustomerID")%>'
runat="server" Text="Delete"></asp:LinkButton> </td> <td> <%# Eval("CustomerID") %> </td> <td> <%# Eval("CompanyName") %> </td> <td> <%# Eval("ContactName") %> </td> <td> <%# Eval("ContactTitle") %> </td> <td> <%# Eval("Address") %> </td> <td> <%# Eval("City") %> </td> <td> <%# Eval("Country") %> </td> <td> <asp:LinkButton ID="lbOrders" runat="server" Text="Orders"
CommandName="ViewOrders"
CommandArgument='<%# Eval("CustomerID") %>' /> </td> </tr> <tr id="trOrders" runat="server" visible="false"> <td>&nbsp;</td> <td colspan="8"> <asp:GridView id="gvOrders" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="Solid"
BorderWidth="1px" CellPadding="3" ForeColor="Black" GridLines="Vertical" Width="500px" EnableViewState="false"> <FooterStyle BackColor="#CCCCCC" /> <Columns> <asp:BoundField DataField="OrderID" HeaderText="OrderID" SortExpression="OrderID" /> <asp:BoundField DataField="OrderDate" HeaderText="OrderDate" SortExpression="OrderDate" HtmlEncode="false"
DataFormatString="{0:d}" /> <asp:BoundField DataField="RequiredDate"
HeaderText="RequiredDate" SortExpression="RequiredDate" HtmlEncode="false"
DataFormatString="{0:d}" /> <asp:BoundField DataField="ShippedDate"
HeaderText="ShippedDate" SortExpression="ShippedDate" HtmlEncode="false"
DataFormatString="{0:d}" /> </Columns> <AlternatingRowStyle BackColor="#eaeaea" /> </asp:GridView> </td> </tr> </ItemTemplate>
del.icio.us Tags: ASP.NET,ListView,Templates

Read comments or post a reply to : Simplifying ASP.NET ListView Control Templates
Page 716 of 1924
Next | Last

.NET News Categories








Legend : - Within 3 Days - Within 6 Days - Within 9 Days

Home | Add Resources | Sponsored Listings | Advertise with Us | SiteMap 1 | SiteMap 2 | Link To Us | Contact Us
© 2002-2008 Worldofasp.net ASP.NET Directory, Hosting and Tutorials | All rights reserved
Our Partners : ASP.NET Web Hosting | Windows Web Hosting | ASP.NET Hosting | Phone Card | PHP Directory | Bangkok Hotels |Calling Card