Tags

The ASP.NET 3.5 ListView server control provides an ItemTemplate and an AlternatingItemTemplate.  Only the ItemTemplate is required for defining each row’s content.  The AlternatingItemTemplate can be used to define row content for odd numbered rows, however quite often the even and odd rows are identical with the exception that a different CSS class definition needs to be used, so to provide a different visible experience to the user.  Rather than duplicate the bulk of the ItemTemplate into the AlternatingItemTemplate, one can provide inline code to examine the container’s row number and return a specific even or odd CSS class name, illustrated as follows:

   1:  <asp:ListView ID="listViewSort" 
   2:      DataSourceID="ObjMenu"
   3:      DataKeyNames="Name"
   4:      runat="server">
   5:      <LayoutTemplate>
   6:          <table runat="server"
   7:              class="listViewGrid"
   8:              cellspacing="0"
   9:              border="0">
  10:  
  11:              <tr runat="server" id="itemPlaceholder" />
  12:  
  13:          </table>    
  14:      </LayoutTemplate>
  15:      <ItemTemplate>
  16:          <tr class="<%# ((ListViewDataItem)Container).DisplayIndex % 2 == 0 ? "itemRow" : "altItemRow" %>">
  17:              <td align="left" style="width: 200px;">
  18:                  <asp:Label runat="server"
  19:                      Text=’<%# Eval("Name") %>’ />
  20:              </td>
  21:              <td align="right" style="width: 100px;">   
  22:                  <asp:Label runat="server"
  23:                      Text=’<%# Eval("Price") %>’ />
  24:              </td>
  25:              <td align="left" style="width: 400px;">
  26:                  <asp:Label runat="server"
  27:                      Text=’<%# Eval("Description") %>’ />
  28:              </td>
  29:              <td align="right" style="width: 100px;">
  30:                  <asp:Label runat="server"
  31:                      Text=’<%# Eval("Calories") %>’ />
  32:              </td>
  33:          </tr>
  34:      </ItemTemplate>
  35:  </asp:ListView>

 

 

If the inline processing is more complicated than one would prefer for inline code, then one can invoke a protected web page method to accomplish similar or more complicated tasks, illustrated as follows:

   1:  <asp:ListView ID="listViewSort" 
   2:      DataSourceID="ObjMenu"
   3:      DataKeyNames="Name"
   4:      runat="server">
   5:      <LayoutTemplate>
   6:          <table runat="server"
   7:              class="listViewGrid"
   8:              cellspacing="0"
   9:              border="0">
  10:  
  11:              <tr runat="server" id="itemPlaceholder" />
  12:  
  13:          </table>
  14:      </LayoutTemplate>
  15:      <ItemTemplate>
  16:          <tr class="<%# GetCssName(Container) %>">
  17:              <td align="left" style="width: 200px;">
  18:                  <asp:Label runat="server"
  19:                      Text=’<%# Eval("Name") %>’ />
  20:              </td>
  21:              <td align="right" style="width: 100px;">   
  22:                  <asp:Label runat="server"
  23:                      Text=’<%# Eval("Price") %>’ />
  24:              </td>
  25:              <td align="left" style="width: 400px;">
  26:                  <asp:Label runat="server"
  27:                      Text=’<%# Eval("Description") %>’ />
  28:              </td>
  29:              <td align="right" style="width: 100px;">
  30:                  <asp:Label runat="server"
  31:                      Text=’<%# Eval("Calories") %>’ />
  32:              </td>
  33:          </tr>
  34:      </ItemTemplate>
  35:  </asp:ListView>

 

The protected web page method in turn can provide simple or more complex logic.  In this illustration, the same logic is provided as the inline code example:

   1:  protected string GetCssName(object container)
   2:  {
   3:      if (container != null)
   4:      {
   5:          if (container.GetType() == typeof(ListViewDataItem))
   6:          {
   7:              if ((((ListViewDataItem)container).DisplayIndex % 2) == 0)
   8:              {
   9:                  return "itemRow";
  10:              }
  11:              else
  12:              {
  13:                  return "altItemRow";
  14:              }
  15:          }
  16:      }
  17:      return null;
  18:  }

 

 

While the ListView server control AlternatingItemTemplate is quite useful, its use should be limited to instances where there is truly differing content requirements between even and odd numbered rows.  The above illustrations also works equally as well with my previously posted ListViewSort custom control.

Advertisements