AJAX Control Toolkit 5月13日更新介绍及分析

最新推荐文章于 2019-08-14 02:42:17 发布

weixin_30580943

最新推荐文章于 2019-08-14 02:42:17 发布

阅读量75

点赞数

原文链接：http://www.cnblogs.com/blodfox777/archive/2009/05/18/1459225.html

版权

前言

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