ListView ItemTemplate and AlternatingItemTemplate

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.

Listview and DataPager

Listview and Datapager are new controls in ASP .Net 3.5, Listview is similar as Repeater, Datapager can paging your listview for you. As other data-aware controls works, you need data-source control.

                    <asp:ListView ID=”SearchResults” OnItemDataBound=”SearchResultBound” 
                    datasourceid=”KnowledgeEntryDataSource”    runat=”server”>
                        <LayoutTemplate>
                          <table class=”search_grid” cellpadding=”0″ cellspacing=”0″>
                            <tr id=”Tr1″ style=”background-color: #ADD8E6″ runat=”server”>
                                <th class=”col1″ runat=”server”>Date</th>
                                <th class=”col2″ runat=”server”>Author</th>
                                <th class=”col3″ runat=”server”>Title</th>
                            </tr>
                            <tr runat=”server” id=”itemPlaceholder” />
                          </table>
                          <div class=”blockheader” style=”padding:10px;text-align: right;”>
                            <asp:DataPager runat=”server” ID=”ItemDataPager” PageSize=”12″ PagedControlID=”SearchResults”>
                                <Fields>
                            <asp:TemplatePagerField>
                            <PagerTemplate>
                            <b>Page
                            <asp:Label runat=”server” ID=”CurrentPageLabel”
                            Text=”<%# Container.TotalRowCount>0 ? (Container.StartRowIndex / Container.PageSize) + 1 : 0 %>” />
                            of
                            <asp:Label runat=”server” ID=”TotalPagesLabel”
                            Text=”<%# Math.Ceiling ((double)Container.TotalRowCount / Container.PageSize) %>” />
                            (<asp:Label runat=”server” ID=”TotalItemsLabel” Text=”<%# Container.TotalRowCount%>” />
                            records)
                            <br />
                            </b>
                            </PagerTemplate>
                            </asp:TemplatePagerField>
                            <asp:NextPreviousPagerField ButtonType=”Button” ShowFirstPageButton=”true”
                            ShowNextPageButton=”false” ShowPreviousPageButton=”false” />
                            <asp:NumericPagerField PreviousPageText=”< Prev 2″ NextPageText=”Next 2 >”
                            ButtonCount=”10″ />
                            <asp:NextPreviousPagerField ButtonType=”Button” ShowLastPageButton=”true”
                            ShowNextPageButton=”false” ShowPreviousPageButton=”false” />
                            </Fields>
                            </asp:DataPager>
                          </div>
                        </LayoutTemplate>

                        <ItemTemplate>
                           
                                <tr<asp:Literal ID=”Row” runat=”server” />>
                                    <td class=”col1″><asp:Literal ID=”Date” runat=”server” /></td>
                                    <td class=”col2″><asp:Literal ID=”Author” runat=”server” /></td>
                                    <td class=”col3″><asp:Literal ID=”Title” runat=”server” /></td>
                                </tr>
                        </ItemTemplate>
                        <EmptyDataTemplate>
                            <div>
                            <P>Sorry, but there were no search results </P>
                            </div>
                        </EmptyDataTemplate>
                    </asp:ListView>

    <asp:ObjectDataSource ID=”KnowledgeEntryDataSource” typename=”KnowledgeEntryLogic”
    selectmethod=”GetSearchResults” OnSelecting=”KnowledgeEntryDataSource_Selecting”
    runat=”server”>
     <SelectParameters>
        <asp:Parameter Name=”MSSQLQuery” Type=”String” />
    </SelectParameters>
    </asp:ObjectDataSource>

In your code behind class, you define databound and select event

        protected void SearchResultBound(Object sender, ListViewItemEventArgs e)
        {
            ListViewDataItem dataItem = (ListViewDataItem)e.Item;
            KnowledgeEntry entry = dataItem.DataItem as KnowledgeEntry;

            if (e.Item.ItemType == ListViewItemType.DataItem)
            {
                Literal rowLiteral = e.Item.FindControl(“Row”) as Literal;
                Literal dateLiteral = e.Item.FindControl(“Date”) as Literal;
                Literal authorLiteral = e.Item.FindControl(“Author”) as Literal;
                Literal titleLiteral = e.Item.FindControl(“Title”) as Literal;
                if (rowLiteral != null && dateLiteral != null && authorLiteral != null && titleLiteral != null)
                {
                    if (IsFirstSearchResult(entry))
                    {
                        rowLiteral.Text = @” class=”"first”"”;
                    }
                    else if (IsLastSearchResult(entry))
                    {
                        rowLiteral.Text = @” class=”"last”"”;
                    }
                    dateLiteral.Text = PresentDate(entry.Date);
                    authorLiteral.Text = entry.Author;
                    //titleLiteral.Text = @”<a href=”"” + drv["Path"].ToString() + @”"”>” + drv[ "Title"].ToString() + “</a>”;
                    titleLiteral.Text = @”<a href=”"” + entry.Link + @”"”>” + entry.Title + “</a>”;
                }
            }
        }

        protected void KnowledgeEntryDataSource_Selecting(object sender, ObjectDataSourceSelectingEventArgs e)
        {

            e.InputParameters["MSSQLQuery"] = String.Format(“SELECT Title, Rank, Size, Description, Write, Path, Author,Created  FROM SCOPE() WHERE FREETEXT(‘{0}’) –”
                                              , _Query);
        }