Asp.Net ajax control toolkit extender example

This Asp.Net Ajax tutorial, we will discuss Asp.Net ajax control toolkit calendar extender example. We will see how to use the below ajax extender example:

  • Asp.Net ajax calendar extender example
  • asp.net ajax modalpopupextender example
  • Show ModalPopupExtender in code behind in Ajax in Asp.Net
  • Ajax control toolkit password strength example
  • Asp.Net Ajax balloonpopupextender example
  • Asp.Net Ajax AnimationExtender Example

Asp.Net ajax calendar extender example

Now, let us see asp.net ajax calendar extender example.

Here in this example, when a user clicks on the calendar icon, the calendar will pop up and when the user selects a date, then the date will be populated in the textbox in Asp.Net.

First, drag and drop a calendar extender control to the page from the toolbox in Visual Studio. You can check out this article if you want to know how to add ajaxextender controls to the toolbox. The code will look like below:

<ajaxToolkit:CalendarExtender ID="CalendarExtender1″ runat="server" PopupPosition="Right" PopupButtonID="image" TargetControlID="txtDate" Format="MM/dd/yyyy"></ajaxToolkit:CalendarExtender>

Here are some properties of the control:

  • PopupPosition: You can set the position where the calender will popup.
  • PopupButtonID: ID of the button on which click you want the calendar to open.
  • TargetControlID: This is the target control id where the selected date will appear.
  • Format: This is the date format you want the date to appear.

Below is the full code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default17.aspx.cs" Inherits="Default17″ %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ajaxcontroltoolkit calendarextender example</title>
</head>
<body>
<form id="form1″ runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1″ runat="server"> </ajaxToolkit:ToolkitScriptManager>
<asp:TextBox ID="txtDate" runat="server" Style="width: 198px"></asp:TextBox>
<asp:Image ID="image" runat="Server" ImageUrl="~/icon-calendar.gif" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1″ runat="server" PopupPosition="Right" PopupButtonID="image" TargetControlID="txtDate" Format="MM/dd/yyyy"></ajaxToolkit:CalendarExtender>
</div>
</form>
</body>
</html>

This is how we can use ajax control toolkit calendar extender in asp.net.

asp.net ajax modalpopupextender example

Now, we will see how to use ajax modalpopupextender in asp.net with an example.

In this example whenever a user click on a button, a modal dialog box will open.

First, drag and drop an Ajax ModalPopupExtender from the toolbox. If the Ajax Extender controls are not appearing in the toolbox then check this article to add to the toolbox.

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1″ runat="server" BackgroundCssClass="modalBackground" PopupControlID="pnlPopupMsg" TargetControlID="btnClick"> </ajaxToolkit:ModalPopupExtender>

Here PopupControlID will be the id of the pop up to display, generally it will be the panel id which will open.

  • TargetControlID: Is the ID of the button or link button on click of which you want to open the dialogbox.
  • BackgroundCssClass: Is the css class that will make the background that will make the background grey.

Below is the full code with css.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default14.aspx.cs" Inherits="Default14″ %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ModalPopupExtender example in Ajax in Asp.Net</title>
<style type="text/css">
.modalBackground {
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.7;
}

.modalPopup {
background-color: #FFFFFF;
border: 3px solid #CCC;
padding-top: 10px;
padding-left: 10px;
width: 300px;
height: 140px;
clear: both;
position: absolute;
margin-top: 0;
}
</style>

</head>
<body>
<form id="form1″ runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1″ runat="server"></ajaxToolkit:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1″ runat="server">
<ContentTemplate>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1″ runat="server" BackgroundCssClass="modalBackground" PopupControlID="pnlPopupMsg" TargetControlID="btnClick">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlPopupMsg" runat="server" CssClass="modalPopup">
<asp:Label ID="lblMessage" runat="server" Text="Here is the message which will come!!!"></asp:Label><br />
<br />
<asp:Button ID="btnYes" runat="server" Text="Yes"  />
<asp:Button ID="btnNo" runat="server" Text="NO"  />
</asp:Panel>
<asp:Button ID="btnClick" runat="server" Text="Click here to see pop up" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

