简单示例:
(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 >
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>
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();
}
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
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") 得到这个控件:
第一次写,多关照.