Question

Is it possible to do the following in listview? if not. please correct me.

    <asp:ListView runat="server" ID="lsit">
    <LayoutTemplate>
        <div id="banner">
            <div id="paginate-slider2" class="banner_nav">
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder1" />
            </div>
            <div id="slider2">
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder2" />
            </div>
            <script src="/scripts/banner.js" type="text/javascript"></script>
        </div>
        <div class="clear"></div>
    </LayoutTemplate>
    <ItemTemplate>
        <a href="#" class="toc">
            <img src="./images/gallery/thumbnails/thumb1.gif" alt="" />
        </a> 
    </ItemTemplate>
    <ItemTemplate>
        <div class="contentdiv banner_sec">
            <div class="con_img">
                <img src="./images/gallery/images/img1.gif" alt="" />
            </div>
            <div class="con_desc">
                <h3>Featured</h3>
                <h5>Lorem ipsum dolor sit amet</h5>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit.
                </p>
                <br />
                <a href="./detail.html" class="buttontwo"><span>Read More</span></a>
            </div>
        </div>
    </ItemTemplate>
</asp:ListView>

Update:
I want to output something like this;

<!-- Home Banner Section -->
<div id="banner">
    <div id="paginate-slider2" class="banner_nav">
        <!-- this should be repeated for each item -->

        <a href="#" class="toc">
            <img src="./images/gallery/thumbnails/thumb1.gif" alt="" />
        </a> 
    </div>
    <div id="slider2">
        <!-- this should be repeated for each item -->
        <div class="contentdiv banner_sec">
            <div class="con_img">
                <img src="./images/gallery/images/img1.gif" alt="" />
            </div>
            <div class="con_desc">
                <h3>Featured</h3>
                <h5>Lorem ipsum dolor sit amet</h5>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit. Nulla sem risus, vestibulum in, volutpat eget, dapibus ac, lectus. Curabitur dolor sapien, hendrerit non, suscipit bibendum, auctor ac, arcu. Vestibulum dapibus. Sed pede lacus, pretium in, condimentum sit amet, mollis dapibus, magna. Ut bibendum dolor nec augue. Ut tempus luctus metus. Sed a velit. Pellentesque at libero elementum ante condimentum sollicitudin. Pellentesque lorem ipsum, semper quis, interdum et, sollicitudin eu, purus. Vivamus fringilla ipsum vel orci.
                </p>
                <br />
                <a href="./detail.html" class="buttontwo"><span>Read More</span></a>
            </div>
        </div>
    </div>
    <script src="/scripts/banner.js" type="text/javascript"></script>
</div>
<div class="clear"></div>

Answer 1

Is it possible to define two item template in asp:ListView?

Yes, it’s possible. Read this post (I’ll post the code here when I get it formatted properly, so it doesn’t get lost).

Credits:

Dino Esposito is an IDesign architect and the author of Programming ASP.NET 3.5 Core Reference. Based in Italy, Dino is a frequent speaker at industry events worldwide. You can reach him at [e-mail] or join his blog at weblogs.asp.net/despos.

Multiple Item Templates

The ListView control generates its markup by looping through the data source and applying the following algorithm. First, it checks whether an item separator is required. If so, it instantiates the template and creates the data item object. The data item object is the container of the item template and carries information about the index of the item in the view and the bound data source. When the item template is instantiated, the ItemCreated event fires. The next step is data binding. After this has completed, the ItemDataBound event is fired.

As you can see, there’s no public event that you can handle that allows programmatically changing the template for each item. You can change the template in the Init or Load page event, but that would be for all bound items. If you handle ItemCreated and set the ItemTemplate property there, the change will affect the next item, but not the item being currently processed. You would need an ItemCreating event, but no such an event is fired by the ListView control. The solution, then, is to create your own ListView control, as in Figure 6.

Figure 6 Firing an ItemCreating Event

namespace Samples.Controls
{
  public class ListViewItemCreatingEventArgs : EventArgs
  {
    private int _dataItemIndex;
    private int _displayIndex;

    public ListViewItemCreatingEventArgs(int dataItemIndex,
                                         int displayIndex) {
      _dataItemIndex = dataItemIndex;
      _displayIndex = displayIndex;
    }

    public int DisplayIndex {
      get { return _displayIndex; }
      set { _displayIndex = value; }
    }

    public int DataItemIndex {
      get { return _dataItemIndex; }
      set { _dataItemIndex = value; }
    }
  }

  public class ListView : System.Web.UI.WebControls.ListView
  {
    public event EventHandler<ListViewItemCreatingEventArgs>
                                               ItemCreating;

    protected override ListViewDataItem CreateDataItem(int
                           dataItemIndex, int displayIndex) {
      // Fire a NEW event: ItemCreating
      if (ItemCreating != null)
        ItemCreating(this, new ListViewItemCreatingEventArgs
                             (dataItemIndex, displayIndex));

      // Call the base method
      return base.CreateDataItem(_dataItemIndex, displayIndex);
    }
  }
}

By overriding the CreateDataItem method, you have a chance to run your code just before the item template is instantiated. The CreateDataItem method is declared protected and virtual in the ListView class. As you can see in Figure 6, the method override is quite simple. You first fire a custom ItemCreating event and then proceed by calling the base method.

