DropShadowExtender AJAX Control Example

If you are new to AJAX, Please refer to my Simple AJAX Example to understand how simple to start with AJAX.

Step 1: Add Script Manager

Step 2: Add a pannel control to asp.net page

Step 3: Add all controls inside Pannel Control, that you wish to see in Rounded Corner Box (ie. Applying DropShadow effect)

Note: Good Practise while defining pannel for DropShadowExtender Control

• Assign Width Property
• Assign BackColor Property eg: here I have used HotPink Color.

<asp:Panel ID="pnlMyCalcy" runat="server" BackColor="HotPink"Width="300">


Step 4: Adding DropShadowExtender Control, and Initialize"TargetControlID" Property with Pannel Control Id and Property TrackPosition="true"

<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="pnlMyCalcy" Opacity="75" Rounded="true" Radius="10" Trackposition="true"> </cc1:DropShadowExtender> 

----------------------------------------------------------------------------------------------

ValidatorCalloutExtender AJAX Control Example

ValidatorCalloutExtender AJAX Control Example
If you are new to AJAX, Please refer to my Simple AJAX Example to understand how simple to start with AJAX.

Step 1: Add AJAX Script Manager

Step 2: For using ValidatorCalloutExtender, it is not compulsory to add Update Pannel, as this control is extender for validation control, so you must check 1 ValidatorCalloutExtender must associated with 1 Validation Control.

Step 3: Look a sample code to understand howValidatorCalloutExtender works

• Initialize TargetControlID of ValidatorCalloutExtender control with ID of Validation Control you wish to associate with thatz it, nothing more.

<asp:TextBox ID="txtDigit1" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfvDigit1" runat="server" ErrorMessage="Please Enter Digit1" ControlToValidate="txtDigit1" Display="None"></asp:RequiredFieldValidator>
<cc1:ValidatorCalloutExtender ID="rfvDigit1Ext" runat="server" TargetControlID="rfvDigit1">
</cc1:ValidatorCalloutExtender>
<asp:RegularExpressionValidator ID="revDigit1" runat="server" ErrorMessage="Please enter &lt;b>valid Numeric value</b> "  ControlToValidate="txtDigit1" Display="None" ValidationExpression="\d{0,15}"></asp:RegularExpressionValidator>
<cc1:ValidatorCalloutExtender ID="revDigit1Ext" runat="server" TargetControlID="revDigit1">
</cc1:ValidatorCalloutExtender>

Simple AJAX Example of Asp.net AJAX Framework

Simple AJAX Example of Asp.net AJAX Framework

In Simple Term what is AJAX?
AJAX is way by which we can avoid postback to perform server-side processing.

Consider Calculator Example: Following is a simple web application which performs calculation based on operation selected.



Problem with this application is when you click calculate button the default behavior is Page Postback occurs, and which is not user friendly. You can see in following Image that on Pressing Calculate Button page postback occurs and in worst case it take even time to render controls, as shown in figure, due to heavy calculation.


Now lets understand how we can avoid Page Postback with the use of AJAX and make a user friendly application.

AJAX Example with Visual Studio 2008 and Asp.net 3.5
Note: With VS.Net 2008 we don't need to modify web.config file as we used to do while using Ajax extension in VS.Net 2005, as AJAX Framework support is inbuilt with VS.Net 2008.

Step 1: Add Script Manager, Note: Every AJAX Application must contain Script Manager.



Step 2: Add Update Pannel, In AJAX anything inside Update Pannel, will avoid Page Postback and process server-side calculation as if client function has occurred.



Step 3: Put the controls Inside Update Pannel, which require Page Postback. In our example, I have form this calcy application in table so rather than putting just a button and result label i have put whole table, but otherwise you can just put LABEL and Button, as button cause Page Postback and Label updates actual result.



Now, run the application and you will feel the difference, the page will now not postback to calculate same operation which was causing Page Postback before.



So its so easy to make AJAX Enabled application with VS.Net 2008. For downloading AJAX Control Toolkit Extension for VS.Net 2008

Monday, June 16, 2008

DropShadowExtender AJAX Dynamic Length Problem and Solution

DropShadowExtender AJAX Dynamic Length Problem and Solution

When you are using AJAX Control Toolkit Control DropShadowExtender, you might run into problem when you are trying to increase length of pannel control dynamically.

A Real Time Scenario: I have assign DropDownExtender to my Login Control pannel, but when i tried to display ValidationSummary error, its run into problem.

Before Validation Fires everything runs smooth.

Problem starts when you try to display Validation Summary message in pannel.

So the solution is

Just add TrackPosition="true" in your DropDownExtender control definition.

so it should finally look something like below code.

<cc1:DropShadowExtender ID="DropShadowNewUser" runat="server"







TargetControlID="pnlNewUser" Opacity="75" Radius="6" Rounded="true"







TrackPosition="true">







</cc1:DropShadowExtender>

Friday, June 13, 2008

AJAX Control Toolkit VS.Net 2008

AJAX Control Toolkit for Visual Studio.Net 2008.

AjaxControlToolkit-Framework3.5 - AJAX Control Toolkit targets the official release of .NET Framework 3.5 and Visual Studio 2008.

Download The AJAX Control Toolkit of .Net Framework 3.4 and VS.Net 2008

How To Add AJAX Control Toolkit to VS.Net 2008 Toolbox.

• Download The AJAX Control Toolkit of .Net Framework 3.4 and VS.Net 2008
• Extract the AJAXControlToolkit3.5.Zip File.
• Open the SampleWebSite Project in VS.Net 2008
• Compile the Project, so that it generates AjaxControlToolkit.dll File in Bin Folder of SampleWebSite Project of AJAX Control Toolkit.
• Now, To add AJAX Control Toolkit to VS.Net 2008 Toolbox, right click the in Toolbox and Choose Add Tab from popup box