pagingbulletedlist.aspx

AJAX 应用 实现页面的无刷新

                <asp:ListItem>mergeAttributes</asp:ListItem>
                <asp:ListItem>move</asp:ListItem>
                <asp:ListItem>moveBy</asp:ListItem>
                <asp:ListItem>moveEnd</asp:ListItem>
                <asp:ListItem>moveRow</asp:ListItem>
                <asp:ListItem>moveStart</asp:ListItem>
                <asp:ListItem>moveTo</asp:ListItem>
                <asp:ListItem>moveToBookmark</asp:ListItem>
                <asp:ListItem>moveToElementText</asp:ListItem>
                <asp:ListItem>moveToPoint</asp:ListItem>
                <asp:ListItem>namedItem</asp:ListItem>
                <asp:ListItem>namedRecordset</asp:ListItem>
                <asp:ListItem>navigate</asp:ListItem>
                <asp:ListItem>nextPage</asp:ListItem>
                <asp:ListItem>normalize</asp:ListItem>
                <asp:ListItem>open</asp:ListItem>
                <asp:ListItem>parentElement</asp:ListItem>
                <asp:ListItem>pasteHTML</asp:ListItem>
                <asp:ListItem>previousPage</asp:ListItem>
                <asp:ListItem>print</asp:ListItem>
                <asp:ListItem>prompt</asp:ListItem>
                <asp:ListItem>queryCommandEnabled</asp:ListItem>
                <asp:ListItem>queryCommandIndeterm</asp:ListItem>
                <asp:ListItem>queryCommandState</asp:ListItem>
                <asp:ListItem>queryCommandSupported</asp:ListItem>
                <asp:ListItem>queryCommandValue</asp:ListItem>
                <asp:ListItem>recalc</asp:ListItem>
                <asp:ListItem>refresh</asp:ListItem>
                <asp:ListItem>releaseCapture</asp:ListItem>
                <asp:ListItem>reload</asp:ListItem>
                <asp:ListItem>remove</asp:ListItem>
                <asp:ListItem>removeAttribute</asp:ListItem>
                <asp:ListItem>removeAttributeNode</asp:ListItem>
                <asp:ListItem>removeBehavior</asp:ListItem>
                <asp:ListItem>removeChild</asp:ListItem>
                <asp:ListItem>removeExpression</asp:ListItem>
                <asp:ListItem>removeNamedItem</asp:ListItem>
                <asp:ListItem>removeNode</asp:ListItem>
                <asp:ListItem>removeRule</asp:ListItem>
                <asp:ListItem>replace</asp:ListItem>
                <asp:ListItem>replaceAdjacentText</asp:ListItem>
                <asp:ListItem>replaceChild</asp:ListItem>
                <asp:ListItem>replaceData</asp:ListItem>
                <asp:ListItem>replaceNode</asp:ListItem>
                <asp:ListItem>reset</asp:ListItem>
                <asp:ListItem>resizeBy</asp:ListItem>
                <asp:ListItem>resizeTo</asp:ListItem>
                <asp:ListItem>scroll</asp:ListItem>
                <asp:ListItem>scrollBy</asp:ListItem>
                <asp:ListItem>scrollIntoView</asp:ListItem>
                <asp:ListItem>scrollTo</asp:ListItem>
                <asp:ListItem>select</asp:ListItem>
                <asp:ListItem>select</asp:ListItem>
                <asp:ListItem>send</asp:ListItem>
                <asp:ListItem>setActive</asp:ListItem>
                <asp:ListItem>setAttribute</asp:ListItem>
                <asp:ListItem>setAttributeNode</asp:ListItem>
                <asp:ListItem>setCapture</asp:ListItem>
                <asp:ListItem>setData</asp:ListItem>
                <asp:ListItem>setEndPoint</asp:ListItem>
                <asp:ListItem>setExpression</asp:ListItem>
                <asp:ListItem>setInterval</asp:ListItem>
                <asp:ListItem>setNamedItem</asp:ListItem>
                <asp:ListItem>setRequestHeader</asp:ListItem>
                <asp:ListItem>setTimeout</asp:ListItem>
                <asp:ListItem>show</asp:ListItem>
                <asp:ListItem>showHelp</asp:ListItem>
                <asp:ListItem>showModalDialog</asp:ListItem>
                <asp:ListItem>showModelessDialog</asp:ListItem>
                <asp:ListItem>splitText</asp:ListItem>
                <asp:ListItem>start</asp:ListItem>
                <asp:ListItem>stop</asp:ListItem>
                <asp:ListItem>submit</asp:ListItem>
                <asp:ListItem>substringData</asp:ListItem>
                <asp:ListItem>swapNode</asp:ListItem>
                <asp:ListItem>tags</asp:ListItem>
                <asp:ListItem>taintEnabled</asp:ListItem>
                <asp:ListItem>urns</asp:ListItem>
                <asp:ListItem>write</asp:ListItem>
                <asp:ListItem>writeln</asp:ListItem>
            </asp:BulletedList>
            <ajaxToolkit:PagingBulletedListExtender ID="PagingBulletedListExtender1" runat="server"
                BehaviorID="PagingBulletedListBehavior1"
                TargetControlID="BulletedList1"
                ClientSort="true"
                IndexSize="1"
                Separator=" - "
                SelectIndexCssClass="selectIndex"
                UnselectIndexCssClass="unselectIndex" /> 
        </div>
        <input id="radioOption1" name="radioOption" type="radio" 
            value="1" onclick="onChangeSelectOption()" />
        <label for="radioOption1">Index size 1</label>
        <input id="radioOption3" name="radioOption" type="radio" 
            value="3" onclick="onChangeSelectOption()" />
        <label for="radioOption3">10 Items per page</label><br />
        <input id="radioOption2" name="radioOption" type="radio" 
            value="2" onclick="onChangeSelectOption()" />
        <label for="radioOption2">Index size 2</label>
        <input id="radioOption4" name="radioOption" type="radio" 
            value="4" onclick="onChangeSelectOption()" />
        <label for="radioOption4">20 Items per page</label> <br />
        <input type="checkbox" id="clientSort" 
            onclick="onChangeClientSort()" />
        <label for="clientSort">Sort</label>
    </div>
    <div class="demobottom"></div>
    
    <asp:Panel ID="Description_HeaderPanel" runat="server" Style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Description_ToggleImage" runat="server" ImageUrl="~/images/collapse.jpg" AlternateText="collapse" />
            PagingBulletedList Description
        </div>
    </asp:Panel>
    <asp:Panel ID="Description_ContentPanel" runat="server" Style="overflow: hidden;">
        <p>
            PagingBulletedList is an ASP.NET AJAX extender that can be attached to an ASP.NET BulletedList
            control and provide client-side sorted paging.  It is very flexible and lets you specify
            either the number of characters used in the heading indices or the maximum number of items
            to display per index.  If the input is not sorted (either on the server or client), it will
            generated more header indices but still function appropriately.
        </p>
    </asp:Panel>
    
    <asp:Panel ID="Properties_HeaderPanel" runat="server" Style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Properties_ToggleImage" runat="server" ImageUrl="~/images/expand.jpg" AlternateText="expand" />
            PagingBulletedList Properties
        </div>
    </asp:Panel>
    <asp:Panel ID="Properties_ContentPanel" runat="server" Style="overflow: hidden;" Height="0px">
        <p>
            The control above is initialized with this code. The <em>italic</em> properties
            are optional:
        </p>