After this when you click on the button, the dialog box in asp.net. This is how we can use Ajax ModalPopupExtender in asp.net.

Show ModalPopupExtender in code behind in Ajax in Asp.Net

Now we will see how to use ajax modalpopupextender in asp.net with an example. We will see how to show a ModalPopupExtender in the code behind rather than in a simple button click.

Suppose you want to show the modal popup on a button click after executing some conditions then you can do like below:

First, drag and drop an Ajax ModalPopupExtender from the toolbox.

To achieve this we will take 2 buttons and one button we will hide by writing Style=”display: none” and we will give the TargetControlID to this button Id. We will not set any property. And in the other button OnClick event we will show the modal popup like below:

this.ModalPopupExtender1.Show();

You can follow below code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default15.aspx.cs" Inherits="Default15″ %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show ModalPopupExtender in code behind in Ajax in Asp.Net</title>
<style type="text/css">
.modalBackground {
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.7;
}
.modalPopup {
background-color: #FFFFFF;
border: 3px solid #CCC;
padding-top: 10px;
padding-left: 10px;
width: 300px;
height: 140px;
clear: both;
position: absolute;
margin-top: 0;
}
</style>

</head>
<body>
<form id="form1″ runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1″ runat="server"></ajaxToolkit:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1″ runat="server">
<ContentTemplate>
<asp:Button ID="btnForAjax" runat="server" Text="" Style="display: none" />

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1″ runat="server" BackgroundCssClass="modalBackground" PopupControlID="pnlPopupMsg" TargetControlID="btnForAjax">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlPopupMsg" runat="server" CssClass="modalPopup">
<asp:Label ID="lblMessage" runat="server" Text="Here is the message which will come!!!"></asp:Label><br />
<br />
<asp:Button ID="btnYes" runat="server" Text="Yes" OnClick="btnYes_Click" />
<asp:Button ID="btnNo" runat="server" Text="NO" OnClick="btnNo_Click" />
</asp:Panel>
<asp:Button ID="btnClick" runat="server" Text="Click here" OnClick="btnClick_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

Below is the .cs code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default15 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}

protected void btnYes_Click(object sender, EventArgs e)
{
}

protected void btnNo_Click(object sender, EventArgs e)
{
}

protected void btnClick_Click(object sender, EventArgs e)
{
this.ModalPopupExtender1.Show();
} 
}

This is how we can use ajax modalpopupextender in Asp.Net.

Ajax control toolkit password strength example

Here, we will see, how to check the strength of the password using PasswordStrength Ajax control in asp.net.

This post expalins how to check the strength of the password which is entered in the text box using PasswordStrength control from ajaxtoolkit.

The source page is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Password Strength control Example</title>
<style type="text/css">
.c1
{
width:200px;
height:180px;
background-color:Aqua;
color:Maroon;
padding:15px;
}
</style>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager runat="server">
</asp:ToolkitScriptManager>
<asp:Panel ID="p1" runat="server" CssClass="c1">
Password Strength:
<asp:TextBox ID="t2" runat="server"></asp:TextBox>
<asp:PasswordStrength ID="ps1" runat="server" TargetControlID="t2"
DisplayPosition="RightSide" StrengthIndicatorType="Text" PreferredPasswordLength="12"
PrefixText="strength:" MinimumNumericCharacters="2"
MinimumSymbolCharacters="2" RequiresUpperAndLowerCaseCharacters="false"
TextStrengthDescriptions=" weak;average;strong;excellent"
CalculationWeightings="30;25;25;20">
</asp:PasswordStrength>
</asp:Panel>
</div>
</form>
</body>
</html>

Asp.Net Ajax balloonpopupextender example

Now, we will see how to use BalloonPopupExtender ajax control in asp.net. We can use use Balloonpopup Extender control in the asp.net web page to make balloon popup effect.

