65.9K
CodeProject 正在变化。 阅读更多。
Home

带弹出窗口的 AJAX 扩展控件

Alexander Kosorukov
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.43/5 (5投票s)

2010年12月24日

CPOL

5分钟阅读

viewsIcon

28222

downloadIcon

866

创建带弹出窗口的 AJAX 扩展控件

引言

Microsoft AJAX 扩展控件增强了标准 ASP.NET Web 服务器控件的客户端功能。本示例介绍了一个名为 "tbox" 的 AJAX 扩展控件，它与弹出窗口中的 HTML DOM 元素进行交互。此扩展控件是在 Visual Studio 2005 中开发的。

该应用程序创建了三个自定义扩展控件 "tbox" 的实例，并将它们与 TextBox ASP.NET 服务器控件关联。这些控件提供了从弹出窗口的 <span> 元素中选择客户端内容到 HTML DOM <input> 元素（由 TextBox 控件渲染）的功能。弹出窗口是动态创建的，包含 HTML <div> 和 <span> 元素。在此示例中，<span> 元素包含来自 string 数组的文本。扩展控件 "tbox" 的属性可以在 Default.aspx 页面中设置，也可以在代码中动态设置。

Using the Code

该应用程序由以下部分组成：

  • AJAX 扩展控件 "tbox"，文件：/App_Code/tbox.cs, /JavaScripts/tbox.js
  • JavaScript 函数
    • 服务函数，文件：/JavaScripts/funclib.js
    • 用户函数，文件：/JavaScripts/user_functions.js
  • 外部样式表，文件：/App_Themes/Basic/Default.css
  • 默认页面 "Default.aspx"

AJAX 扩展控件 "tbox"

扩展控件是一种 Web 服务器控件，它继承自 System.Web.UI 命名空间中的 ExtenderControl 抽象类，并封装了客户端和服务器端代码。控件的主要目的是通过包装现有控件来提供新功能，在本例中，它包装的是 TextBox Web 服务器控件。相关的 DOM 元素作为参数传递给 "tbox" 扩展控件的构造函数。

下面将简要介绍扩展控件 "tbox" 的客户端和服务器端代码。

客户端

客户端行为类

文件 /JavaScripts/tbox.js 描述了命名空间 "Demo" 中 "tbox" 扩展控件的客户端行为类。

属性

  • list_number - 指示用于弹出窗口的 string 数组
  • winheight - 弹出窗口的高度
  • winwidth - 弹出窗口的宽度
  • startcolor - 当 HTML 元素 <span> 获得焦点时使用的颜色渐变中的 "起始颜色"
  • endcolor - 当 HTML 元素 <span> 获得焦点时使用的颜色渐变中的 "结束颜色"
  • backgroundcolor - HTML 元素 <span> 的背景颜色
  • fontcolor - HTML 元素 <span> 的字体颜色
  • fontsize - HTML 元素 <span> 的字体大小
  • rowheight - HTML 元素 <span> 的高度

事件和委托

  • select - 客户端事件。事件处理程序由服务器端属性 "ClientFunction" 确定。
  • _selectDelegate - 用于 HTML DOM 事件 "mouseover" 的委托，该委托又会触发客户端事件 "select"
  • _selectDelegate1 - 用于 HTML DOM 事件 "mouseout" 的委托

当鼠标悬停在 TextBox 元素上时，会触发 HTML DOM "mouseover" 事件。事件处理程序 "_selectDelegate" 会触发客户端事件 "select"。客户端事件 "select" 的事件处理程序由 "tbox" 扩展控件的服务器端属性 "ClientFunction" 确定。

JavaScript 函数

文件 /JavaScripts/user_functions.js 包含用户函数。

 onSelect(_this, param) 
 onSelect1(_this, param)

这些函数是客户端事件 "select" 的事件处理程序。这些函数的主要目的是调用 "showDropDown()" 函数，该函数为 TextBox 元素创建弹出窗口，但也可以添加其他功能。所需函数的名称 "onSelect" 或 "onSelect1" 在 Default.aspx 页面中通过 "tbox" 扩展控件的服务器端属性 "ClientFunction" 来指定。弹出窗口的隐藏内容由函数 "create_WinContent()"（页面 "Default.aspx.cs"）动态创建。此函数根据数组 "string_array[][]" 的尺寸创建多个 HTML <div> 和 <span> 元素，其数据由用户定义。

