I’m excited to announce a new release of the Ajax Control Toolkit which you can download immediately from:
In this release, we concentrated on making improvements in three areas:
- Fixing compatibility issues between Internet Explorer 9 and the Ajax Control Toolkit
- Improving the RoundedCorners extender to take advantage of CSS 3
- Improving the DropShadow extender to take advantage of CSS 3
The steps for installing the Ajax Control Toolkit are detailed (with video) here:
Improved RoundedCorner Extender
You can use the Ajax Control Toolkit RoundedCorners extender to modify a standard ASP.NET Panel control so that it has rounded corners:
Here’s the code used to create this page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Simple.aspx.cs" Inherits="ACTSamples.RoundedCorners.Simple" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Simple.aspx.cs" Inherits="ACTSamples.RoundedCorners.Simple" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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 runat="server">
<title>Simple Rounded Corners</title>
<style type="text/css">
html {
background-color: Blue;
}
.rounded {
background-color: White;
width: 300px;
}
.rounded_content {
padding:10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Panel ID="MyPanel" CssClass="rounded" runat="server">
<div class="rounded_content">
<h1>Hello World!</h1>
</div>
</asp:Panel>
<asp:RoundedCornersExtender ID="rc1" TargetControlID="MyPanel" runat="server">
</asp:RoundedCornersExtender>
</div>
</form>
</body>
</html>
There are four things which you should notice in the code above:
- The page includes a @Register directive (at the very top of the page) which registers the Ajax Control Toolkit controls and extenders for the page. This register directive is added to the page automatically when you drag an Ajax Control Toolkit control from the Toolbox onto the page.
- The page includes a ToolkitScriptManager instead of the standard ScriptManager. You must use this version of the ScriptManager when using the Ajax Control Toolkit.
- The page includes a RoundedCorners extender which includes a TargetID attribute which points at a Panel control named MyPanel. This extender causes the Panel to appear with rounded corners.
- The page includes a style sheet which gives the Panel control a different background color than the page so that you can see the rounded corners.
In previous versions of the Ajax Control Toolkit, the rounded corners effect was created by instantiating several DIV tags. The DIV tags created the illusion of rounded corners.
For example, here’s how previous versions of the Ajax Control Toolkit would render the MyPanel Panel control with rounded corners :
<DIV class=rounded id=MyPanel style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: top; WIDTH: 300px; PADDING-TOP: 0px; BACKGROUND-COLOR: transparent; className: "><DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 5px; OVERFLOW: hidden; MARGIN-RIGHT: 5px; HEIGHT: 1px; BACKGROUND-COLOR: white" __roundedDiv="true"></DIV> <DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 2px; OVERFLOW: hidden; MARGIN-RIGHT: 2px; HEIGHT: 1px; BACKGROUND-COLOR: white" __roundedDiv="true"></DIV> <DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 1px; HEIGHT: 1px; BACKGROUND-COLOR: white" __roundedDiv="true"></DIV> <DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; HEIGHT: 1px; BACKGROUND-COLOR: white" __roundedDiv="true"></DIV> <DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; HEIGHT: 1px; BACKGROUND-COLOR: white" __roundedDiv="true"></DIV> <DIV class=rounded id="" style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; OVERFLOW: auto; BORDER-LEFT: medium none; WIDTH: 100%; BORDER-BOTTOM: medium none"> <DIV class=rounded_content> <H1>Hello World!</H1></DIV></DIV> <DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; HEIGHT: 1px; BACKGROUND-COLOR: white" __roundedDiv="true"></DIV> <DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; HEIGHT: 1px; BACKGROUND-COLOR: white" __roundedDiv="true"></DIV> <DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 1px; HEIGHT: 1px; BACKGROUND-COLOR: white" __roundedDiv="true"></DIV> <DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 2px; OVERFLOW: hidden; MARGIN-RIGHT: 2px; HEIGHT: 1px; BACKGROUND-COLOR: white" __roundedDiv="true"></DIV> <DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 5px; OVERFLOW: hidden; MARGIN-RIGHT: 5px; HEIGHT: 1px; BACKGROUND-COLOR: white" __roundedDiv="true"></DIV></DIV>
The advantage of this technique is that it is highly compatible with different browsers. This technique works with all browsers, even older browsers such as Internet Explorer 6, which do not have native support for rounded corners.
Modern browsers — such as Internet Explorer 9, Firefox 3.6, Safari 5, and Chrome 10 – now all have native support for rounded corners through Cascading Style Sheet attributes. The latest release of the Ajax Control Toolkit detects whether or not a browser supports rounded corners natively and uses CSS attributes when a browser supports them. Otherwise, if the browser does not support rounded corners natively, the Ajax Control Toolkit falls back to using the old technique of simulating rounded corners with lots of DIV tags.
Here’s the algorithm that the RoundedCorners extender uses:
// This works with IE and latest versions of Chrome
if (e.style.borderRadius != undefined) {
// Use borderRadius to create rounded corners
}
// This works with FireFox
else if (e.style.MozBorderRadius != undefined) {
// Use MozBorderRadius to create rounded corners
}
// This works with older versions of google Chrome
else if (e.style.WebkitBorderRadius != undefined) {
// Use WebkitBorderRadius to create rounded corners
// if browser does not support css3 then continue with old way to make corners round
else {
// Use Lots of DIVs to create rounded corners
}
The code above feature detects whether a browser supports a CSS attribute for generating rounded corners. If the browser supports the borderRadius, MozBorderRadius, or WebkitBorderRadius attribute then rounded corners are created using CSS. Otherwise, the code uses the Lots of DIVs technique to simulate rounded corners.
The advantage of using CSS to generate the rounded corners is that the corners appear much smoother. For example, here is a comparison of rounded corners in IE 6 versus IE 9 (zoomed 300%):
Notice that the rounded corners are much smoother in Internet Explorer 9 because this browser uses the CSS standard for generating rounded corners.
Another advantage of using CSS corners is that it results in much cleaner rendered HTML. For example, here is what the RoundedCorners extender renders for Mozilla Firefox:
<div class="rounded" id="MyPanel" style="-moz-border-radius: 5px 5px 5px 5px; border: 0px none;">
<div class="rounded_content">
<h1>Hello World!</h1>
</div>
</div>
Improved DropShadow Extender
We also improved the DropShadow extender. We modified the DropShadow extender so it works with Internet Explorer 9 (the previous version had compatibility issues). We also modified the DropShadow extender so it uses CSS attributes to create the drop shadow when a browser supports the CSS attributes.
Here is a page which demonstrates how you can use the DropShadow extender to display a drop shadow behind a Panel control:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Simple.aspx.cs" Inherits="ACTSamples.DropShadow.Simple" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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 runat="server">
<title>Simple DropShadow Sample</title>
<style type="text/css">
html {
background-color: green;
}
.dropShadow {
background-color: White;
width:300px;
}
.dropShadow_content {
padding: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Panel ID="MyPanel" CssClass="dropShadow" runat="server">
<div class="dropShadow_content">
<h1>Hello World!</h1>
</div>
</asp:Panel>
<asp:DropShadowExtender
ID="DropShadowExtender1"
TargetControlID="MyPanel"
Width="10"
Rounded="true"
runat="server">
</asp:DropShadowExtender>
</div>
</form>
</body>
</html>
The code above renders the following drop shadow:
In the code above, two properties of the DropShadow extender are set:
- Width – The width of the drop shadow in pixels.
- Rounded – When true, the control being extended appears with rounded corners.
If a browser supports the boxShadow, MozBoxShadow, WebkitBoxShadow attribute then the DropShadow extender will use the supported attribute. Otherwise, the DropShadow extender will fall back to simulating a drop shadow by injecting a new DIV tag into the page.
The DropShadow extender uses the following algorithm to create a drop shadow:
// this works in IE9 and Chrome latest versions
if (e.style.boxShadow != undefined) {
}
// this works for Mozila Firefox
else if (e.style.MozBoxShadow != undefined) {
}
// this works for Chrome older version, Safari
else if (e.style.WebkitBoxShadow != undefined) {
}
// Otherwise, use the old method of creating a DropShadow
else {
}
The advantage of using a CSS attribute to create the drop shadow is that the shadow is less blocky and appears much smoother (especially when a drop shadow is used in combination with a rounded corner).
Unfortunately, we discovered one issue after releasing the improved DropShadow extender. The DropShadow extender in the new release of the Ajax Control Toolkit does not work when placed in an UpdatePanel control. We are working to fix this issue with the next release of the Ajax Control Toolkit expected in a few weeks.
Summary
In this latest release of the Ajax Control Toolkit we have made significant improvements in three areas. We fixed several compatibility issues between the Ajax Control Toolkit and the Internet Explorer 9 browser. We also improved both the RoundedCorners extender and the DropShadow extender by adding support for the latest CSS 3 attributes such as borderRadius and boxShadow.
I thought Microsoft was done with this toolkit and developers were to be looking at jQuery for functionality.
Is there a roadmap for this project? What exactly can we expect in the future?
@livingston MSFT never stop development on stuff they made even no one use them or product used by too much. i am really confused with this concept because i never feel nothing with it. the example here are Ajax Control Toolkit and Internet Explorer both not msft trying to stop whenever no one want to follow them.
when developer move to chrome and jQuery from their product they still focus on thing they made.
well i appreciate this feeling but myself never got the chance to use ACT because whenever i am start their is a good thing i see first is jQuery and no one else tell me about that so i never hear about that even i find the template in VWD sp1 whenever much template about asp.net ajax but i never found what ajax really is.
when i start working in js someone else tell me about jQuery no one about ACT so offcourse i never find something about it.
@Livingston — Anyone who reads my blog knows that I am a huge jQuery fan 🙂 That said, the Ajax Control Toolkit project remains one of the most popular projects on CodePlex. If you look at the CodePlex home page then you can see that the Ajax Control Toolkit project is currently the second most popular CodePlex project overall. The new release of the Ajax Control Toolkit has already gotten over 30,000 downloads in just a couple of weeks. The number of people who use the Ajax Control Toolkit boggles the mind.
This is the thing I like about Asp.net and associated toolkit..
We the server side developers should continue to focus on business problems and hopefully newer versions of runtime and toolkits will generate markup more friendlier to newer generation of browser. Hoping toolkit or framework itself will add more Html 5 friendly controls..
I guess the popularity of the toolkit is common ajax functionality with little effort for most asp.net developers. I try to use only jquery now as it gives me more control but i think it still cant compete with the simplicity of the ajax toolkit when developing in webforms. Maybe a challenge for jquery?
@Tt22: Let me know if you feel ajax toolkit is awesome when you have bugs due to the use of it that are almost impossible to fix without being a genius. In my opinion, ajax tool kit is easier to use than JQuery, but JQuery is easier to maintain.
you are inspiring us to write such a article thanks for sharing us.well done.