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

前言

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 > &amp; </ 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 >
    
< 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

AJAX Control Toolkit 5月13日更新介绍及分析_第1张图片

 

 

你可能感兴趣的:(Ajax)