ASP. NET mvc3 uses the scroll bar to load data

Loading data with a scroll bar is a popular paging method.

Operation Method: load more data based on the current position of the scroll bar.

There are two main forms.

1: load data while scrolling. Calculate the height of the container at the beginning. load more data when the scroll bar moves to a blank position. Like http://qing.blog.sina.com.cn/tag/%E6%97%B6%E5%B0%9A

2: scroll to the bottom and load more data when the scroll bar moves to the bottom. Similar to "Baidu pictures.

Its advantages: You can use the scroll wheel for paging without clicking a button, so that you can quickly browse the complete information without frequently clicking the paging button. The effect on mobile phones is particularly obvious.

Its disadvantage: it is not very convenient for users to quickly view some data. If users want to view the data on the back, they need to load all the data before they can find the desired data.

Implementation Method: Using ASP. net mvc + jquery framework is easier to achieve this effect (because I have not recently used webform, It is unfamiliar, so I will not show it ugly)

Loading data to the bottom is an example, which is easier to implement.

In the HTML section, div: container controls the container of the scroll bar, and Div: datalist loads the data container. Height: 420px; overflow-Y: auto; style must be added to the container.

JS is mainly used to operate the scroll bar of the iner container to determine whether to remove the bottom.
You can use $ ("# container") [0]. scrolltop + $ ("# container "). height () >=$ ("# container") [0]. scrollheight-10. For details about these attributes, check them on the network,
Note that-10 is mainly used to ensure compatibility with chrome browsers. Different browsers may parse the attributes of the scroll bar. If the list style is too complex, you need to debug it repeatedly.

 1   Function  Add_data (){  2       VaR Scrolltop = $ ("# container") [0 ]. Scrolltop;  3       If (! Complete && Loaded ){  4           If (Scrolltop + $ ("# container"). Height () >=$ ("# container") [0 ]. Scrollheight ){  5   Getdata ();  6   }  7   8   }  9   }  10   11   Function  Getdata (){  12 Loaded =False  ;  13   $. Ajax ({  14 URL: '@ URL. Action ("mainlistpanel", "home ")' ,  15 Type: 'post' ,  16   Data :{  17   Createtime: maxtime,  18   Skipcount: skipcount,  19  Takecount: takecount  20   },  21 Datatype: 'html' ,  22 Timeout: 10000 ,  23 Error: Function () {Alert ('error loading' );},  24 Beforesend: Function  (){  25              //  $ ("# Datalist"). append (" ");  26 $ ("# Box" ). Show ();  27   },  28 Success: Function  (Result ){  29 Loaded = True  ;  30 $ ("# Box"). Hide ();  31               //  $ (". Loading"). Remove ();  32 $ ("# Datalist" ). Append (result );  33 Count ++ ;  34   }  35   });  36 }

View code

The server uses the powerful orderbydescending, skip, and take methods of LINQ to filter out loaded data.

Download source code