ccdwithdb.aspx

AJAX 应用 实现页面的无刷新

                    style="color: maroon">"Model"</span>], <span style="color: blue">out</span>
                modelId))</span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span>{</span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style="">  </span><span style="color: blue">return null;</span></span><br/>
            <span style="font-size: 10pt; font-family: 'Courier New';
                    "> }</span><br />
            
        <br/>
            <span style="font-size: 10pt; font-family: 'Courier New'; "> CarsTableAdapters.<span style="color: teal">ColorTableAdapter</span>
                adapter =<br />
                <span style="color: blue">  new</span>
                
            </span>
            <span style="font-size: 10pt; font-family: 'Courier New'; ">CarsTableAdapters.<span
                style="color: teal">ColorTableAdapter</span>();</span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; ">
                
                </span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span><span style="color: teal"> Cars</span>.<span
                    style="color: teal">ColorDataTable</span> colorTable =<br />
                  adapter.GetColorsForModel(modelId);</span><br/>
          

    <br />
            <span style="font-size: 10pt; color: teal; font-family: 'Courier New'; ">
                List</span><span style="font-size: 10pt; font-family: 'Courier New'; ">&lt;<span
                    style="color: teal">CascadingDropDownNameValue</span>&gt; values =<br />
                    <span style="color: blue"> 
                        new</span>
                    
                </span>
            <span style="font-size: 10pt; color: teal; font-family: 'Courier New'; ">
                List</span><span style="font-size: 10pt; font-family: 'Courier New'; ">&lt;<span
                    style="color: teal">CascadingDropDownNameValue</span>&gt;();</span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; ">
                
                 </span>
        <br/>    <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span><span style="color: blue"> foreach</span>
                (<span style="color: teal">DataRow</span> dr <span style="color: blue">in</span>
                colorTable)<br />
             {</span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style="">   </span>values.Add(</span><span style="font-size: 10pt; color: blue; font-family: 'Courier New'; ">new</span><span style="font-size: 10pt; font-family: 'Courier New'; ">
                    <span style="color: teal">CascadingDropDownNameValue</span>(</span><br />
            <span style="font-size: 10pt; color: blue; font-family: 'Courier New'; "> 
                
                (string</span><span style="font-size: 10pt; font-family: 'Courier New'; ">) dr[<span
                    style="color: maroon">"Color"</span>],</span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; ">   dr[<span
                style="color: maroon">"ColorID"</span>].ToString()));</span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span>}</span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> 
                <br />
            </span><span style="color: blue"> return</span>
                values.ToArray();</span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; ">}</span>
            </code>

        So it's simple to return the values. Note that the values are returned
            as an array of <strong>CascadaingDropDownNameValue</strong> structures. This
            structure also includes an <strong>isDefaultValue</strong> boolean field that allows
            the specification of which value should be selected when the list is first displayed.<br />
            <br />
            Now let's hook up our extender:<br />
        <code>
            <span style="font-size: 10pt; color: blue; font-family: 'Courier New'; ">
                &lt;</span><span style="font-size: 10pt; color: maroon; font-family: 'Courier New';
                    ">ajaxToolkit</span><span style="font-size: 10pt; color: blue;
                        font-family: 'Courier New'; ">:</span><span style="font-size: 10pt;
                            color: maroon; font-family: 'Courier New'; ">CascadingDropDown<br />
                        </span><span
                                style="font-size: 10pt; font-family: 'Courier New'; "> <span style="color: red">
                                    
                                    ID</span><span style="color: blue">="CascadingDropDown1"<br />
                                    </span> <span style="color: red"><span style="color: #000"> </span>
                                        runat</span><span style="color: blue">="server"</span></span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span>
                
            </span>
            <span style="font-size: 10pt; color: red; font-family: 'Courier New'; "> 
                TargetControlID</span><span style="font-size: 10pt; color: blue; font-family: 'Courier New';
                    ">="ddlMake"</span><span style="font-size: 10pt; font-family: 'Courier New';
                        ">
                        
                    </span>
        <br />
            <span style="font-size: 10pt; color: red; font-family: 'Courier New'; "> 
                Category</span><span style="font-size: 10pt; color: blue; font-family: 'Courier New';
                    ">="Make"</span><span style="font-size: 10pt; font-family: 'Courier New';
                        ">
                        
                    </span>
       <br />
            <span style="font-size: 10pt; color: red; font-family: 'Courier New'; "> 
                PromptText</span><span style="font-size: 10pt; color: blue; font-family: 'Courier New';
                    ">="Select a manufacturer"</span><span style="font-size: 10pt; font-family: 'Courier New';
                        ">
                        
                    </span>
       <br />
            <span style="font-size: 10pt; color: red; font-family: 'Courier New'; "> 
                ServicePath</span><span style="font-size: 10pt; color: blue; font-family: 'Courier New';
                    ">="CarsService.asmx"</span><br />
            <span style="font-size: 10pt; color: red; font-family: 'Courier New'; "> 
                ServiceMethod</span><span style="font-size: 10pt; color: blue; font-family: 'Courier New';
                    ">="GetCarMakes"</span><span style="font-size: 10pt; font-family: 'Courier New';
                        "> <span style="color: blue">/&gt;</span></span></code>
        If you look at this it's pretty simple. <strong>TargetControlID</strong> specifies
        which control we're extending, in this case it's the drop down that specifies the
        manufacturer or "make" of the car. <strong>PromptText</strong> specifies the
        text to show in the dropdown when no value is selected, and the <strong>ServicePath</strong>
        and <strong>ServiceMethod</strong> attributes tell the extender which web service
        to call to fetch its values.<br />
        <br />
        We can also do this hook up from the designer. If you switch to design view,
        and select the "ddlModel" DropDownList, you can make these hookups in the property
        browser at design time:<br />
        <br />
        <asp:Image ID="Image1" runat="server" ImageUrl="~/images/pbrs.png" />
        <br />
        <br />
        Note the "<strong>ParentControlID</strong>" property which specifies which DropDownList
        is the "parent" for this one. By setting these parent values, you can chain
        or "cascade" these values, and the CascadingDropDown extender will automatically
        manage setting, clearing, and loading the data for you.
        <br />
        <br />
        If you set up the ddlModel and ddlColor lists as well and go back to source view,
        you'll see:<br />
        <code>
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span><span style="color: blue">
                    &lt;</span><span style="color: maroon">ajaxToolkit</span><span style="color: blue">:</span><span
                        style="color: maroon">CascadingDropDown<br />
                        <span style="color: blue">  </span></span><span style="color: red">ID</span><span
                            style="color: blue">="CascadingDropDown1"<br />
                        </span><span style="color: red"><span style="color: #000"></span>  runat</span><span
                                style="color: blue">="server"</span></span><br/>
            <span style="font-size: 10pt; color: red; font-family: 'Courier New'; "> 
                TargetControlID</span><span style="font-size: 10pt; color: blue; font-family: 'Courier New';
                    ">="ddlMake"</span><span style="font-size: 10pt; font-family: 'Courier New';
                        "></span><br/>
            <span style="font-size: 10pt; color: red; font-family: 'Courier New'; "> 
                Category</span><span style="font-size: 10pt; color: blue; font-family: 'Courier New';
                    ">="Make"</span><br/> 
            <span style="font-size: 10pt; color: red; font-family: 'Courier New'; "> 
                PromptText</span><span style="font-size: 10pt; color: blue; font-family: 'Courier New';
                    ">="Select a manufacturer"</span><br/>
            <span style="font-size: 10pt; color: red; font-family: 'Courier New'; "> 
                ServicePath</span><span style="font-size: 10pt; color: blue; font-family: 'Courier New';
                    ">="CarsService.asmx"</span><br/>
            <span style="font-size: 10pt; color: red; font-family: 'Courier New'; "> 
                ServiceMethod</span><span style="font-size: 10pt; color: blue; font-family: 'Courier New';
                    ">="GetCarMakes"</span><span style="font-size: 10pt; font-family: 'Courier New';
                        "> <span style="color: blue">/&gt;</span></span><br/>
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span><span
                    style="color: blue">&lt;<span style="color: maroon">ajaxToolkit</span><span style="color: blue">:</span><span
                        style="color: maroon">CascadingDropDown<br />
                        <span style="color: blue">  </span></span><span style="color: red">ID</span><span
                            style="color: blue">="CascadingDropDown2"<br />
                        </span><span style="color: red"><span style="color: #000"></span>  runat</span><span
                                style="color: blue">="server"</span></span></span><br/>
            <span style="font-size: 10pt; color: red; font-family: 'Courier New'; "> 
                TargetControlID</span><span style="font-size: 10pt; color: blue; font-family: 'Courier New';
                    ">="ddlModel"</span><span style="font-size: 10pt; font-family: 'Courier New';
                        "></span><br/>
            <span style="font-size: 10pt; color: red; font-family: 'Courier New'; "> 
                ParentControlID</span><span style="font-size: 10pt; color: blue; font-family: 'Courier New';
                    ">="ddlMake"</span><span style="font-size: 10pt; font-family: 'Courier New';
                        "></span><br/>
            <span style="font-size: 10pt; color: red; font-family: 'Courier New'; ">