i have one html editor and from there we enter content which shows in another asp.net page. so each records can be big if someone enter big content. in every page i am showing single record in a div which is really big and user has to scroll many pages to read
the complete data. so tell me how could i show the each big data in a page where data will load on demand i mean when user scroll then rest of the data will fetch par page wise but my problem is single data is itself a big. so i need concept how could i break
a single data into multiple data virtually and show the partial data in page when user scroll then again i will show few data. please remember i am showing single record per page wise and the single record itself a big which i want load on demand.........Need
concept to accomplish the job the way i want. thanks
here is the url http://www.bba-reman.com/content.aspx?content=Cadillac-CTS-Technical-Help
just see it. it is a single record. how could i divide the single record into multiple pieces then only i can implement infinite scroll pattern. please discuss. thanks
mou_inn
Participant
778 Points
952 Posts
Facing problem for a single big record and infinite scroll
Jul 25, 2011 07:52 AM|LINK
hi,
i have one html editor and from there we enter content which shows in another asp.net page. so each records can be big if someone enter big content. in every page i am showing single record in a div which is really big and user has to scroll many pages to read the complete data. so tell me how could i show the each big data in a page where data will load on demand i mean when user scroll then rest of the data will fetch par page wise but my problem is single data is itself a big. so i need concept how could i break a single data into multiple data virtually and show the partial data in page when user scroll then again i will show few data. please remember i am showing single record per page wise and the single record itself a big which i want load on demand.........Need concept to accomplish the job the way i want. thanks
Gayomard Meh...
Participant
964 Points
241 Posts
Re: Facing problem for a single big record and infinite scroll
Jul 25, 2011 09:37 AM|LINK
I think you will need to use a Gridview with paging...
asteranup
All-Star
30184 Points
4906 Posts
Re: Facing problem for a single big record and infinite scroll
Jul 25, 2011 09:47 AM|LINK
Hi,
You may check this-
http://ajaxian.com/archives/implementing-infinite-scrolling-with-jquery
http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
mou_inn
Participant
778 Points
952 Posts
Re: Facing problem for a single big record and infinite scroll
Jul 25, 2011 11:29 AM|LINK
here is the url http://www.bba-reman.com/content.aspx?content=Cadillac-CTS-Technical-Help
just see it. it is a single record. how could i divide the single record into multiple pieces then only i can implement infinite scroll pattern. please discuss. thanks
BU XI - MSFT
All-Star
22367 Points
2704 Posts
Microsoft
Re: Facing problem for a single big record and infinite scroll
Jul 27, 2011 05:59 AM|LINK
Hello
One option is to use tabs to organize your content. For your reference, http://jqueryui.com/demos/tabs/
And each tab is a category, in your case, may be car makes,
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework
asteranup
All-Star
30184 Points
4906 Posts
Re: Facing problem for a single big record and infinite scroll
Jul 27, 2011 08:50 AM|LINK
Ok,
Check this implementation-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script type="text/javascript"> var index = 0; $(document).ready(function() { getData(index); $("#content").scroll(function() { if (this.scrollHeight - $(this).scrollTop() == $(this).innerHeight()) { getData(index); } }); }); function getData(i) { $.ajax({ type: "POST", contentType: "application/json", data: "{index:" + i + "}", url: "Facing problem for a single big record and infinite scroll.aspx/Get500Charecter", dataType: "json", success: function(data) { $('#content').html($('#content').html() + data.d.note); index = data.d.id; }, error: function(XMLHttpRequest, textStatus, errorThrown) { debugger; } }); } </script> </head> <body> <form id="form1" runat="server"> <div id="content" style="height:100px;width:200px;border:solid 1px red;overflow:auto"> </div> </form> </body> </html>protected void Page_Load(object sender, EventArgs e) { System.Text.StringBuilder str = new System.Text.StringBuilder(); for (int i = 0; i < 10000; i++) { str.Append(" dummy data " + i.ToString()); } Session["data"] = str.ToString(); } [System.Web.Services.WebMethod] public static ComplexData Get500Charecter(int index) { string data = HttpContext.Current.Session["data"].ToString(); ComplexData cdata = new ComplexData(); cdata.id = index + 500; cdata.note = data.Substring(index, 500); return cdata; }Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
mou_inn
Participant
778 Points
952 Posts
Re: Facing problem for a single big record and infinite scroll
Jul 30, 2011 05:26 PM|LINK
onething is missing in your post that is ComplexData cdata = new ComplexData()
you did not mention about ComplexData class structure. so please give me the full code about ComplexData. thanks.
asteranup
All-Star
30184 Points
4906 Posts
Re: Facing problem for a single big record and infinite scroll
Jul 31, 2011 06:07 AM|LINK
Oh..
ComplexData is not complex at all.
public class ComplexData { public int id { get; set; } public string note { get; set; } }Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
mou_inn
Participant
778 Points
952 Posts
Re: Facing problem for a single big record and infinite scroll
Jul 31, 2011 04:25 PM|LINK
thanks