Main menu

ASP.Net 3.5 ListView Control and Book Flip effect

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.

 



kick it on DotNetKicks.com




Aneef Fashir (38 Posts)

Software Architect @ Assette, Sri Lanka


  • sharath

    Hi

    I have seen this sample and looks great. But the problem is you have posted only few lines of code. Where can I get full source code?

  • sharath

    Hi

    I have seen this sample and looks great. But the problem is you have posted only few lines of code. Where can I get full source code?

  • http://www.aneef.net/ Aneef Fashir

    Hi Sharath,

    I have added only the programming part, you can download the javascript files and source files of the bookflip effect from this site http://www.coastworx.com/bookflip.php

    and then use the above code to create the bookflip dynamically :). i’ll create a sample flip and upload soon.

  • http://www.aneef.net Aneef Fashir

    Hi Sharath,

    I have added only the programming part, you can download the javascript files and source files of the bookflip effect from this site http://www.coastworx.com/bookflip.php

    and then use the above code to create the bookflip dynamically :). i’ll create a sample flip and upload soon.

  • sharath

    Thanks aneef

  • sharath

    Thanks aneef

Tags

Archives