cascadingdropdown.aspx

AJAX 应用 实现页面的无刷新

        function testInitialState()
        {
            checkEnabled(drop1);
            checkContainsValues(drop1, 'PromptValue', 'Acura', 'Audi (value)', 'BMW (value)');
            checkDisabled(drop2);
            checkContainsValues(drop2, '');
            checkDisabled(drop3);
            checkContainsValues(drop3, '');
            checkDisabled(drop3b);
            checkContainsValues(drop3b, '');
        }

        // Ensure the last dropdowns respond after a selection in the first
        function testValuesAfterFirstSelected()
        {
            testHarness.assertEqual(drop1.selectedIndex, 3, "First drop down does not have selected index 3");
            checkEnabled(drop1);
            checkContainsValues(drop1, 'PromptValue', 'Acura', 'Audi (value)', 'BMW (value)');
            checkEnabled(drop2);
            checkContainsValues(drop2, '', '3 series (value)', '5 series (value)', '7 series (value)');
            checkDisabled(drop3);
            checkContainsValues(drop3, '');
            checkDisabled(drop3b);
            checkContainsValues(drop3b, '');
        }

        // Ensure the last dropdown responds after a selection in the second
        function testValuesAfterSecondSelected()
        {
            testHarness.assertEqual(drop1.selectedIndex, 3, "First drop down does not have selected index 3");
            checkEnabled(drop1);
            checkContainsValues(drop1, 'PromptValue', 'Acura', 'Audi (value)', 'BMW (value)');
            testHarness.assertEqual(drop2.selectedIndex, 2, "Second drop down does not have selected index 2");
            checkEnabled(drop2);
            checkContainsValues(drop2, '', '3 series (value)', '5 series (value)', '7 series (value)');
            checkEnabled(drop3);
            checkContainsValues(drop3, '', 'Yellow (value)', 'Banana (value)');
            checkSelected(drop3, 'Banana (value)');
            checkEnabled(drop3b);
            checkContainsValues(drop3b, '', 'Yellow (value)', 'Banana (value)');
            checkSelected(drop3b, 'Banana (value)');
        }

        function testSelectedValues() {
            testHarness.assertEqual(drop4.selectedIndex, 3, "Selected Make should be BMW");
            testHarness.assertEqual(drop5.selectedIndex, 1, "Selected Model should be 3-Series");
            testHarness.assertEqual(drop6.selectedIndex, 3, "Selected Make should be Racing Blue");
        }

        // Run the tests
        function registerTests(harness)
        {
            testHarness = harness;

            // Get the controls on the page
            drop1 = testHarness.getElement('ctl00_ContentPlaceHolder1_DropDownList1');
            drop2 = testHarness.getElement('ctl00_ContentPlaceHolder1_DropDownList2');
            drop3 = testHarness.getElement('ctl00_ContentPlaceHolder1_DropDownList3');
            drop3b = testHarness.getElement('ctl00_ContentPlaceHolder1_DropDownList3b');
            btn = testHarness.getElement('ctl00_ContentPlaceHolder1_Button1');
            label = testHarness.getElement('ctl00_ContentPlaceHolder1_Label1');
            drop4 = testHarness.getElement('ctl00_ContentPlaceHolder1_DropDownList4');
            drop5 = testHarness.getElement('ctl00_ContentPlaceHolder1_DropDownList5');
            drop6 = testHarness.getElement('ctl00_ContentPlaceHolder1_DropDownList6');
            drop7 = testHarness.getElement('ctl00_ContentPlaceHolder1_DropDownList7');
            label2 = testHarness.getElement('ctl00_ContentPlaceHolder1_Label2');
            dropContext = testHarness.getElement('ctl00_ContentPlaceHolder1_contextKeyDropDown');
            drop8 = testHarness.getElement('ctl00_ContentPlaceHolder1_DropDownList8');
            label3 = testHarness.getElement('ctl00_ContentPlaceHolder1_Label3');
            label4 = testHarness.getElement('ctl00_ContentPlaceHolder1_Label4');
            label5 = testHarness.getElement('ctl00_ContentPlaceHolder1_Label5');
            dropH = testHarness.getElement('ctl00_ContentPlaceHolder1_DropDownListH');
            dropI = testHarness.getElement('ctl00_ContentPlaceHolder1_DropDownListI');
            drop9 = testHarness.getElement('ctl00_ContentPlaceHolder1_DropDownList9');
            label7 = testHarness.getElement('ctl00_ContentPlaceHolder1_Label7');
            btn2 = testHarness.getElement('ctl00_ContentPlaceHolder1_Button2');
                        
            emptyTextMakeDropDown = testHarness.getElement('ctl00_ContentPlaceHolder1_emptyTextMakeDropDown');
            emptyTextModelDropDown = testHarness.getElement('ctl00_ContentPlaceHolder1_emptyTextModelDropDown');
            emptyTextColorDropDown = testHarness.getElement('ctl00_ContentPlaceHolder1_emptyTextColorDropDown'); 

            var empty = function() {};

            // Test the initial values
            var test = testHarness.addTest('Initial Values');
            test.addStep(empty, checkLoaded(drop1, drop4, drop5, drop6));
            test.addStep(testInitialState);
            test.addStep(testSelectedValues);

            // Select from first level
            var test = testHarness.addTest('Select from first level');
            test.addStep(empty, checkLoaded(drop1, drop4, drop5, drop6));
            test.addStep(testInitialState);
            test.addStep(setSelectedIndex(drop1, 3), checkLoaded(drop1, drop2), testValuesAfterFirstSelected);

            // Values preserved on postback
            var test = testHarness.addTest('Values preserved on PostBack');
            test.addStep(empty, checkLoaded(drop1, drop4, drop5, drop6));
            test.addStep(testInitialState);
            test.addStep(testSelectedValues);
            test.addStep(setSelectedIndex(drop1, 3), checkLoaded(drop1, drop2), testValuesAfterFirstSelected);
            test.addPostBack(btn);
            test.addStep(empty, checkLoaded(drop1, drop2, drop4, drop5, drop6));
            test.addStep(testValuesAfterFirstSelected);
            test.addStep(function() { testHarness.assertEqual(label.innerHTML, 'SelectedIndexChanged', 'SelectedIndexChanged did not fire'); });

            // Select from second level
            var test = testHarness.addTest('Select from second level');
            test.addStep(empty, checkLoaded(drop1, drop4, drop5, drop6));
            test.addStep(testInitialState);
            test.addStep(testSelectedValues);
            test.addStep(setSelectedIndex(drop1, 3), checkLoaded(drop1, drop2), testValuesAfterFirstSelected);
            test.addStep(setSelectedIndex(drop2, 2), checkLoaded(drop1, drop2, drop3, drop3b), testValuesAfterSecondSelected);

            // Clear second level
            var test = testHarness.addTest('Clear second level');
            test.addStep(empty, checkLoaded(drop1, drop4, drop5, drop6));
            test.addStep(testInitialState);
            test.addStep(testSelectedValues);
            test.addStep(setSelectedIndex(drop1, 3), checkLoaded(drop1, drop2), testValuesAfterFirstSelected);
            test.addStep(setSelectedIndex(drop2, 2), checkLoaded(drop1, drop2, drop3, drop3b), testValuesAfterSecondSelected);
            test.addStep(setSelectedIndex(drop2, 0), function() { return !drop1.disabled && !drop2.disabled && drop3.disabled && drop3b.disabled; }, testValuesAfterFirstSelected);

            // Test default value and .Text
            var test = testHarness.addTest('Test default value and .Text');
            test.addStep(empty, checkLoaded(drop8));
            test.addStep(testInitialState);
            test.addPostBack(btn);
            test.addStep(function() { testHarness.assertEqual(label3.innerHTML, "Audi (value):Audi (value):Audi", "Default value not handled correctly"); });

            // Test untouched submit
            var test = testHarness.addTest('Test untouched submit');
            test.addStep(empty, checkLoaded(drop8));
            test.addPostBack(btn);
            test.addStep(function() { testHarness.assertEqual(label3.innerHTML, "Audi (value):Audi (value):Audi", "Values not preserved correctly"); });
            test.addPostBack(btn);
            test.addStep(function() { testHarness.assertEqual(label3.innerHTML, "Audi (value):Audi (value):Audi", "Values not preserved correctly"); });

            // Test prompt text selection handling
            var test = testHarness.addTest('Test prompt text selection handling');
            test.addStep(empty, checkLoaded(drop1));
            test.addStep(checkLabel4Empty);
            test.addPostBack(btn);
            test.addStep(empty, checkLoaded(drop1));
            test.addStep(checkLabel4Empty);
            test.addStep(setSelectedIndex(drop1, 1));
            test.addStep(setSelectedIndex(drop1, 0));
            test.addPostBack(btn);
            test.addStep(empty, checkLoaded(drop1));
            test.addStep(checkLabel4Empty);

            // Test SelectedValue reset
            var test = testHarness.addTest('Test SelectedValue reset');
            test.addStep(empty, checkLoaded(drop1, drop4, drop5, drop6));
            test.addStep(setSelectedIndex(drop1, 3), checkLoaded(drop1, drop2), testValuesAfterFirstSelected);
            test.addStep(setSelectedIndex(drop2, 2), checkLoaded(drop1, drop2, drop3, drop3b), testValuesAfterSecondSelected);
            test.addStep(setSelectedIndex(drop1, 0), function() { return !drop1.disabled && drop2.disabled && drop3.disabled && drop3b.disabled; });
            test.addPostBack(btn);
            test.addStep(checkLabel4Empty);

            // Test IE6 hidden SELECT workaround
            var test = testHarness.addTest('Test IE6 hidden SELECT workaround');
            test.addStep(empty, checkLoaded(dropH));
            test.addStep(function() { testHarness.assertEqual(3, dropH.selectedIndex, "SelectedValue not set properly") });

            // Test untouched submit when SelectedValue set
            var test = testHarness.addTest('Test untouched submit when SelectedValue set');
            test.addStep(empty, checkLoaded(dropI));
            test.addStep(function() { testHarness.assertEqual(label5.innerHTML, "Acura", "Value not set correctly"); });
            test.addPostBack(btn);
            test.addStep(empty, checkLoaded(dropI));
            test.addStep(function() { testHarness.assertEqual(label5.innerHTML, "Acura", "Value not set correctly"); });
            
            // Test ContextKey
            var test = testHarness.addTest('Context Key');
            test.addStep(empty, function() { try { checkContainsValues(dropContext, 'Context...'); return true; } catch(ex) { return false; } });

            // Test LoadingText without PromptText
            var test = testHarness.addTest('Test LoadingText without PromptText');
            test.addStep(empty, checkLoaded(drop7));

            // Test first value loaded without PromptText
            var test = testHarness.addTest('Test first value loaded without PromptText');
            test.addStep(empty, checkLoaded(drop9));
            test.addPostBack(btn2);
            test.addStep(function() { testHarness.assertNotEqual(label7.innerHTML, "ERROR", "Value not set correctly"); });
            
            // Test AutoPostBack
            // var test = testHarness.addTest('Test AutoPostBack');
            // test.addStep(empty, checkLoaded(drop7));
            // test.addStep(setSelectedIndex(drop7, 2));
            // TODO: Validate label2.innerHTML==SelectedIndexChanged (doesn't seem easy to do because of the nature of the AutoPostBack)

            // Test PromptValue
            var test = testHarness.addTest('Test PromptValue');
            test.addStep(empty, checkLoaded(drop1));
            test.addStep(function() { testHarness.assertEqual(0, drop1.selectedIndex, "selectedIndex not set properly: " + drop1.selectedIndex) } );
            test.addStep(function() { testHarness.assertEqual("PromptValue", drop1.value, "selectedValue not set properly: " + drop1.value) } );

            // Test EmptyText/EmptyValue
            var test = testHarness.addTest('Test EmptyText/EmptyValue');
            test.addStep(empty, checkLoaded(emptyTextMakeDropDown, emptyTextModelDropDown));
            test.addStep(function() { checkSelected(emptyTextMakeDropDown, 'Incomplete Make') } );
            test.addStep(function() { checkSelected(emptyTextModelDropDown, 'Incomplete Model') } );
            test.addStep(function() { testHarness.assertEqual(0, emptyTextColorDropDown.selectedIndex, "selectedIndex not set properly: " + emptyTextColorDropDown.selectedIndex) } );
            test.addStep(function() { testHarness.assertEqual('No choices available', emptyTextColorDropDown.options[0].text, "emptyTextColorDropDown.options[0].text not set properly: " + emptyTextColorDropDown.options[0].text) } );
            test.addStep(function() { testHarness.assertEqual("-1", emptyTextColorDropDown.value, "selectedValue not set properly: " + emptyTextColorDropDown.value) } );
        }
    </script>
</asp:Content>