前言
5月13号,AJAX Control Toolkit 发布了新的release,其中包含了三个新的控件:HTMLEditor 、ComboBox 和 ColorPicker 作用和用法如下:
AJAX Control Toolkit Release Notes - May 2009 Release
Version 3.0.30512
New controls
此版本包括了一下三个重要的新控件:
- HTMLEditor
就是我们日常所用的所见即所得HTML编辑控件(HTML在线编辑器29个). 而这个控件则是Obout出品的,目前开放源码,并入AJAX Control Toolkit.
- ComboBox
顾名思义,尽管样子做的比较粗糙,但ASP.NET总算有了官方支持的复合式下拉列表控件。
- ColorPicker
类似于CalendarExtender,这个空间也作为Extender附着在TextBox上,以弹出DIV的形式,为我们提供经常用到的客户端颜色选取功能。
其中,ComboBox 和 ColorPicker 与原有的AJAX Extender差不多,其源文件也是继承自ExtenderControlBase的一个c#类以及相应的Behavior.js。
新控件的使用
使用方式分别如下:
<
asp:TextBox
runat
="server"
ID
="Text"
/>
<
ajaxToolkit:ColorPickerExtender
runat
="Server"
BehaviorID
="ColorPicker"
TargetControlID
="Text"
/>
<
ajaxToolkit:ComboBox
ID
="ComboBox1"
runat
="server"
DropDownStyle
="Simple"
>
<
asp:ListItem
>
&
</
asp:ListItem
>
<
asp:ListItem
>
a
</
asp:ListItem
>
<
asp:ListItem
>
A
</
asp:ListItem
>
<
asp:ListItem
>
AA
</
asp:ListItem
>
<
asp:ListItem
>
AaA
</
asp:ListItem
>
<
asp:ListItem
>
b
</
asp:ListItem
>
<
asp:ListItem
>
bc
</
asp:ListItem
>
<
asp:ListItem
>
bcd
</
asp:ListItem
>
<
asp:ListItem
>
bd
</
asp:ListItem
>
<
asp:ListItem
>
c
</
asp:ListItem
>
<
asp:ListItem
>
ee fff
</
asp:ListItem
>
</
ajaxToolkit:ComboBox
>
而HTMLEditor则是一个相对独立的控件,支持多种配置,比较复杂,一般配置的使用方式如下:
<
HTMLEditor:Editor
runat
="server"
Id
="editor"
Height
="300px"
AutoFocus
="true"
Width
="100%"
/>
也可以根据需要配置成其它模式:
<
customEditors:Lite
runat
="server"
id
="editor"
Height
="400px"
Width
="500px"
/>
<
customEditors:LiteNoBottom
runat
="server"
id
="editor"
Height
="400px"
Width
="500px"
/>
也可以从客户端添加,示例如下:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
>
Displaying HTMLEditor in an htm page
</
title
>
<
script
src
="Script/MicrosoftAjax.debug.js"
type
="text/javascript"
></
script
>
<
script
src
="AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.Common.Common.js"
type
="text/javascript"
></
script
>
<
script
src
="AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.ExtenderBase.BaseScripts.js"
type
="text/javascript"
></
script
>
<
script
src
="AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.HTMLEditor.ClientSideEditor.js"
type
="text/javascript"
></
script
>
<
script
src
="AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.DynamicPopulate.DynamicPopulateBehavior.js"
type
="text/javascript"
></
script
>
<
link
href
="AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.HTMLEditor.CssAndImages/Css/Editor.css"
rel
="stylesheet"
type
="text/css"
/>
<
style
type
="text/css"
>
a
{
font
:
11px Verdana
;
color
:
#315686
;
text-decoration
:
underline
;
}
a:hover
{
color
:
crimson
;
}
</
style
>
</
head
>
<
body
>
<
a
href
="../HTMLEditor.aspx"
><
Back
to <strong
>
HTMLEditor
</
strong
>
page
</
a
>
<
br
/><
br
/>
<
form
action
="ToolkitTest.htm"
>
<
textarea
id
="editor"
style
="width:100%; height:600px;"
><
span
style
="font-weight: bold;"
>
Hello world
</
span
>
</
textarea
>
</
form
>
<
script
type
="text/javascript"
>
//
<![CDATA[
Sys.Application.add_init(
function
() {
$create(AjaxControlToolkit.HTMLEditor.ClientSideEditor,
{
//
content: "Another <span style=\"font-weight: bold;\">Hello world</span> ",
//
width: "100%",
//
height: "700px",
imagesPath:
"
AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.HTMLEditor.CssAndImages/Images/
"
,
popupCss:
"
AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.HTMLEditor.CssAndImages/Css/AttachedTemplatePopup.css
"
,
designPanelCss:
"
AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.HTMLEditor.CssAndImages/Css/DesignPanel.css
"
,
documentCss:
"
AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.HTMLEditor.CssAndImages/Css/Document.css
"
},
null
,
null
, $get(
"
editor
"
));
});
Sys.Application.initialize();
//
]]>
</
script
>
</
body
>
</
html
>
与多数HTML编辑控件类似,读写的两个方法也是:
$find(
"
<%= editor1.ClientID %>
"
).get_content();
$find(
"
<%= editor1.ClientID %>
"
).set_content(
"
hello
"
);
重大更新?
如果只是这些,也算不上是“重大更新”,真正令AJAX Control Toolkit 使用者们感到震惊的是:此次发布的AJAX Control Toolkit 是release版,而非以往的debug版!
也就是说所有的js源代码都经过压缩,并且使用了简单的变量名混淆!打开js一看只有乱糟糟的一行!
这有可能是AJAX Control Toolkit 结束开源的一个征兆(之前2009 .net技术大会上曾有微软内部消息说AJAX Control Toolkit 要并入ASP.NET 4.0,结束开源)
结束语:
作为技术支持人员,我们知道AJAX Control Toolkit还遗留着众多的BUG,很多应用还需要对源代码做进一步的定制和修改。
在国内,AJAX Control Toolkit并没有得到广泛的应用,多归咎于其效率较低(可参考ASP.NET AJAX Advance Tips & Tricks (4) ASP.NET AJAX Performance Improvement ),而微软此举会把AJAX Control Toolkit引向何途呢?让我们拭目以待...
=================================================================
勘误!勘误!
很抱歉,其实这次发布的AJAX Control Toolkit包含了debug版的源码!不过没有包含在VS解决方案里而已:
太囧了。。。o(╯□╰)o