让UserControl 成为 Asp.Net ajax 控件

清疚 2021-12-19 16:49 175阅读 0赞

很多时候,我们需要用到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:

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 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") 得到这个控件:  
  
  
第一次写,多关照.

转载于:https://www.cnblogs.com/CsharpFarmer/archive/2009/03/05/1403767.html

[ContractedBlock.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211219/9cd742521f4346069de0de48cd12fc6b.png