文件 "/JavaScripts/funclib.js" 包含函数 "showDropDown()"，该函数会在 HTML DOM <input> 元素（由 TextBox 服务器控件渲染）的下方创建弹出窗口，并动态地将客户端函数 "span_value(text_value, txtbox)" 作为每个 HTML DOM <span> 元素点击事件的处理程序。

 function showDropDown(element, win_content) 
 {
   var oPopup = window.createPopup();
   oPopup.document.body.innerHTML = win_content.innerHTML; 
   var items = new Array();
   var list = oPopup.document.getElementsByTagName('span');
   for(var i = 0; i < list.length; i++)        
   { 
     var item = list[i].innerHTML;
     list[i].onclick =  new Function("span_value
		(\"" + item + "\",\"" + element.id + "\" );")
   }
   var xdiv = oPopup.document.getElementsByTagName('div');
   var str_divheight =  xdiv[0].style.height;
   var win_height = (str_divheight.substr(0,str_divheight.length -2))*1;
   var str_divwidth =  xdiv[0].style.width;
   var divwidth = (str_divwidth.substr(0,str_divwidth.length -2))*1;
   var srcollbar_width = getScrollBarWidth();
   var win_width = divwidth + srcollbar_width;
   var xheight = element.offsetHeight ;
   
   oPopup.show(0, xheight, win_width, win_height,  element);
 }

函数 "span_value(text_value, txtbox)" 在用户单击从弹出窗口中选择的 <span> 元素时，为 HTML DOM <input> 元素赋值。

function span_value(text_value, txtbox)  
{
    document.getElementById(txtbox).setAttribute("value",text_value);
}

服务器端

文件 /App_Code/tbox.cs 将 "tbox" 扩展控件的服务器端代码描述为命名空间 "Demo.CS" 中的类 "tbox"。类 "tbox" 继承自 System.Web.UI 命名空间中的 ExtenderControl 抽象类。

属性

  • ListNumber - 指示用于弹出窗口的 string 数组
  • WinHeight - 弹出窗口的高度
  • WinWidth - 弹出窗口的宽度
  • StartColor - 当我们使用的 HTML 元素 <span> 获得焦点时，颜色渐变中的 "起始颜色"
  • EndColor - 当我们使用的 HTML 元素 <span> 获得焦点时，颜色渐变中的 "结束颜色"
  • BackgroundColor - HTML 元素 <span> 的背景颜色
  • FontColor - HTML 元素 <span> 的字体颜色
  • FontSize - HTML 元素 <span> 的字体大小
  • RowHeight - HTML 元素 <span> 的高度
  • ClientFunction - 作为客户端事件 "select" 的处理程序的 JavaScript 客户端函数的名称
  • TargetControlID - 应用扩展控件的 Web 服务器控件的 ID。此属性继承自基类 ExtenderControl 抽象类。

ExtenderControl 抽象类的 GetScriptReferences() 方法返回一个 ScriptReference 对象集合，其中包含有关要随控件包含的客户端脚本库的信息。

protected override IEnumerable<ScriptReference> GetScriptReferences()
{
    ScriptReference reference = new ScriptReference();
    reference.Path = ResolveClientUrl("~/JavaScripts/tbox.js");
    return new ScriptReference[] { reference };
}

ExtenderControl 抽象类的 GetScriptDescriptors() 方法定义了客户端行为类型的实例。该方法用于确定客户端行为的属性值，这些值从服务器上的扩展控件的属性中获取。

 protected override IEnumerable<ScriptDescriptor> 
	etScriptDescriptors(Control targetControl)
 {
   ScriptBehaviorDescriptor descriptor = 
	ew ScriptBehaviorDescriptor("Demo.tbox", targetControl.ClientID);
   descriptor.AddProperty("list_number", this.ListNumber);
   descriptor.AddProperty("winheight", this.WinHeight);
   descriptor.AddProperty("winwidth", this.WinWidth);
   descriptor.AddProperty("fontcolor", this.FontColor);
   descriptor.AddProperty("fontsize", this.FontSize);
   descriptor.AddProperty("rowheight", this.RowHeight);
   descriptor.AddProperty("startcolor", this.StartColor);
   descriptor.AddProperty("endcolor", this.EndColor);
   descriptor.AddProperty("backgroundcolor", this.BackgroundColor);
   descriptor.AddEvent("select", this.ClientFunction);
   
    return new ScriptDescriptor[] { descriptor };
 }

默认页面 "Default.aspx"

在 "Default.aspx" 页面上：
  • 指定 "Theme" 类型并注册扩展控件的命名空间和标签前缀。
    <%@ Page Language="C#" AutoEventWireup="true" 
	CodeFile="Default.aspx.cs" Inherits="_Default" Theme="Basic" %>
<%@ Register Namespace="Demo.CS" TagPrefix="sample" %>
  • 指定每个控件的属性值。

    示例

    <sample:tbox runat="server" 
ClientFunction="onSelect" 
ListNumber="0"
WinWidth = "200"
WinHeight = "150"
FontColor = "#000000"
FontSize  = "11"
RowHeight = "25"
StartColor = "#99ccff"
EndColor = "#FFFFFF"
BackgroundColor = "#e4e4e4"
ID="Tbox1" 
TargetControlID="TextBox1" />
  • 创建隐藏的弹出窗口，文件："Default.aspx.cs"，函数："create_WinContent()"

历史

  • 2010 年 12 月 24 日
    • 初次发布
  • 2010 年 12 月 31 日
    • 更改了 Default.aspx.cs 文件 - 为客户端属性 "ListNumber" 添加了错误处理程序。
    • 消除了一个 "从未使用过" 的变量。
© . All rights reserved.