使用 VS 2008 创建 ASP.NET AJAX 控件扩展器
演示如何在 VS 2008 中向 TextBox 添加 AJAX 支持。
引言
ASP.NET AJAX 扩展器控件向页面上已声明的现有控件添加功能（通常是 AJAX 或 JavaScript 支持）。 使用 VS 2005，您必须手动连接控件扩展器（通过源代码视图或属性网格）。 使用新发布的 VS 2008，则不需要这样做，并且可以使用“添加扩展器”功能轻松完成。 以下示例演示如何在 VS 2008 中向 TextBox 添加 AJAX 支持。
使用代码
步骤 1：通过在合适的位置接受默认值，使用 VS 2008 模板创建一个简单的 ASP.NET 网站。
步骤 2：使用 文件->添加->新项目->Visual C# -> ASP.NET AJAX 服务器控件扩展器，添加一个新项目，如图所示
步骤 3：修改 *ExtenderControl1.cs* 如下。 将以下属性添加到 ExtenderControl1 类
[
TargetControlType(typeof(TextBox))
]
[
DefaultProperty("Contacts"),
ParseChildren(true, "Contacts"),
ToolboxData(
"<{0}:QuickContacts runat=\"server\"> </{0}:QuickContacts>")
]
步骤 4：将以下属性添加到 ExtenderControl1 类
private ArrayList contactsList;
[
Category("Behavior"),
Description("The contacts collection"),
DesignerSerializationVisibility(
DesignerSerializationVisibility.Content),
Editor(typeof(ContactCollectionEditor), typeof(UITypeEditor)),
PersistenceMode(PersistenceMode.InnerDefaultProperty)
]
public ArrayList Contacts
{
get
{
if (contactsList == null)
{
contactsList = new ArrayList();
}
return contactsList;
}
}
步骤 5：修改 GetScriptDescriptors 方法如下
protected override IEnumerable<ScriptDescriptor>
GetScriptDescriptors(System.Web.UI.Control targetControl)
{
ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor(
"AjaxTextWithTableExtender.ClientBehavior1",
targetControl.ClientID);
descriptor.AddProperty("contactsList", this.Contacts);
return new ScriptBehaviorDescriptor[] { descriptor };
// yield return descriptor;
}
步骤 6：通过添加以下行来修改 ClientBehavior1.initializeBase 函数
this.contactsList=null;
this.strtext=null;
this.flag=true;
将以下行添加到 ClientBehavior1.prototype Initialize 函数。 注意：逗号要小心。
$addHandler(this.get_element(), 'keyup',
Function.createDelegate(this, this._onkeyup));
this._onkeyup();
并添加以下内容
get_contactsList : function() {
return this.contactsList;
},
set_contactsList : function(value) {
this.contactsList=value;
this.raisePropertyChanged('contactsList');
},
_onkeyup : function() {
this.strtext=document.getElementById("TextBox1").value;
var links = new Array ("link1", "link2", "link3");
var links_url = new Array ("link1.htm", "link2.htm",
"link3.htm");
/* Resolve the location */
var loc=String(this.location);
loc=loc.split("/");
loc=loc[loc.length-1].split(".");
loc=loc[loc.length-2];
var v=new Array(this.contactsList);
//////////////////////////////////////////////////////////////////
var t = document.getElementById("TextBox1");
if (t) {
// alert(this.flag);
if(this.flag)
{
var mybody = document.getElementsByTagName("body")[0];
// creates <table> and <tbody> elements
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");
// creating all cells
for(var j = 0; j < 1; j++) {
// creates a <tr> element
for(var i = 0; i < 2; i++) {
// creates a <td> element
mycurrent_row = document.createElement("tr");
if(this.strtext!=null & v[0][i].Email.substring(0,1)!=null)
{
//alert("strtext is not null");
if(v[0][i].Email.substring(0,1)==this.strtext.substring(0,1))
{
//alert("next shows v[0][i].
// Email.substring\(0,1\)==this.strtext.substring\(0,1\)");
//alert(v[0][i].Email.substring(0,1)==this.strtext.substring(0,1));
mycurrent_cell = document.createElement("td");
//////////////////////////////////////////////////
linkEmail=document.createElement("a");
linkEmail.setAttribute("href",links_url[0]);
mycurrent_cell.appendChild(linkEmail);
var stre=v[0][i].Email;
//alert(str);
currenttext = document.createTextNode(stre);
linkEmail.appendChild(currenttext);
// appends the cell <td> into the row <tr>
mycurrent_row.appendChild(mycurrent_cell);
/////////////////////////////////////////////////////
mycurrent_cell = document.createElement("td");
// creates a Text Node
stre=v[0][i].Name;
//alert(str);
currenttext = document.createTextNode(stre);
// appends the Text Node we created into the cell <td>
mycurrent_cell.appendChild(currenttext);
// appends the cell <td> into the row <tr>
mycurrent_row.appendChild(mycurrent_cell);
//////////////////////////////////////////////////
mycurrent_cell = document.createElement("td");
// creates a Text Node
var stre=v[0][i].Phone;
//alert(str);
currenttext = document.createTextNode(stre);
// appends the Text Node we created into the cell <td>
mycurrent_cell.appendChild(currenttext);
// appends the cell <td> into the row <tr>
mycurrent_row.appendChild(mycurrent_cell);
/////////////////////////////////////////////////////
}
}
mytablebody.appendChild(mycurrent_row);
}
// appends the row <tr> into <tbody>
}
// appends <tbody> into <table>
mytable.appendChild(mytablebody);
// appends <table> into <body>
mybody.appendChild(mytable);
// sets the border attribute of mytable to 2;
mytable.setAttribute("border","2");
if(this.strtext=='')
this.flag=true;
else
this.flag=false;
}
}
}
步骤 7：用于创建联系人集合的编辑器是 ContactCollectionEditor，它基于以下示例： http://msdn2.microsoft.com/en-us/library/ms178654.aspx。 现在编译 ExtenderControl 项目。 打开网站的 *Default.aspx* 的设计器。 您会在工具箱的顶部找到添加的 ExtenderControl。 现在添加一个 Label 和一个 TextBox，如图所示
步骤 8：单击 TextBox 右侧的箭头，然后选择“添加扩展器”。 将弹出以下屏幕
步骤 9：选择 ExtenderControl1 并接受扩展器的默认 ID。 如果一切正常，则“TextBox”的“添加扩展器”选项下方将显示“删除扩展器”选项。 右键单击 TextBox 并在“属性”中导航到 TextBox1_Extender。 使用以下 ContactCollectionEditor 向 Contacts 集合添加一些虚拟记录
步骤 10：将名为 "link1.htm" 的 HTML 文件添加到您的网站项目。 构建示例并运行该网站。
测试控件
添加字母“a”或您输入的电子邮件记录的首字母，并观看扩展器控件的工作情况。 它应该是这样的
将显示来自 Contacts 集合的匹配记录，并且也可以链接它们。