The source page of the code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>BalloonPopupExtender control Example</title>
<style type="text/css">
.c1
{
width:280px;
height:240px;
background-color:Green;
border:1px black;
padding:15px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager runat="server">
</asp:ToolkitScriptManager>
// panel control is used to make balloonpopup
<asp:Panel ID="p1" runat="server" CssClass="c1">This is balloon popup!!</asp:Panel>
// textbox is the target control of the balloonpopup Extender
<asp:TextBox ID="t1" runat="server"></asp:TextBox>
<asp:BalloonPopupExtender ID="ballpopEx1" runat="server" TargetControlID="t1" BalloonPopupControlID="p1" Position="BottomRight" BalloonStyle="Cloud" BalloonSize="Small" UseShadow="true" ScrollBars="Auto" DisplayOnMouseOver="true" DisplayOnFocus="false" DisplayOnClick="true">
</asp:BalloonPopupExtender>
</div>
</form>
</body>
</html>

Asp.Net Ajax AnimationExtender Example

Now, we will see how to make fade out animation effect in asp.net using Ajax AnimationExtender Control?

The source page of the code is:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AnimationExtender control Example</title>
<style type="text/css">
.c1
{
width:250px;
height:200px;
background-color:Aqua;
border:2px black;
padding:10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager runat="server">
</asp:ToolkitScriptManager>

//target control for making fade out animation effect

<asp:Panel ID="p1" runat="server" CssClass="c1">

I am going to fade out!

<asp:LinkButton ID="lb1" runat="server" OnClientClick="return false;">FadeOut </asp:LinkButton>
</asp:Panel>
<asp:AnimationExtender ID="ae1" runat="server" TargetControlID="p1">
<Animations>
<OnClick>
<FadeOut Duration="10" Fps="40"></FadeOut>
</OnClick>
</Animations>
</div>
</asp:AnimationExtender>
</form>
</body>
</html>

ModalPopupExtender background css not showing

Sometimes while calling the ModalPopupExtender the background CSS class will not appear, In this post, we will discuss this solution.

In my requirement I was showing the modal popup from the code behind file and for this, I took a button and made that as Visible=”false”, check below:

<asp:Button ID="btnForAjax" runat="server" Text="" Visible="false"/>

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1″ runat="server" BackgroundCssClass="modalBackground" PopupControlID="pnlPopupMsg" TargetControlID="btnForAjax">

</ajaxToolkit:ModalPopupExtender>

Here the problem was I was setting Visible=”false” for btnForAjax.

The solution is we should remove the Visible=”false” and we can put Style=”display: none” like below:

<asp:Button ID="btnForAjax" runat="server" Text="" Style="display: none"/>

Ajax AnimationExtender Control Example

Now, we will see how to make scaling animation effect using Ajax AnimationExtender Control in asp.net?

The source page is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Creating scaling effect using animation extender control </title>

<style type="text/css">
.c1
{
width:50px;
height:50px;
background-color:Green;
padding:15px;
}
</style>

</head>
<body>
<form id="form1″ runat="server">
<div>
<asp:ToolkitScriptManager runat="server">
</asp:ToolkitScriptManager>
<asp:Panel ID="p1″ runat="server" CssClass="c1″>
<h3>Do Animate!!!</h3>
</asp:Panel>
<asp:AnimationExtender ID="ae2″ runat="server" TargetControlID="p1″>
<Animations>
<OnClick>
<Sequence>
<Scale ScaleFactor="2″ Unit="px" Center="true" ScaleFont="true" FontUnit="pt" ></Scale>
</Sequence>
</OnClick>
</Animations>
</asp:AnimationExtender>
</div>
</form>
</body>
</html>

Here we learned how to use Asp.Net ajax control toolkit calendar extender example.

  • Asp.Net ajax calendar extender example
  • asp.net ajax modalpopupextender example
  • Show ModalPopupExtender in code behind in Ajax in Asp.Net
  • Ajax control toolkit password strength example
  • Asp.Net Ajax balloonpopupextender example
  • Asp.Net Ajax AnimationExtender Example

You may like following tutorials:

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>