The ItemCreating event passes a couple of integers back to the user code—the absolute index of the item in the data source and the page-specific index. For example, for a page size of 10, when the ListView is working on rendering the first item of the second page, dataItemIndex contains 11 items and displayIndex contains 1 item. In order to use the new ItemCreating event, simply declare the method and handler on your custom ListView control, as you can see in the following code:

<x:ListView runat="server" ID="ListView1" 
   ItemPlaceholderID="itemPlaceholder"
   DataSourceID="ObjectDataSource1"
   OnItemCreating="ListView1_ItemCreating">
   <LayoutTemplate>
      <div>
         <asp:PlaceHolder runat="server" ID="itemPlaceholder" /> 
      </div>
   </LayoutTemplate>
</x:ListView>

In your code, you can handle the event like so:

void ListView1_ItemCreating(
     object sender, ListViewItemCreatingEventArgs e)
{
    string url = "standard.ascx";
    if (e.DisplayIndex % DataPager1.PageSize == 0)
        url = "firstItem.ascx";

    ListView1.ItemTemplate = Page.LoadTemplate(url);
}

Here, two different user controls are employed to render the data items. The specific user control is determined by the display index. All items share the same template except the first. Figure 7 shows the page in action.

When you think about the complexity of common real-world pages, this solution appears too simple. More often than not, you need to use different templates based on the content to display. You need to further enhance the custom ListView control to change the item template within the data-binding process. Have a look at the code in Figure 8.

Figure 8 Choosing Template Based on Content

namespace Samples.Controls
{
  public class ListViewItemCreatingEventArgs : EventArgs
  {
    private int _dataItemIndex;
    private int _displayIndex;

    public ListViewItemCreatingEventArgs(int dataItemIndex,
                                         int displayIndex) {
      _dataItemIndex = dataItemIndex;
      _displayIndex = displayIndex;
    }

    public int DisplayIndex {
      get { return _displayIndex; }
      set { _displayIndex = value; }
    }

    public int DataItemIndex {
      get { return _dataItemIndex; }
      set { _dataItemIndex = value; }
    }
  }

  public class ListView : System.Web.UI.WebControls.ListView
  {
    public event EventHandler<ListViewItemCreatingEventArgs>
     ItemCreating;

    private int _displayIndex;
    private bool _shouldInstantiate = false;

    protected override void InstantiateItemTemplate(Control container,
     int displayIndex) {
      if (_shouldInstantiate) {
        base.InstantiateItemTemplate(container, displayIndex);
        _shouldInstantiate = false;
      }
    }

    protected override ListViewDataItem CreateDataItem(int
     dataItemIndex, int displayIndex) {
      // Fire a NEW event: ItemCreating
      if (ItemCreating != null)
        ItemCreating(this, new
          ListViewItemCreatingEventArgs(dataItemIndex,
          displayIndex));

      // Cache for later
      _displayIndex = displayIndex;

      // Call the base method
      return base.CreateDataItem(_dataItemIndex, displayIndex);
    }

    protected override void OnItemCreated(ListViewItemEventArgs e) {
      base.OnItemCreated(e);

      // You can proceed with template instantiation now
      _shouldInstantiate = true;
      InstantiateItemTemplate(e.Item, _displayIndex);
    }
  }
}

The CreateDataItem method fires the ItemCreating event and caches the display index for later use. In addition, the InstantiateItemTemplate method is overridden to delay the actual template instantiation. A private boolean flag is used for that purpose. As mentioned, the ListView starts the data-binding process after instantiating the item template.

In the implementation shown in the code in Figure 8, however, no item template is really instantiated until the ItemCreated event is fired. When the ItemCreated event is raised, the data item object is bound to the ListView item container through the DataItem property. By handling the ItemCreated event in your code, you can decide which item template to use based on the bound data item, as you can see here:

protected override void OnItemCreated(ListViewItemEventArgs e)
{
   base.OnItemCreated(e);

   _shouldInstantiate = true;
   InstantiateItemTemplate(e.Item, _displayIndex);
}

In this case, the base method fires the ItemCreated event to the page. After that, the custom ListView control resets the Boolean flag and invokes the method to instantiate the item template. In the end, the item template is instantiated a bit later than in the built-in ListView control, but you can set the ItemTemplate property for each item programmatically in the ItemCreated event handler after looking at the content of the bound data item (see Figure 9). Figure 10 shows a sample page where a blue template is used for men and a pink template is used for women.

Figure 9 Setting the Item Template

void ListView1_ItemCreated(object sender, ListViewItemEventArgs e)
{
    // Grab a reference to the data item
    ListViewDataItem currentItem = (e.Item as ListViewDataItem);
    Employee emp = (Employee) currentItem.DataItem;
    if (emp == null)
        return;

    // Apply your logic here
    string titleOfCourtesy = emp.TitleOfCourtesy.ToLower();
    string url = "forgentlemen.ascx";
    if (titleOfCourtesy == "ms." || titleOfCourtesy == "mrs.")
        url = "forladies.ascx";

    // Set the item template to use
    Samples.ListView ctl = (sender as Samples.Controls.ListView);
    ctl.ItemTemplate = Page.LoadTemplate(url);
}