ASP.NET实现用户控件UserControl成为Asp.Net ajax控件
很多时候,我们需要用到User Control,将部份UI或业务逻辑包装,下面将UserControl包装成Asp.Net ajax 控件: 简单示例: (ASCX) 这一段代码就不解释了: 1 @ControlLanguage = " C# " AutoEventWireup = " true " CodeF
很多时候,我们需要用到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>
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 ///
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>
Code
function Sys$Component$_setProperties(target, properties) {
///
///
///
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();
}
2 ///
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:
Codefunction Sys$Component$_setProperties(target, properties) {
///
///
///
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 ///
10 /// LoginPanel
11 ///
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
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 ///
10 /// LoginPanel
11 ///
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") 得到这个控件。
精彩图集
精彩文章