<pre>&lt;ajaxToolkit:PagingBulletedListExtender ID="PBLE1" runat="server"
    TargetControlID="BulletedList1" 
    <em>ClientSort</em>="true"
    <em>IndexSize</em>="1"
    <em>MaxItemPerPage</em>="20"
    <em>Separator</em>=" - "
    <em>SelectIndexCssClass</em>="selectIndex"
    <em>UnselectIndexCssClass</em>="unSelectIndex" /&gt;</pre>
        <ul>
            <li><strong>TargetControlID</strong> - The ID of the BulletedList to page</li>
            <li><strong>ClientSort</strong> - Whether or not the items should be sorted client-side</li>
            <li><strong>IndexSize</strong> - Number of characters in the index headings (ignored if MaxItemPerPage is set)</li>
            <li><strong>MaxItemPerPage</strong> - Maximum number of items per page (ignores the IndexSize property)</li>
            <li><strong>Separator</strong> - Separator text to be placed between indices</li>
            <li><strong>SelectIndexCssClass</strong> - CSS class for the selected index.</li>
            <li><strong>UnselectIndexCssClass</strong> - CSS class for indices that aren't selected</li>
        </ul>
    </asp:Panel>
    
    <ajaxToolkit:CollapsiblePanelExtender ID="cpeDescription" runat="Server"
        TargetControlID="Description_ContentPanel"
        ExpandControlID="Description_HeaderPanel"
        CollapseControlID="Description_HeaderPanel"
        Collapsed="False"
        ImageControlID="Description_ToggleImage" />
    <ajaxToolkit:CollapsiblePanelExtender ID="cpeProperties" runat="Server"
        TargetControlID="Properties_ContentPanel"
        ExpandControlID="Properties_HeaderPanel"
        CollapseControlID="Properties_HeaderPanel"
        Collapsed="True"
        ImageControlID="Properties_ToggleImage"  />
</asp:Content>