很多时候我们需要用到User Control将部份UI或业务逻辑包装下面将UserControl包装成AspNet ajax 控件:
简单示例:
(ASCX) 这一段代码就不解释了:
<table>
<tr>
<td>
Login Name:
td>
<td>
<asp:TextBox ID=UserName Ruant=Server>asp:TextBox>
td>
tr>
<tr>
<td>
Password:
td>
<td>
<asp:TextBox ID=Password TextMode=Password Ruant=Server>asp:TextBox>
td>
tr>
table>
(LoginPaneljs)
<script type=text/javascript>
///
TyperegisterNamespace(CsharpFarmer);
CsharpFarmerLoginPanel= function(element) {
CsharpFarmerLoginPanelinitializeBase(this [element]);
thisuserName = null;
thispassword = null;
}
CsharpFarmerLoginPanelprototype = {
initialize: function() {
CsharpFarmerLoginPanelcallBaseMethod(this initialize);
// Add custom initialization here
}
get_userName: function() {
return thisuserName ;
}
set_userName: function(value) {
thisuserName = value;
}
get_password: function() {
return thispassword ;
}
set_password: function(value) {
thispassword = value;
}
dispose: function() {
//Add custom dispose actions here
CsharpFarmerLoginPanelcallBaseMethod(this dispose);
delete thisuserName;
delete thispassword;
}
}
CsharpFarmerLoginPanelregisterClass(CsharpFarmerLoginPanel SysUIControl);
</script>
(控件相对应的js注意get和set方法必须成对出现与属性以_隔开)至于为什么只是一种规定查看MsAjax:
中:Sys$Component$_setProperties:
Code
function Sys$Component$_setProperties(target properties) {
///
///
///
var e = Function_validateParams(arguments [
{name: target}
{name: properties}
]);
if (e) throw e;
var current;
var targetType = ObjectgetType(target);
var isObject = (targetType === Object) || (targetType === SysUIDomElement);
var isComponent = SysComponentisInstanceOfType(target) && !targetget_isUpdating();
if (isComponent) targetbeginUpdate();
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 ErrorinvalidOperation(Stringformat(SysRespropertyUndefined 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) {
setterapply(target [val]);
}
else if (val instanceof Array) {
current = getterapply(target);
if (!(current instanceof Array)) throw new ErrorinvalidOperation(Stringformat(SysRespropertyNotAnArray name));
for (var i = j = currentlength l= vallength; i < l; i++ j++) {
current[j] = val[i];
}
}
else if ((typeof(val) === object) && (ObjectgetType(val) === Object)) {
current = getterapply(target);
if ((typeof(current) === undefined) || (current === null)) throw new ErrorinvalidOperation(Stringformat(SysRespropertyNullOrUndefined name));
Sys$Component$_setProperties(current val);
}
else {
throw new ErrorinvalidOperation(Stringformat(SysRespropertyNotWritable name));
}
}
}
if (isComponent) targetendUpdate();
}
LoginPanelcs
using System;
using SystemCollectionsGeneric;
using SystemLinq;
using SystemWeb;
using SystemWebUI;
using SystemWebUIWebControls;
using SystemText;
///
/// LoginPanel
///
public partial class LoginPanel : SystemWebUIUserControl IScriptControl
{
protected void Page_Load(object sender EventArgs e)
{
}
protected override void Render(HtmlTextWriter writer)
{
writerAddAttribute(HtmlTextWriterAttributeId thisClientID);
writerRenderBeginTag(Div);
baseRender(writer);
writerRenderEndTag();
}
protected override void OnPreRender(EventArgs e)
{
baseOnPreRender(e);
var sm = ScriptManagerGetCurrent(thisPage);
smRegisterScriptControl<LoginPanel>(this);
smRegisterScriptDescriptors(this);
}
#region IScriptControl
public IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
var descriptor = new ScriptControlDescriptor(CsharpFarmerLoginPanel thisClientID);
descriptorAddElementProperty(userName UserNameClientID);
descriptorAddElementProperty(password PasswordClientID);
yield return descriptor;
}
public IEnumerable<ScriptReference> GetScriptReferences()
{
var sr = new ScriptReference(~/LoginPaneljs);
yield return sr;
}
#endregion
}
这一段代码中应当注意
必须实现IScriptControl接口
另个OnPreRender 和 Render 方法应注意
在OnPresRender里注册这个控件:
对于一个可视化的控件必段承载在HTML元素之上所以
在Render方法中将其放入Div中注意ID
当我们把控件放入Aspx page 时:
我们在js中可以得用$find(id) 得到这个控件:
