AJAX Control ToolKit RoundedCorners Tutorial Example using ASP.NET C#

Welcome to another AJAX tutorial, today we will be going over the AJAX extender RoundedCorners.

We used Microsoft’s Visual Studio 2010; Visual Web Developer can also be used to recreate this tutorial.

Rounded Corners are frequently requested CSS techniques. Some of you CSS Ninjas out there may be familiar with CSS rounded corners, but for those who are not yet Ninja Dojo CSS masters there is an alternative!

Let us show you an easy way to utilize this secret technique known to the AJAX brethren.

But before we unleash the power of the AJAX

Did you know?

Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we’ve found so far.

So today we will be using the great power bestowed upon us by the AJAX Gods, which uses some CSS and some JavaScript.



The RoundedCorners extender applies rounded corners to existing elements. To accomplish this, it inserts elements before and after the element that is selected, so the overall height of the element will change slightly. You can choose which corners of the target panel should be rounded by setting the Corners property.

Client Side References
Sys.Extended.UI.RoundedCornersBehavior Class
• Summary – Rounds the corners of its target element.
• Parameters – Sys.UI.DomElement element

Methods
• initialize() – Initializes the RoundedCorners behavior.
• dipose() – Disposes the RoundedCorners behavior.
• update() – Creates the surrounding div element that has rounded corners.
• disposeParentDiv() – Disposes the surrounding div element that has rounded corners.
• getBackgroundColor() – Gets the background color of the target element.
• moveChildren() – Moves the child nodes from one element to another.
• Parameters – Sys.UI.DomElement src, Sys.UI.DomElement dest
• isCornerSet(corner) – Checks whether the specified corner has been set.
• Parameters – AjaxControlTooolkit.BoxCorners corner
• Returns – true if the corner has been set; otherwise, false.
• setCorner(corner, value) – Sets a corner that should be rounded.
• Parameters – Sys.Extended.UI.BoxCorners corner, Boolean value
• Remarks – Set the value parameter to true to set the corner as rounded. Set the value parameter to falseto clear the rounded corner setting.

Properties
• Color – Gets or sets a string that contains the background color of the rounded corner areas. By default, this property gets the background color of the panel that it is attached to.
• Radius – Gets or sets an integer value that specifies the radius of the corners (and the height of the added area). The default is 5.
• Corners – Gets or sets a Sys.Extended.UI.BoxCorners object that specifies which corners should be rounded.
• BorderColor – Gets or sets a string that contains the color of the border and therefore of the rounded corners.

Sys.Extended.UI.BoxCorners Enum
• Summary – Defines the corners of an element to apply rounding to.

Fields
• None : 0×00
• TopLeft : 0×01
• TopRight : 0×02
• BottomRight : 0×04
• BottomLeft : 0×08
• Top : 0×01 | 0×02
• Right : 0×02 | 0×04
• Bottom : 0×04 | 0×08
• Left : 0×08 | 0×01
• All : 0×01 | 0×02 | 0×04 | 0×08
Server Side References


Server Side References

<ajaxToolkit:RoundedCornersExtender ID="rce" runat="server" 
 TargetControlID="Panel1" 
 Radius="6" 
 Corners="All" />

The properties in italics are optional.
• TargetControlID – The Target control of the ID.
• Radius – The Radius of the Cornes you want to modify
• Corners – You can Seclect which corners to modify or all of them (None, TopLeft, TopRight, BottomRight,BottomLeft, Top, Right, Bottom, Left, or All)


The RoundedCorners extender applies rounded corners to existing elements. To accomplish this, it inserts elements before and after the element that is selected, so the overall height of the element will change slightly. You can choose which corners of the target panel should be rounded by setting the Corners property.

So let’s begin building our rounded corners web application.

1. First let’s add a new WebForm to this project and name it RoundedCorner.aspx.
2. Remember to add a ScriptManager to the page.

 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
 

    </asp:ToolkitScriptManager> 

Now we can begin adding our Panel where the animation or rounded corners will happen without postback.

<asp:Panel ID="Panel1" runat="server" Width="330px" CssClass="roundedPanel">
<div style="padding: 10px; text-align: center">
    <div style="padding: 5px; border: solid black thin; background-color: #B4B4B4;">
        <asp:Image ID="Image1" runat="server" ImageUrl="aa.gif" AlternateText="Rounded Corner Demo" /><br />
        ASP.NET AJAX
    </div>
</div>
</asp:Panel>

