Post
Ask Question

BalloonPopupExtenderControl in AJAX


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
step1.gif

Step 2 : Go to Solution Explorer and right-click.
  • Select Add->New Item
  • Select WebForm
  • Default.aspx page open
step2.gif

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.
rec11.gif

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.

rect1.gif

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.

rec5.gif

The result of moving the mouse over a picture will be the following.

rec3.gif

Here are some related resources.


Similar Articles