extenderclasses.aspx

AJAX 应用 实现页面的无刷新

<%@ Page
    Language="C#"
    MasterPageFile="~/DefaultMaster.master"
    Title="Extender Base Classes" %>
<asp:Content ContentPlaceHolderID="SampleContent" Runat="Server">
    <div class="walkthrough">

        <div class="heading">Extender base class features</div>

        <p>
            <span>All of the controls in the Toolkit are built upon a set of classes that really help streamline
                the process of writing control extenders. These classes form
                a thin "glue" layer between the Toolkit controls and the ASP.NET AJAX classes as they
                exist today.</span></p>
        <p>
            </p>
        <p>
            <span><span></span></span>
            <span>To get the most out of this document,
                you should have written a control with the Toolkit, or at least read about
                <a href="CreatingNewExtender.aspx">creating a new extender</a>.</span></p>
        <p>
            </p>
        <p>
            <span>The Extender Classes automate a couple
                of major things:</span></p>
        <ul>
        <li>The generation of script
                that hooks up your behavior to an element on the page</li><li>The loading of your script
                file reference</li><li>The management of any scripts
                that your behavior or control may be dependent on</li><li>The mapping of properties and
                their values from the managed side to the client script</li><li>Help in developing and debugging
                your script</li><li>A mechanism to move state back-and-forth
                between your extender and the behaviors in the browser</li></ul>
        <p>
            </p>
        <p>
            <span>The main class is called <b>AjaxControlToolkit.ExtenderControlBase
            </b>(ECB for the purposes of this document). ECB is an abstract class, which
                means you can't instantiate it directly; you have to create a derived type.<span>
                </span>The main job of this component is to hook up an HTML element with some behaviors
                on the page. Derived classes can add a TargetControlTypeAttribute to restrict the types
                of elements they can be hooked up to.</span></p>
        <p>
            </p>
        <p>
            <span>On this class is where you declare
                your managed object model. A simple one would look like this:</span></p>
    <pre>[<span style='color:Teal'>TargetControlType</span><span style='color:Black'>(</span><span style='color:Blue'>typeof</span><span style='color:Black'>(</span><span style='color:Teal'>IButtonControl</span><span style='color:Black'>))]
    </span><span style='color:Blue'>public</span><span style='color:Black'> </span><span style='color:Blue'>class</span><span style='color:Black'> </span><span style='color:Teal'>ConfirmButtonExtender</span><span style='color:Black'> : </span><span style='color:Teal'>ExtenderControlBase
    </span><span style='color:Black'>{
    </span><span style='color:Black'>    [</span><span style='color:Teal'>ExtenderControlProperty</span><span style='color:Black'>()]
        </span><span style='color:Blue'>public</span><span style='color:Black'> </span><span style='color:Blue'>string</span><span style='color:Black'> ConfirmText
        {
            </span><span style='color:Blue'>get
    </span><span style='color:Black'>        {
                </span><span style='color:Blue'>return</span><span style='color:Black'> GetPropertyValue(</span><span style='color:Maroon'>&quot;ConfirmText&quot;</span><span style='color:Black'>, </span><span style='color:Maroon'>&quot;&quot;</span><span style='color:Black'>);
            }
            </span><span style='color:Blue'>set
    </span><span style='color:Black'>        {
                SetPropertyValue(</span><span style='color:Maroon'>&quot;ConfirmText&quot;</span><span style='color:Black'>, </span><span style='color:Blue'>value</span><span style='color:Black'>);
            }
        }
    }
    </span></pre>
        <p>
            <span>The general lifecycle works as follows. The developer adds an extender to their ASPX page:</span></p>
        <p>
        </p>
        <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'">ns</span><span
                    style="font-size: 10pt; color: blue; font-family: 'Courier New'">:</span><span style="font-size: 10pt;
                        color: maroon; font-family: 'Courier New'">MyExtender</span><span style="font-size: 10pt;
                            font-family: 'Courier New'"> <span style="color: red">ID</span><span style="color: blue">="myExtender1"</span>
                            <span style="color: red">runat</span><span style="color: blue">="server"&gt;</span></span>
        <br/>
            <span style="font-size: 10pt;
                        font-family: 'Courier New'"> <span style="color: red">  TargetControlID</span><span
                            style="color: blue">="Button1"<br />
                              </span> <span style="color: red">SomeValue</span><span
                                style="color: blue">="Foo" /&gt;</span></span>
        </code>
        <p>
            <span>When the page loads, this instantiates a server control that derives from ECB above.
            The server control talks to ASP.NET AJAX to hook itself up, and the client browser automatically downloads and initializes all the necessary scripts.</span></p>
        <p>
            </p>
        <p>
            </p>
        <p>
            <span class="heading">ExtenderControlBase
                Features:</span></p>
        <p>
            </p>
        <p>
            <b><span>RequiredScripts: </span></b><span
               ><span> You can specify which scripts
                    are required for a given extender using the <strong>RequiredScriptAttribute</strong>.</span></span></p>
            <code>
            <span>[<span style="font-family: Courier New">RequiredScript</span>(<span
                style="font-family: Courier New"><span style="color: #008080">typeof(MyOtherExtender)</span>)]</span></span><br />
            <span><span></span></span>
            
            <span style="font-size: 10pt; color: blue; font-family: 'Courier New'">public</span><span
                style="font-size: 10pt; font-family: 'Courier New'"> MyExtender()<br />
                {<span>  </span><span>     </span><span> </span>
                <span>   </span></span>
        <br />
            <span style="font-size: 10pt; font-family: 'Courier New'">}</span><span style="font-size: 10pt;
                font-family: Arial"></span>
                </code>

        <p >
            <span>This attribute takes a type that references another script file that needs to
                be loaded prior to your component's scripts. This allows
                you to build extenders that have behaviors that derive from or use other behaviors.
                RequiredScriptAttribute also has a <strong>LoadOrder</strong> property as well to
                enforce which scripts get loaded in which order. This loading is recursive as well - if the extenders you reference also have dependencies, they will automatically
                be created.</span></p>
        <code><span style="font-size: 10pt">
        
            [<span style="font-family: Courier New">RequiredScript</span>(<span
                style="font-family: Courier New"><span style="color: #008080">typeof(MyExtender</span>),0)]</span>
        <br/>
            [<span style="font-family: Courier New">RequiredScript</span>(<span style="font-family: Courier New"><span
                style="color: #008080">typeof(MyOtherExtender</span>),1)]</span>
        <br/>
            
            <span style="color: blue; font-family: 'Courier New'">public</span></span><span
                style="font-family: 'Courier New'"><span
                style="font-size: 10pt"> MyCombinedExtender() { }</span><span><span style="font-size: 10pt">
                    </span>
                       </span><span>     </span><span>
                    </span><span>   </span></span>
        </code>
        <p >
            <b><span>ScriptPath: </span></b><span>This is a debugging
                helper property that really simplifies your script development.
                Once you've got your ECB class created, create an ASPX page.<span>
                </span>Copy your 揗yBehavior.js