Pagination in ASP. NET using VB.NET

This article explain Paging in ASP. NET web application.
  • 4136
 

This article explain Paging in ASP. NET web application. In this article we see a image and text. Text will be change when we click on the next for pagination. But image will be same. We can creates hyperlink to the text. We can also create hyperlink with image.

Step-1

6 pieces of content, all content are defined inside the div. Now adding following code in head section.

<script type="text/javascript" src="Scripts/virtualpaginate.js">

</script>

<style type="text/css">

  .paginationstyle{

width250px;

text-aligncenter;

padding2px 0;

margin10px 0;

}

.paginationstyle select{

border1px solid navy;

margin0 15px;

}

.paginationstyle a/*Pagination links style*/

padding0 5px;

text-decorationnone;

border1px solid black;

colornavy;

background-colorwhite;

}

 

.paginationstyle a:hover.paginationstyle a.selected{

color#000;

background-color#FEE496;

}

 

.paginationstyle a.disabled.paginationstyle a.disabled:hover{

background-colorwhite;

cursordefault;

color#929292;

border-colortransparent;

}

.paginationstyle a.imglinks{

border0;

padding0;

}

.paginationstyle a.imglinks img{

vertical-alignbottom;

border0;

}

.paginationstyle a.imglinks a:hover{

backgroundnone;

}

.paginationstyle .flatview a:hover.paginationstyle .flatview a.selected{

color#000;

background-coloryellow;

}

    .hidepiece

    {

        height98px;

    }

</style>

 

Step-2

 

Now add the following code in the body section of the page.

 

<div> 

<h3>Demo</h3>

<div id="scriptspaginate2" class="paginationstyle" style="width: 400px"></div>

<div style="width: 450px; border: 1px dashed gray; padding: 10px; background-color: #EEFFAA">

<p class="virtualpage2 hidepiece">

<img src="image/Rohtashimage.jpg" style="width: 50px; height: 61px;" />&nbsp;

    <a href ="http://www.vbdotnetheaven.com/Articles/ArticleListing.aspx?AuthorID=rohatash"target="_blank" >Rohatash Kumar</a></b> <span class="credits">Link for article</span><br>This link will be redirect to the Visual basic article.

   </p>

 

<p class="virtualpage2 hidepiece">

<img src="image/Rohtashimage.jpg" style="width: 47px" />

<b><a href="http://www.c-sharpcorner.com/" target="_blank" >Rohatash Kumar</a></b> <spanclass="credits">Link to c# corner</span><br>

This link will be redirect to the c#corner.com.

</p>

 

<p class="virtualpage2 hidepiece">

<img src="image/Rohtashimage.jpg" style="width: 45px" />

<b><a href="http://www.dbtalks.com/" target="_blank" >Rohatash Kumar</a></b> <spanclass="credits">Link to Data base</span>

<br />

This link will be redirect to the Dbtaks.com.</p>

 

<p class="virtualpage2 hidepiece">

<img src="image/Rohtashimage.jpg" style="width: 45px" />

<b><a href="http://www.interviewcorner.com/" target="_blank" >Rohatash Kumar</a></b> <spanclass="credits">Link to interview corner</span><br>

This link will be redirect to the interview corner.</p>

 

<p class="virtualpage2 hidepiece">

<img src="image/Rohtashimage.jpg" style="width: 45px" />

<b><a href="http://www.longhorncorner.com/" target="_blank">Rohatash Kumar</a></b> <spanclass="credits">Link to longhorn corner</span><br>

    This link will be redirect to the longhorn corner.</p>

 

<p class ="virtualpage2 hidepiece">

<img src="image/Rohtashimage.jpg"style="width: 45px" /></a>

<b><a href="http://www.mindcracker.com/" target="_blank" >Rohatash Kumar</a></b> <spanclass="credits">Link to mindcracker</span><br>

This link will be redirect to the mind cracker.</p>

<br>

 

</div>

<div id="scriptspaginate" class="paginationstyle" style="width: 400px">

&nbsp;<a href="#" rel="previous">Prev</a> <span class="paginateinfo" style="margin: 0 30px;font-weight: bold"></span> <a href="#" rel="next">Next</a>

</div>

 

<script type="text/javascript">

    var newscripts = new virtualpaginate({

        piececlass: "virtualpage2",

        piececontainer: 'p',

        pieces_per_page: 1,

        defaultpage: 0,

        wraparound: false,

        persist: true

    })

newscripts.buildpagination(["scriptspaginate""scriptspaginate2"])

</script>

    </div>

 

Step-3

 

Download .js file from attach zip file and attach it with application.

 

Now run the application and test it.


page1.gif

 

Image1

 

Now click on the next. we will see that same image but different text.

page2.gif

 

 

Image2

 

Now click on the link.

page3.gif 

 

Image3

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.