We styled the Rounded Panel, just for demonstrations purposes.

<style>
    .roundedPanel
    {
        width: 300px;
        background-color: #5377A9;
        color: white;
        font-weight: bold;
    }
</style>

Now we may add our star of the show the rounded corners extender !!!

<asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" BehaviorID="RoundedCornersBehavior1"
        TargetControlID="Panel1" Radius="6" Corners="All" />

1. As you can see we Set the target ID to control the Panel and gave it a radius of 6 and we are going to manipulate all corners.
2. Now since we called a radius we can demonstrate exactly how it works by adding a few radio buttons and setting the Value in increments of 2 all the way to 10.

<div style="padding-top: 3px;">
        CornerRadius:</div>
    <div style="padding: 10px;">
        <input type="radio" id="radius0" name="radiusValues" value="0" onclick="$findundefined'RoundedCornersBehavior1').set_Radiusundefinedthis.value);" />
        <label for="radius0">
            None</label>
        <input type="radio" id="radius2" name="radiusValues" value="2" onclick="$findundefined'RoundedCornersBehavior1').set_Radiusundefinedthis.value);" />
        <label for="radius2">
            2px</label>
        <input type="radio" id="radius4" name="radiusValues" value="4" onclick="$findundefined'RoundedCornersBehavior1').set_Radiusundefinedthis.value);" />
        <label for="radius4">
            4px</label>
        <input type="radio" id="radius6" name="radiusValues" value="6" onclick="$findundefined'RoundedCornersBehavior1').set_Radiusundefinedthis.value);"
            checked="checked" />
        <label for="radius6">
            6px</label>
        <input type="radio" id="radius10" name="radiusValues" value="10" onclick="$findundefined'RoundedCornersBehavior1').set_Radiusundefinedthis.value);" />
        <label for="radius10">
            10px</label>
    </div>

Next we are going to set the corner values. We used Checkbox this time and set an onclick to change each of the corner but still retaining the above chosen corner radius.

<div style="padding-top: 3px;">
        Corners:</div>
    <div style="padding: 10px;">
        <input type="checkbox" id="corner1" name="cornerValues" value="1" onclick="$findundefined'RoundedCornersBehavior1').setCornerundefinedthis.value, this.checked);"
            checked="checked" />
        <label for="corner1">
            Top Left</label>
        <input type="checkbox" id="corner2" name="cornerValues" value="2" onclick="$findundefined'RoundedCornersBehavior1').setCornerundefinedthis.value, this.checked);"
            checked="checked" />
        <label for="corner2">
            Top Right</label><br />
        <input type="checkbox" id="corner8" name="cornerValues" value="8" onclick="$findundefined'RoundedCornersBehavior1').setCornerundefinedthis.value, this.checked);"
            checked="checked" />
        <label for="corner8">
            Bottom Left</label>
        <input type="checkbox" id="corner4" name="cornerValues" value="4" onclick="$findundefined'RoundedCornersBehavior1').setCornerundefinedthis.value, this.checked);"
            checked="checked" />
        <label for="corner4">
            Bottom Right</label>
    </div>

Now we can select the border color and even change them on the fly.

<div style="padding-top: 3px;">
        Border Color:</div>
    <div style="padding: 10px;">
        <input type="radio" id="color0" name="colorValues" value="" onclick="$findundefined'RoundedCornersBehavior1').set_BorderColorundefinedthis.value);"
            checked="checked" />
        <label for="color0">
            None</label>
        <input type="radio" id="color1" name="colorValues" value="Black" onclick="$findundefined'RoundedCornersBehavior1').set_BorderColorundefinedthis.value);" />
        <label for="color1">
            Black</label>
        <input type="radio" id="color2" name="colorValues" value="Red" onclick="$findundefined'RoundedCornersBehavior1').set_BorderColorundefinedthis.value);" />
        <label for="color2">
            Red</label>
        <input type="radio" id="color3" name="colorValues" value="Aqua" onclick="$findundefined'RoundedCornersBehavior1').set_BorderColorundefinedthis.value);" />
        <label for="color3">
            Aqua</label>
    </div>

Now you should have a few options to play with and here is what it should look like.

Just a panels with different options so you may see the transformations.



See how easy that was?

Not as easy when we,

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s help, we were able to avoid any headaches!

Thank you for reading our tutorial on AJAX Controls, We Aim to provide the best Tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a Tutorial or you can comment below in the comments section.