让UserControl 成为 Asp.Net ajax 控件

很多时候,我们需要用到User Control,将部份UI或业务逻辑包装,下面将UserControl包装成Asp.Net ajax 控件:
简单示例:
(ASCX) 这一段代码就不解释了:

 1  <% @ Control Language = " C# "  AutoEventWireup = " true "  CodeFile = " LoginPanel.ascx.cs "  Inherits = " LoginPanel "   %>
 2  < table >
 3       < tr >
 4           < td >
 5              Login Name:
 6           </ td >
 7           < td >
 8               < asp:TextBox ID = " UserName "  Ruant = " Server " ></ asp:TextBox >
 9           </ td >
10       </ tr >
11       < tr >
12           < td >
13              Password:
14           </ td >
15           < td >
16               < asp:TextBox ID = " Password "  TextMode = " Password "  Ruant = " Server " ></ asp:TextBox >
17           </ td >
18       </ tr >
19  </ table >

(LoginPanel.js)

 1  < script type = " text/javascript " >
 2       // / <reference name="MicrosoftAjax.js"/>
 3      Type.registerNamespace( " CsharpFarmer " );
 4      CsharpFarmer.LoginPanel =   function (element) {
 5          CsharpFarmer.LoginPanel.initializeBase( this , [element]);
 6           this .userName  =   null ;
 7           this .password  =   null ;
 8      }
 9      CsharpFarmer.LoginPanel.prototype  =  {
10          initialize:  function () {
11              CsharpFarmer.LoginPanel.callBaseMethod( this ,  ' initialize ' );
12               //  Add custom initialization here
13          },
14          get_userName:  function () {
15               return   this .userName ;
16          },
17          set_userName:  function (value) {
18               this .userName  =  value;
19          },
20          get_password:  function () {
21               return   this .password ;
22          },
23          set_password:  function (value) {
24               this .password  =  value;
25          },
26          dispose:  function () {
27               // Add custom dispose actions here
28              CsharpFarmer.LoginPanel.callBaseMethod( this ,  ' dispose ' );
29               delete   this .userName;
30               delete   this .password;
31          }
32      }
33      CsharpFarmer.LoginPanel.registerClass(CsharpFarmer.LoginPanel, Sys.UI.Control);
34  < / script>

(控件相对应的js,注意get和set方法必须成对出现,与属性以"_"隔开,),至于为什么,只是一种规定,查看MsAjax:
中:Sys$Component$_setProperties:

Code
function Sys$Component$_setProperties(target, properties) {
    /// <summary locid="M:J#Sys.Component._setProperties" />
    /// <param name="target"></param>
    /// <param name="properties"></param>
    var e = Function._validateParams(arguments, [
        {name: "target"},
        {name: "properties"}
    ]);
    if (e) throw e;
    var current;
    var targetType = Object.getType(target);
    var isObject = (targetType === Object) || (targetType === Sys.UI.DomElement);
    var isComponent = Sys.Component.isInstanceOfType(target) && !target.get_isUpdating();
    if (isComponent) target.beginUpdate();
    for (var name in properties) {
        var val = properties[name];
        var getter = isObject ? null : target["get_" + name];
        if (isObject || typeof(getter) !== 'function') {
            var targetVal = target[name];
            if (!isObject && typeof(targetVal) === 'undefined') throw Error.invalidOperation(String.format(Sys.Res.propertyUndefined, name));
            if (!val || (typeof(val) !== 'object') || (isObject && !targetVal)) {
                target[name] = val;
            }
            else {
                Sys$Component$_setProperties(targetVal, val);
            }
        }
        else {
            var setter = target["set_" + name];
            if (typeof(setter) === 'function') {
                setter.apply(target, [val]);
            }
            else if (val instanceof Array) {
                current = getter.apply(target);
                if (!(current instanceof Array)) throw new Error.invalidOperation(String.format(Sys.Res.propertyNotAnArray, name));
                for (var i = 0, j = current.length, l= val.length; i < l; i++, j++) {
                    current[j] = val[i];
                }
            }
            else if ((typeof(val) === 'object') && (Object.getType(val) === Object)) {
                current = getter.apply(target);
                if ((typeof(current) === 'undefined') || (current === null)) throw new Error.invalidOperation(String.format(Sys.Res.propertyNullOrUndefined, name));
                Sys$Component$_setProperties(current, val);
            }
            else {
                throw new Error.invalidOperation(String.format(Sys.Res.propertyNotWritable, name));
            }
        }
    }
    if (isComponent) target.endUpdate();
}

LoginPanel.cs

 1  using  System;
 2  using  System.Collections.Generic;
 3  using  System.Linq;
 4  using  System.Web;
 5  using  System.Web.UI;
 6  using  System.Web.UI.WebControls;
 7  using  System.Text;
 8 
 9  ///   <summary>
10  ///  LoginPanel 
11  ///   </summary>
12  public   partial   class  LoginPanel : System.Web.UI.UserControl, IScriptControl
13  {
14 
15       protected   void  Page_Load( object  sender, EventArgs e)
16      {
17 
18      }
19 
20       protected   override   void  Render(HtmlTextWriter writer)
21      {
22          writer.AddAttribute(HtmlTextWriterAttribute.Id,  this .ClientID);
23          writer.RenderBeginTag( " Div " );
24           base .Render(writer);
25          writer.RenderEndTag();
26      }
27 
28       protected   override   void  OnPreRender(EventArgs e)
29      {
30           base .OnPreRender(e);
31          var sm  =  ScriptManager.GetCurrent( this .Page);
32          sm.RegisterScriptControl < LoginPanel > ( this );
33          sm.RegisterScriptDescriptors( this );
34      }
35 
36      
37       #region  IScriptControl
38 
39       public  IEnumerable < ScriptDescriptor >  GetScriptDescriptors()
40      {
41          var descriptor  =   new  ScriptControlDescriptor( " CsharpFarmer.LoginPanel " ,  this .ClientID);
42          descriptor.AddElementProperty( " userName " , UserName.ClientID);
43          descriptor.AddElementProperty( " password " , Password.ClientID);
44           yield   return  descriptor;
45      }
46 
47       public  IEnumerable < ScriptReference >  GetScriptReferences()
48      {
49          var sr  =   new  ScriptReference( " ~/LoginPanel.js " );
50           yield   return  sr;
51      }
52 
53       #endregion
54  }
55 

这一段代码中应当注意,必须实现IScriptControl接口,
另个,OnPreRender 和 Render 方法应注意.
在OnPresRender里注册这个控件:
对于一个可视化的控件,必段承载在HTML元素之上,所以,
在Render方法中,将其放入Div中,注意ID

当我们把控件放入Aspx page 时:
我们在js中可以得用$find("id") 得到这个控件:


第一次写,多关照.