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{
width: 250px;
text-align: center;
padding: 2px 0;
margin: 10px 0;
}
.paginationstyle select{
border: 1px solid navy;
margin: 0 15px;
}
.paginationstyle a{ /*Pagination links style*/
padding: 0 5px;
text-decoration: none;
border: 1px solid black;
color: navy;
background-color: white;
}
.paginationstyle a:hover, .paginationstyle a.selected{
color: #000;
background-color: #FEE496;
}
.paginationstyle a.disabled, .paginationstyle a.disabled:hover{
background-color: white;
cursor: default;
color: #929292;
border-color: transparent;
}
.paginationstyle a.imglinks{
border: 0;
padding: 0;
}
.paginationstyle a.imglinks img{
vertical-align: bottom;
border: 0;
}
.paginationstyle a.imglinks a:hover{
background: none;
}
.paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected{
color: #000;
background-color: yellow;
}
.hidepiece
{
height: 98px;
}
</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;" />
<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">
<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.
Image1
Now click on the next. we will see that same image but different text.
Image2
Now click on the link.
Image3