使用asp.net ajax创建Extender控件

核心提示：很早就在看了,一直没写,现在记录下.以后可能用到比较多.Extender控件本身并不对原有控件进行更改,而是进行扩展.可以说是前台固定的js文件加上一些后台生成的一些参数进行配合,来对前台显示的控件进行业务操作.废话不多说.看教程来学习下.1.定义一个继承自ExtenderControl类的控件扩展类public cl

很早就在看了,一直没写,现在记录下.以后可能用到比较多.

Extender控件本身并不对原有控件进行更改,而是进行扩展.可以说是前台固定的js文件加上一些后台生成的一些参数进行配合,来对前台显示的控件进行业务操作.废话不多说.看教程来学习下.

1.定义一个继承自ExtenderControl类的控件扩展类

public class FocusExtender : ExtenderControl
{
}
2.定义元属性

TargetControlType指定扩展类型

[TargetControlType(typeof(Control))]
3.重写GetScriptReferences和GetScriptDescriptors方法

(1)GetScriptReferences方法用于加载js文件集合

(2)GetScriptDescriptors方法用于添加控件行为描述,不好意思不知道怎么描述,反正就是为控件添加属性,事件等一些东西.

　  PRotected override IEnumerable<ScriptReference> GetScriptReferences()
　　　  {
　　　　　  ScriptReference reference = new ScriptReference();
　　　　　  reference.Path = ResolveClientUrl("FocusBehavior.js");

　　　  return new ScriptReference[] { reference };
　　　  }

　  protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)
　　　  {
　　　　　  ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor("Samples.FocusBehavior", targetControl.ClientID);
　　　　　  descriptor.AddProperty("highlightCSSClass", this.HighlightCssClass);
　　　　　  descriptor.AddProperty("nohighlightCssClass", this.NoHighlightCssClass);
　　　　　
　　　　　  return new ScriptDescriptor[] { descriptor };
　　　  }

4.编写js文件

根据asp.net Ajax框架的方法,将其写成类的形式

(1)添加事件,注意没有"on"

  //初始化
　  initialize : function() {
　　　  Samples.FocusBehavior.callBaseMethod(this, 'initialize');
　　　 
　　　  $addHandlers(this.get_element(),
　　　　　　　　　　 { 'focus' : this._onFocus,
　　　　　　　　　　　 'blur' : this._onBlur },
　　　　　　　　　　 this);
　　　 
　　　  this.get_element().className = this._nohighlightCssClass;
　  },
  //释放
　  dispose : function() {
　　　  $clearHandlers(this.get_element());
　　　 
　　　  Samples.FocusBehavior.callBaseMethod(this, 'dispose');
　  },

属性以get,set方法定义,set方法后面记得调用raisePropertyChanged方法

　  get_highlightCssClass : function() {
　　　  return this._highlightCssClass;
　  },

　  set_highlightCssClass : function(value) {
　　　  if (this._highlightCssClass !== value) {
　　　　　  this._highlightCssClass = value;
　　　　　  this.raisePropertyChanged('highlightCssClass');
　　　  }
　  },
　 
　  get_nohighlightCssClass : function() {
　　　  return this._nohighlightCssClass;
　  },

　  set_nohighlightCssClass : function(value) {
　　　  if (this._nohighlightCssClass !== value) {
　　　　　  this._nohighlightCssClass = value;
　　　　　  this.raisePropertyChanged('nohighlightCssClass');
　　　  }
　  }

以上差不多就好了,其实还是抓住几个参数来进行设置,然后再呈现出来.上面的例子没有改变原有控件,而是创建Extender控件,你也可以扩展原有控件
.那则需要实现IScriptControl接口.其实还是一样需要实现GetScriptReferences方法GetScriptDescriptors方法,多做的事就是需要自己手动用ScriptManager控件来注册一下.

　  protected override void OnPreRender(EventArgs e)
　　　  {
　　　　　  if (!this.DesignMode)
　　　　　  {
　　　　　　　  // Test for ScriptManager and register if it exists
　　　　　　　  sm = ScriptManager.GetCurrent(Page);

　　　　　  if (sm == null)
　　　　　　　　　  throw new HttpException("A ScriptManager control must exist on the current page.");

　　　　　  sm.RegisterScriptControl(this);

　　　  }

　　　  base.OnPreRender(e);
　　　  }

　  protected override void Render(HtmlTextWriter writer)
　　　  {
　　　　　  if (!this.DesignMode)
　　　　　　　  sm.RegisterScriptDescriptors(this);

　　　  base.Render(writer);
　　　  }
最后还要记得js里面也要注册下,Extender控件为Sys.UI.Behavior,这次为Sys.UI.Control