Aneef.Net

one of the coolest control in ASP.Net 3.5 is its Listview Control. its too CSS friendly, and we can use it to achieve many great content presentations. if you go to scottgu’s blog you can find some good articles on how to use the listview control.

recently I did such an implementation. its using the javascript bookflip. a great work by Will (very kind of him to share this to the world). I used the his code, and ListView to achieve a dynamic bookflip.  apart from the javascript changes,  here is the change I did for the Listview markup.

 <asp:ListView id="ImageFlip" runat="server" ItemPlaceholderID="ItemContainer">
   <LayoutTemplate>
      <div id="myBook" style="width: <%# flipWidth*2 %>px; height:

 <%# flipHeight %>px; position: relative; z-index: 5;">
        <asp:PlaceHolder ID="ItemContainer"  runat="server" />
        <div style="border: 0px solid #ddd;
    text-align: center;
    padding-top: 100px;
    margin: 0px;
    height: 0px;
    text-align:inherit;
    background-color: #ffffff;
 color: #cf0000;vertical-align:bottom" Name="Back" > 

<img src="spongebob300/bk.jpg"  border="0" usemap="#Map" />
</div>

      </div >
   </LayoutTemplate>
   <ItemTemplate>

   <div style="background:#ffffff ;color:#ffffff;

 cursor:url(ajax/zoom-in.cur),auto; z-index:-<%#Eval("PAGENO") %>;" 

name="Page <%#Eval("PAGENO") %>" >
    <a href="Javascript:getFullImage(<%#Eval("ID") %>)" >

<img src="<%#Eval("FlipImage") %>" alt="Page <%#Eval("PAGENO") %>" 

  border="0" style="cursor:url(ajax/zoom-in.cur),auto;" /></a>
    </div>
   </ItemTemplate>
   </asp:ListView>

And the Data Retrieval is just as simple as the following 3 lines:

DataTable dt = db.getFlipPage(catid);

ImageFlip.DataSource = dt;

ImageFlip.DataBind();

And that’s all. very easy isn’t it. for the real implementation of this go to www.catalogues4u.com.au and click on a catalogue.In that site I have also implemented a carousel using Listview.  hope it helps.

Popularity: 13% [?]