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,在瀏覽器中查看效果。

如下：