AJAX ControlToolkit学习日志-PagingBulletedListExtender(19)

         PagingBulletedListExtender控件用于对BulletedList服务端控件进行扩展，使其具有排序的功能。

下面看一个示例：

1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project工程项目，命名为PagingBulletedListExtender1。

2)在页面上添加一个BulletedList控件，并对其添加一些ListItem。

3)然后在页面上拖放一个PagingBulletedListExtender控件，提供BulletedList排序的功能。

代码如下：

1          < cc1:PagingBulletedListExtender  ID ="PagingBulletedListExtender1"  BehaviorID ="PagingBulletedListBehavior1"  TargetControlID ="BulletedList1"  ClientSort ="true"  IndexSize ="1"  MaxItemPerPage ="20"  runat ="server" >
2          </ cc1:PagingBulletedListExtender >
3

属性说明：

      BehaviorID：该控件在客户端的标识号。
      TargetControlID：该控件要关联的BulletedList控件。
      ClientSort：该控件是否允许BulletedList在客户端进行排序。
      IndexSize：在BulletedList中索引项的字符个数。
      MaxItemPerPage：BulletedList中显示的每页的最大项数。
      
4)然后再添加一些Radio和CheckBox，对控件进行不同的控制。

代码如下：

 1          < input  id ="radioOption1"  name ="radioOption"  type ="radio"  
 2             value ="1"  onclick ="onChangeSelectOption()"   />
 3          < label  for ="radioOption1" > Index size 1 </ label >
 4          < input  id ="radioOption3"  name ="radioOption"  type ="radio"  
 5             value ="3"  onclick ="onChangeSelectOption()"   />
 6          < label  for ="radioOption3" > 10 Items per page </ label >< br  />
 7          < input  id ="radioOption2"  name ="radioOption"  type ="radio"  
 8             value ="2"  onclick ="onChangeSelectOption()"   />
 9          < label  for ="radioOption2" > Index size 2 </ label >
10          < input  id ="radioOption4"  name ="radioOption"  type ="radio"  
11             value ="4"  onclick ="onChangeSelectOption()"   />
12          < label  for ="radioOption4" > 20 Items per page </ label >   < br  />
13          < input  type ="checkbox"  id ="clientSort"  
14             onclick ="onChangeClientSort()"   />
15          < label  for ="clientSort" > Sort </ label >

5)最后在页面中添加客户端的脚本代码，用于相应客户端的操作。

代码如下：

 1          var  b1;
 2         
 3          function  pageLoad()
 4          {
 5            b1=$find('PagingBulletedListBehavior1');
 6            if(b1.get_IndexSize()==1)   $get('radioOption1').checked=true;
 7            if(b1.get_IndexSize()==2)   $get('radioOption2').checked=true;
 8            if(b1.get_MaxItemPerPage()==10)   $get('radioOption3').checked=true;
 9            if(b1.get_MaxItemPerPage()==20)   $get('radioOption4').checked=true;
10            $get('clientSort').checked=b1.get_ClientSort();
11        }
12         
13          function  onChangeSelectOption()
14          {
15            if($get('radioOption1').checked)
16            {
17                b1.set_IndexSize(1);
18                b1.set_MaxItemPerPage(null);
19            }
20            if($get('radioOption2').checked)
21            {
22                b1.set_IndexSize(2);
23                b1.set_MaxItemPerPage(null);
24            }
25            if($get('radioOption3').checked)
26            {
27                b1.set_MaxItemPerPage(10);
28            }
29            if($get('radioOption4').checked)
30            {
31                b1.set_MaxItemPerPage(20);
32            }
33        }
34         
35          function  onChangeClientSort()
36          {
37            b1.set_ClientSort($get('clientSort').checked);
38        }

6)按下CTRL+F5,在浏览器中查看效果。

效果图如下：