BalloonPopupExtenderControl in AJAX

Davin Martyn
12y
39.9k
0
0

Article

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.

REC....gif

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.