cascadingdropdown.aspx

AJAX 应用 实现页面的无刷新

<%@ Page
    Language="C#"
    CodeFile="CascadingDropDown.aspx.cs"
    Inherits="Automated_CascadingDropDown"
    Title="CascadingDropDown Tests"
    MasterPageFile="~/Default.master"
    EnableEventValidation="false" %>
    

<script runat="server">
        [System.Web.Services.WebMethod]
        [System.Web.Script.Services.ScriptMethod]
        public static AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents_PageMethod(string knownCategoryValues, string category)
        {
            AjaxControlToolkit.CascadingDropDownNameValue[] values = new CarsService().GetDropDownContents(knownCategoryValues, category);

            if (1 < values.Length)
            {
                values[1].isDefaultValue = true;
            }
            return values;
        }

        [System.Web.Services.WebMethod]
        [System.Web.Script.Services.ScriptMethod]
        public static AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContentsWithContext(string knownCategoryValues, string category, string contextKey)
        {
            return new CascadingDropDownNameValue[] { new CascadingDropDownNameValue(contextKey, contextKey) };
        }
</script>

<asp:Content ID="Content" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <asp:DropDownList ID="DropDownList1" runat="server" Width="170" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" /><br />
    <asp:DropDownList ID="DropDownList2" runat="server" Width="170" /><br />
    <asp:DropDownList ID="DropDownList3" runat="server" Width="170" /><br />
    <asp:DropDownList ID="DropDownList3b" runat="server" Width="170" /><br />
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1" Category="Make"  PromptText="Please select a make"  ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" PromptValue="PromptValue"/>
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDown5" runat="server" TargetControlID="DropDownList2" Category="Model" PromptText="Please select a model" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList1" />
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDown6" runat="server" TargetControlID="DropDownList3" Category="Color" PromptText="Please select a color" ServiceMethod="GetDropDownContents_PageMethod" ParentControlID="DropDownList2" />
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDown7" runat="server" TargetControlID="DropDownList3b" Category="Color" PromptText="Please select a color" ServiceMethod="GetDropDownContents_PageMethod" ParentControlID="DropDownList2"/>
    
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
    <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label><br />
    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />

    <br />

    BMW:<asp:DropDownList ID="DropDownList4" runat="server" Width="170" /><br />
    3 Series:<asp:DropDownList ID="DropDownList5" runat="server" Width="170" /><br />
    RacingBlue: <asp:DropDownList ID="DropDownList6" runat="server" Width="170" /><br />
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDownx" runat="server"  TargetControlID="DropDownList4" Category="Make"  PromptText="Please select a make"  ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" SelectedValue="BMW (value)" />
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDowny" runat="server" TargetControlID="DropDownList5" Category="Model" PromptText="Please select a model" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList4" SelectedValue="3 series (value)"/>
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDownz" runat="server" TargetControlID="DropDownList6" Category="Color" PromptText="Please select a color" ServiceMethod="GetDropDownContents_PageMethod" ParentControlID="DropDownList5" SelectedValue="Racing Blue (value)" />
    

    <br />

    AutoPostBack: <asp:DropDownList ID="DropDownList7" runat="server" Width="170" AutoPostBack="true" OnSelectedIndexChanged="DropDownList7_SelectedIndexChanged" /><br />
    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="DropDownList7" Category="Make" LoadingText="[Loading makes...]" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" />

    <br />
    
    ContextKey: <asp:DropDownList ID="contextKeyDropDown" runat="server" Width="170" /><br />
    <ajaxToolkit:CascadingDropDown ID="contextKeyExtender" runat="server"
        TargetControlID="contextKeyDropDown"
        Category="Make"
        ServiceMethod="GetDropDownContentsWithContext"
        ContextKey="Context..." />

    <br />

    Default value: <asp:DropDownList ID="DropDownList8" runat="server" Width="170" /> <br />
    <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDown4" runat="server" TargetControlID="DropDownList8" Category="Make" PromptText="Please select a make" LoadingText="[Loading makes...]" ServiceMethod="GetDropDownContents_PageMethod" />
    <br />
    <br />
    &nbsp;Cascading Defaults (* indicates default):<br />
    Make:<asp:DropDownList ID="cascadingDefaultMakeDropDown" runat="server" Width="170" /><br />
    Model:<asp:DropDownList ID="cascadingDefaultModelDropDown" runat="server" Width="170" /><br />
    Color:
    <asp:DropDownList ID="cascadingDefaultColorDropDown" runat="server" Width="170" /><br />
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server"  TargetControlID="cascadingDefaultMakeDropDown" Category="Make"  PromptText="Please select a make"  ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContentsWithDefaults" />
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDown8" runat="server" TargetControlID="cascadingDefaultModelDropDown" Category="Model" PromptText="Please select a model" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContentsWithDefaults" ParentControlID="cascadingDefaultMakeDropDown"/>
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDown9" runat="server" TargetControlID="cascadingDefaultColorDropDown" Category="Color" PromptText="Please select a color" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContentsWithDefaults" ParentControlID="cascadingDefaultModelDropDown" />
    <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label><br />

    <div style="display:none">
        <asp:DropDownList ID="DropDownListH" runat="server" />
        <ajaxToolkit:CascadingDropDown ID="CascadingDropDownH" runat="server" TargetControlID="DropDownListH" Category="Make" PromptText="Please select a make" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" SelectedValue="BMW (value)" />
    </div>

    <br /><br />

    <asp:DropDownList ID="DropDownListI" runat="server" />
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDownI" runat="server" TargetControlID="DropDownListI" Category="Make" PromptText="Please select a make" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" SelectedValue="Acura" /> <br />
    <asp:Label ID="Label5" runat="server" Text="Label"></asp:Label>
    <br /><br />
    Auto Select First Item (no prompt):
    <asp:DropDownList ID="DropDownList9" runat="server" Width="170" /><br /><asp:Button runat="server" ID="Button2" Text="Button2" OnClick="Button2_Click" />
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDown10" runat="server" TargetControlID="DropDownList9" Category="Make" LoadingText="[Loading makes...]" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" />
    <asp:Label ID="Label7" runat="server" Text="Label"></asp:Label>

    <br />
    <br />
    Empty Text & Value:<br />
    Make:<asp:DropDownList ID="emptyTextMakeDropDown" runat="server" Width="170" /><br />
    Model:<asp:DropDownList ID="emptyTextModelDropDown" runat="server" Width="170" /><br />
    Color:<asp:DropDownList ID="emptyTextColorDropDown" runat="server" Width="170" /><br />
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDown13" runat="server"  TargetControlID="emptyTextMakeDropDown" Category="Make"  PromptText="Please select a make"  ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContentsWithDefaults" LoadingText="Loading..." EmptyText="No choices available"  EmptyValue="-1" PromptValue="-2" />
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDown14" runat="server" TargetControlID="emptyTextModelDropDown" Category="Model" PromptText="Please select a model" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContentsWithDefaults" ParentControlID="emptyTextMakeDropDown" LoadingText="Loading..." EmptyText="No choices available" EmptyValue="-1" PromptValue="-2" />
    <ajaxToolkit:CascadingDropDown ID="CascadingDropDown15" runat="server" TargetControlID="emptyTextColorDropDown" Category="Color" PromptText="Please select a color" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContentsWithDefaults" ParentControlID="emptyTextModelDropDown" LoadingText="Loading..." EmptyText="No choices available" EmptyValue="-1" PromptValue="-2"  />

    <script type="text/javascript">
        // (c) Copyright Microsoft Corporation.
        // This source is subject to the Microsoft Permissive License.
        // See http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx.
        // All other rights reserved.

        // Script objects that should be loaded before we run
        var typeDependencies = ['AjaxControlToolkit.CascadingDropDownBehavior'];

        // Test Harness
        var testHarness = null;

        // Controls in the test page
        var drop1 = null;
        var drop2 = null;
        var drop3 = null;
        var drop3b = null;
        var drop4 = null;
        var drop5 = null;
        var drop6 = null;
        var drop7 = null;
        var dropContext = null;
        var drop8 = null;
        var drop9 = null;
        var dropH = null;
        var dropI = null;
        var btn = null;
        var btn2 = null;
        var label = null;
        var label2 = null;
        var label3 = null;
        var label4 = null;
        var label5 = null;
        var label7 = null;
        var emptyTextMakeDropDown = null;
        var emptyTextModelDropDown = null;
        var emptyTextColorDropDown = null;

        // Check if the supplied list of drop downs are enabled
        function checkLoaded() {
            var args = arguments;
            return function() {
                for (var i = 0; i < args.length; i++) {
                    if (args[i].disabled) {
                        return false;
                    }
                }
                return true;
            }
        }

        // Ensure the dropdown is properly enabled
        function checkEnabled(dropdown)
        {
            testHarness.assertTrue(!dropdown.disabled, "Drop down '" + dropdown.id + "' should be enabled");
        }

        // Ensure the dropdown is disabled
        function checkDisabled(dropdown)
        {
            testHarness.assertTrue(dropdown.disabled, "Drop down '" + dropdown.id + "' should be disabled");
        }

        // Ensure the dropdown contains the values
        // specified by the rest of the argument list
        function checkContainsValues(dropdown)
        {
            testHarness.assertEqual(dropdown.options.length, arguments.length - 1, "Drop down '" + dropdown.id + "' does not have exactly " + (arguments.length - 1) + " options, it has " + dropdown.options.length);
            if (dropdown.options.length == arguments.length - 1)
            {
                for (i = 1; i < arguments.length; i++)
                {
                    testHarness.assertEqual(dropdown.options[i - 1].value, arguments[i], "Drop down '" + dropdown.id + "'s option " + (i - 1) + " has value '" + dropdown.options[i - 1].value + "' instead of expected value '" + arguments[i] + "'");
                }
            }
        }

        function checkSelected(dropdown, val) {
            testHarness.assertTrue(dropdown.selectedIndex > 0, "Drop down '" + dropdown.id + "' should should have value at index > 0 selected");
            testHarness.assertEqual(dropdown.value, val, "Drop down '" + dropdown.id + "' should should have value '" + val + "' selected, it has '" + dropdown.value + "'");
        }

        function checkLabel4Empty() {
            testHarness.assertEqual(label4.innerHTML, ",,,");
        }

        // Set the selected index of a drop down and
        // force the onChange event to be fired
        function setSelectedIndex(dropdown, index)
        {
            return function() {
                dropdown.selectedIndex = index;
                testHarness.fireEvent(dropdown, 'onchange');
            };
        }

        // Test the initial state