How to implement Ajax Balloon Popup Extender on Asp.net website

On By
Hi Friend, Today we will learn about Balloon popup Extender control in asp.net.This control display a popup message which can contain any information when you move your mouse and  focus to a TextBox  control.This control supports three Balloon style properties
  • Balloon
  • Rectangle
  • Custom
You can choose three size of  this style properties
  • Small
  • Medium
  • Large
If you want to choose Balloon Style Property Custom then you have to set CustumCssUrl Property to point to a custom Stylesheet. 
This Popup can be set to 5 positions
  • TopRight
  • TopLeft
  • BottomLeft
  • BottomRight
  • Auto
If you select value the Auto then the position of BalloonPopup will be determined automatically based on available space.
This popup will be displayed when any user move your mouse or click on textBox.
There are some step to implement this whole concepts as shown below:- 

Step 1 :- First open your visual studio -->File --> New -->Web Site--> Select  ASP.NET EMPTY Website-->OK --> Open Solution Explorer --> Add  a web form (Default.aspx).
Step 2 :- Open ToolBox --> Drag and drop ToolkitScriptManager, Panel , TextBox and Button Control on the page as shown below:-

Step 3 :- Go Source  link from below -->Drag and drop Two BalloonpopupExtender control and set its properties as given below:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Welcome to MY.NET Tutorials</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>   
        <span class="style1"><strong>How to Implement Ballooon Popup Extender Control on 
        asp.net website</strong></span><br />
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:Panel ID="Panel1" runat="server">
        <b>Please Enter Your UserName </b>
        <br/>
        </asp:Panel>
        <asp:Panel ID="Panel2" runat="server">
           <b>Please Enter Your Secrect Password</b>
        </asp:Panel>
        <asp:TextBox ID="TextBox1" runat="server" Height="43px" Width="301px"></asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server" Height="42px" Width="306px"></asp:TextBox>
        <asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server"
        TargetControlID="TextBox1"
        BalloonPopupControlID="Panel1"
        Position="Auto" 
        BalloonStyle="Cloud"
        BalloonSize="Medium"
        UseShadow="true" 
        ScrollBars="Auto"
        DisplayOnMouseOver="true"
        DisplayOnFocus="false"
        DisplayOnClick="true" />
      <asp:BalloonPopupExtender ID="BalloonPopupExtender2" runat="server"
        TargetControlID="TextBox2"
        BalloonPopupControlID="Panel2"
        Position="BottomRight" 
        BalloonStyle="Rectangle"
        BalloonSize="Medium"
        UseShadow="true" 
        ScrollBars="Auto"
        DisplayOnMouseOver="true"
        DisplayOnFocus="true"
        DisplayOnClick="true" />
        <asp:Button ID="Button1" runat="server" Height="39px" 
        style="font-weight: 700; font-size: large; background-color: #99CCFF" 
            Text="Logon" Width="157px" />
    </div>
    </form>
</body>
</html>
Step 4 :- Now Run the Application (Press F5)--> You will see following output as shown below:- 
For More...
Download Whole attached file from Below:-
                 Download
Subscribe through email and get Free updates in inbox
Please like and share this post with your friends...

You May Also Like...

0 comments:

Post a Comment

Powered by Blogger.