ARTICLE
BalloonPopupExtenderControl in AJAX
In this articles, I will discuss about the BalloonPopupExtenderControl which is used as a kind of a tooltip displayed when we are typing in a text field or on another event of the target control.
Introduction
AJAX (Asynchronous JavaScript and XML) is a new web development technique used for interactive websites. AJAX can help us develop web applications and retrieve small amounts of data from a web server. AJAX is a different type of technology.
- JavaScript
- XML
- Asynchronous Call to the server
BalloonPopupExtender Control
The BalloonPopupExtender control provides support for vertical tabs, and support for keyboard tab navigation. The BalloonPopup extender allows a page to display content to the user in a "Balloon" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it.
BalloonPopupExtender control properties - TargetControlID : The ID of the control to which this extender is attache
- BalloonPopupControlID : The ID of the control in which the content will be displayed, which is a Panel control
- BalloonSize : It has three possible values: Large, Medium and Small
- BalloonStyle : It has two possible values: Rectangle, Cloud and Custom
- UseShadow : Whether we want to drop shadows with the BalloonPopup
Step 1 : Open Visual Studio 2010. - Go to File->New->WebSite
- Select ASP.NET Empty WebSite
Step 2 : Go to Solution Explorer and right-click. - Select Add->New Item
- Select WebForm
- Default.aspx page open
Step 3 : Go to Default.aspx page and click on the [Design] option and drag the control from the Toolbox.
- Drag ScriptManager control, Panel, TextBox
Step 4 : Go to Default.aspx [Source] option and write the code.
Code :
<body bgcolor="#ff99cc">
<form id="form1" runat="server" style="background-color: #5C5CA3">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="background-color: #659A69">
<i style="background-color: #FFFFFF">Textbox</i> <asp:TextBox ID="TextBox1" Runat="server" />
<asp:Panel ID="Panel1" runat="server" BackColor="#EB9894">
<b>Hey
I am simple TextBox with BallonPopup</b>
<br />
</asp:Panel>
<asp:BalloonPopupExtender ID="BalloonPopupExtender1" TargetControlID="TextBox1" BalloonPopupControlID="Panel1" BalloonSize="Medium"
UseShadow="true" runat="server">
</asp:BalloonPopupExtender>
</div>
</form>
</body>
</html>
BalloonPopupExtenderControl
Step 5 : Go to Default.aspx page and drag BalloonPopupExtenderControl from Toolbox. - Define the TargetControlID property and BalloonPopupControlID.
Code :
<asp:BalloonPopupExtender ID="BalloonPopupExtender1" TargetControlID="TextBox1" BalloonPopupControlID="Panel1" BalloonSize="Medium"
UseShadow="true" runat="server">
</asp:BalloonPopupExtender>
Define Balloon Style Property
Step 6 : The BalloonPopupControl has a BalloonStyleProperty which defines the shape and size. - Balloon Style property set Rectangle shape.
<asp:BalloonPopupExtender ID="BalloonPopupExtender1" TargetControlID="TextBox1" BalloonPopupControlID="Panel1" BalloonSize="Medium" BalloonStyle ="Rectangle" UseShadow="true"runat="server">
</asp:BalloonPopupExtender>
Step 7 : Now run the application by pressing F5.
Step 8 : If we change the BalloonStyle property to "Cloud" then show following shape.
Step 9 : The BalloonStyle property could be also define the "Custom" property, which means that we will have a CSS class where we will put our definitions of the look of the BalloonPopupExtender.
- Drag image control from Toolbox.
Step 10 : Go to Default.aspx page and write a code.
Code :
<asp:Panel ID="Panel1" runat="server" BackColor="#EB9894">
<b>Hey MY AJAX APPLICATION</b>
<br />
</asp:Panel>
</div>
<div>
<asp:BalloonPopupExtender ID="BalloonPopupExtender1" TargetControlID="TextBox1" BalloonPopupControlID="Panel1" BalloonSize="Medium" BalloonStyle="rectangle" UseShadow
="true" runat="server">
</asp:BalloonPopupExtender>
<br />
<br />
<br />
<asp:Image ID="Image1" runat="server" ImageUrl="~/CSSiteLogo.gif" />
<asp:Panel ID="Panel2" runat="server">
my picture application with balloon popup
</asp:Panel>
<asp:BalloonPopupExtender ID="BalloonPopupExtende2" TargetControlID="Image1" BalloonPopupControlID="Panel2" BalloonSize="Medium" BalloonStyle="Cloud" UseShadow="true"
runat="server" DisplayOnMouseOver="True"/>
</div>
Step 11 : Now run the application by Pressing F5.
The result of moving the mouse over a picture will be the following.
Here are some related resources.