Ajax Control Toolkit November 2011发布

Ajax Control Toolkit November 2011发布了。这个版本引入了气泡控件(Ballon Popup)和对现有的tab控件进行了几个方面的增强,包括按需加载tab内容,支持竖排tab,支持键盘tab导航。另外修复了一些大家关注的tab相关的Bug。

可以从以下站点下载新发布版本:

http://ajaxcontroltoolkit.codeplex.com/

或者,获取最新的Ajax Control Toolkit 的最快最简单的方法是使用NuGet.打开Visual Stuidio 2010的Library Package Manager控制台并输入:

clip_image002

当你使用Nuget安装完后请重新生成你的工程。重新生成后,ajaxToolkit前缀就会在智能提示中出现了:

clip_image004

使用气泡控件(Balloon Popup Control

为什么要加气泡控件?经过CodePlex对Ajax Control Toolkit新特性投票,呼声第二高的就是气泡控件:

clip_image006

气泡显示一条信息当你移动焦点到控件,点击控件或者鼠标悬停到控件。你可以使用气泡控件,例如,来为窗体中的TextBox显示说明:

clip_image007

以下是用来创建气泡控件的代码:

 

<ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" /> 

<asp:TextBox 

    
ID="txtFirstName" 

    Runat
="server" /> 

<asp:Panel ID="pnlFirstNameHelp" runat="server"> 

    Please enter your first name    

</asp:Panel> 

<ajaxToolkit:BalloonPopupExtender 

    
TargetControlID="txtFirstName" 

    BalloonPopupControlID
="pnlFirstNameHelp" 

    BalloonSize
="Small" 

    UseShadow
="true" 

    runat
="server" />

 

你也可以使用气泡控件来解释出现在文本文档中难以理解的词语:

clip_image008

以下是如何来显示气泡当鼠标悬停在链接上:

 

The point of the conversation was 

<asp:HyperLink ID="lnkObfuscate" Text="obfuscated" CssClass="hardWord" runat="server" /> 

by his incessant coughing. 

<ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" /> 

<asp:Panel id="pnlObfuscate" Runat="server"> 

    To bewilder or render something obscure 

</asp:Panel> 

<ajaxToolkit:BalloonPopupExtender 

    
TargetControlID="lnkObfuscate" 

    BalloonPopupControlID
="pnlObfuscate" 

    BalloonStyle
="Cloud" 

    UseShadow
="true" 

    DisplayOnMouseOver
="true" 

    Runat
="server" /> 

 

当你使用气泡控件时,有四个你需要知道的重要属性:

BalloonSize - 3个气泡尺寸为Small,Medium,和Large

BalloonStyle - 2个内置样式为Rectangle和Cloud

UseShadow - 当为true时,气泡后会出现阴影。

Position- 可以设置值为Auto,BottomLeft,BottomRight,TopLeft,TopRight。当设置为Auto时,默认设置,气泡将出现在它具有最大屏幕展示的位置。

 

下面的屏幕截图列举了这些设置是如何影响气泡的外观:

clip_image010

clip_image012

clip_image014

Customizing the Balloon Popup

通过创建你自己的样式表,你可以自定义气泡外观。Ajax Control Toolkit 样例站点包含一个自定义椭圆形气泡的例子:

clip_image016

通过使用自定义样式表和图片来创建自定义样式。通过指定气泡属性CustomCssUrl和CustomClassName来确定相应的自定义样式表路径和自定义样式表类名称:

 

<asp:TextBox ID="txtCustom" autocomplete="off" runat="server" /> 

<br /> 

<asp:Panel ID="Panel3" runat="server"> 

    This is a custom BalloonPopupExtender style created with a custom 

    Cascading Style Sheet. 

</asp:Panel> 

<ajaxToolkit:BalloonPopupExtender 

    
ID="bpe1" 

    TargetControlID
="txtCustom" 

    BalloonPopupControlID
="Panel3" 

    BalloonStyle
="Custom"    

    CustomCssUrl
="CustomStyle/BalloonPopupOvalStyle.css" 

    CustomClassName
="oval" 

    UseShadow
="true" 

    runat
="server" />

 

更多关于气泡控件

更多关于气泡控件,请访问Ajax Control Toolkit样例网站:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/BalloonPopup/BalloonPopupExtender.aspx

Tab控件改进

在这个版本中,我们为现有的Tab控件引入 了几个重要的新特性。我们也修复所有的高投票的Tag控件的Bugs。

按需加载Tab内容

有一个这样的场景:想象你正在Web Forms页面中使用Tab控件。Tab控件展示了两个Tab:客户和产品。当你点击客户Tab当你要查看客户列表,当你点击产品Tab当你要查看产品列表。

在这样一个场景,你不需要客户和产品列表在页面初始化打开时从数据库获取。用户可能从未点击产品tab,那么从数据库加载产品列表的所有工作将被浪费。

在这样一个场景,你要tab页中内容按需加载。产品只应该在你点击产品Tab时才从数据库加载而不是在此之前。

clip_image018

Ajax Control Toolkit November 2011 Release中的tab控件引入了一个命名为OnDemand的新属性。当OnDemand的值设置为True时,tab面板直到你点击想关联的tab时才加载。

以下是Aspx页面代码:

 

<ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" /> 

<ajaxToolkit:TabContainer ID="tabs" OnDemand=”true" runat="server"> 

    <ajaxToolkit:TabPanel HeaderText="Customers" runat="server"> 

    <ContentTemplate> 

        <h2>Customers</h2> 

        <asp:GridView ID="grdCustomers" DataSourceID="srcCustomers" runat="server" /> 

        <asp:SqlDataSource 

            
ID="srcCustomers" 

            SelectCommand
="SELECT * FROM Customers" 

            ConnectionString
="<%$ ConnectionStrings:StoreDB %>" 

            runat
="server" /> 

    </ContentTemplate>    

    </ajaxToolkit:TabPanel> 

    <ajaxToolkit:TabPanel HeaderText="Products" runat="server"> 

    <ContentTemplate> 

        <h2>Products</h2> 

        <asp:GridView ID="grdProducts" DataSourceID="srcProducts" runat="server" /> 

        <asp:SqlDataSource 

            
ID="srcProducts" 

            SelectCommand
="SELECT * FROM Products" 

            ConnectionString
="<%$ ConnectionStrings:StoreDB %>" 

            runat
="server" /> 

    </ContentTemplate> 

    </ajaxToolkit:TabPanel> 

</ajaxToolkit:TabContainer>

 

注意TabContainer包含一个OnDemand="True"的属性.这个Tabs控件包含两个Tab面板。第一个tab面板使用一个GridView和SqlDataSource来展示客户列表,第二个tab面板使用一个GridView和SqlDataSource来展示产品列表。

以下是页面的后台代码:

 

using System; 

using System.Diagnostics; 

using System.Web.UI.WebControls; 

namespace ACTSamples { 

    public partial class TabsOnDemand : System.Web.UI.Page { 

        protected override void OnInit(EventArgs e) { 

            srcProducts.Selecting += new SqlDataSourceSelectingEventHandler(srcProducts_Selecting); 

        } 

        void srcProducts_Selecting(object sender, SqlDataSourceSelectingEventArgs e) { 

            Debugger.Break(); 

        } 

    } 

}

 

后台代码文件包含一个产品SqlDataSource的Selecting事件的event handler. 通过调用Debugger.Break()方法 处理程序断入到调试器。那样,当产品SqlDataSource实际获取产品列表时我们就可以知道了。

当OnDemand属性的值为False时那么Selecting event handler 被立即调用,当页面第一次加载时。所有tab中的内容被加载(和未选中隐藏tab的内容)当页面第一次加载。

当OnDeman属性的值为True时那么Selecting event handler不被调用,当页面第一次加载时。Event handler直到你点击产品tab时才被调用。如果你从未点击产品tab,那么产品列表不会被从数据库加载。

当tab面板中的加载时如果你要更多控制,那么你可以使用TabPanel的OnDemand属性。该属性接受一下3个值:

· None – 从未再加载tab面板内容当页面第一次加载后.

· Once – 等待直到tab被选中来加载tab面板的内容

· Always – 加载tab面板内容当你每次点击tab时。

有一个Tabs控件的OnDemand属性的现场演示在这:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Tabs/Tabs.aspx

展示竖排Tabs

随着 November 2011 发布, Tabs控件现在支持竖排Tabs.

clip_image020

要创建竖排tabs,只需像这样设置TabContainer的UseVerticalStripPlacement属性的值:

 

<ajaxToolkit:TabContainer ID="tabs" OnDemand="false" UseVerticalStripPlacement="true" runat="server"> 

    <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="First Tab" runat="server"> 

    <ContentTemplate> 

    <p> 

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. 

    </p> 

    </ContentTemplate>    

    </ajaxToolkit:TabPanel> 

    <ajaxToolkit:TabPanel ID="TabPanel2" HeaderText="Second Tab" runat="server"> 

    <ContentTemplate> 

    <p> 

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. 

    </p> 

    </ContentTemplate> 

    </ajaxToolkit:TabPanel> 

</ajaxToolkit:TabContainer>

 

此外,你可以使用TabStripPlacement属性来控制tab条(tab trip)是否出现在tab面板的左或者右或者上或者下:

clip_image022

Tab键盘导航

另一个呼声较高的Tabs控件的特性是支持键盘导航。Tabs控件现在支持箭头键和Home和End键。

为了箭头键能工作,你必须首先移动焦点到页面中的tab控件通过鼠标点击tab或者不断使用tab键。

你可以通过包含在Tabs样例页面中的任何demo尝试新键盘导航支持:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Tabs/Tabs.aspx

从 <http://stephenwalther.com/blog/archive/2011/11/16/ajax-control-toolkit-november-2011-release.aspx> 插入

原文地址:https://www.cnblogs.com/qishichang/p/2269634.html