Post
Ask Question

How to Use Balloon Pop Extender and Ajax Calendar Control in ASP.Net

Initial Chamber

Step 1

Open Visual Studio 2010 and create an empty website, name it Calendar_demo.

Step 2

In Solution Explorer you get your empty website, then add a Web Form as in the following.

For Web Form:

    Calendar_demo (Your Empty Website) and right-click to Add New Item as Web Form, name it calendar_demo.aspx.

Design Chamber

Step 3

Now open your calendar_demo.aspx file and make some design code to build up your application like the following. 

Calendar_demo.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <style type="text/css">  
  8.         .style2  
  9.         {  
  10.             width: 95px;  
  11.         }  
  12.         .style3  
  13.         {  
  14.             width: 188px;  
  15.         }  
  16.         .style4  
  17.         {  
  18.             width: 23px;  
  19.         }  
  20.         .style5  
  21.         {  
  22.             text-decoration: underline;  
  23.             font-size: large;  
  24.         }  
  25.           
  26.         .style6  
  27.         {  
  28.             width: 226px;  
  29.         }  
  30.           
  31.         .style7  
  32.         {  
  33.             text-decoration: underline;  
  34.             font-size: x-large;  
  35.         }  
  36.         .style8  
  37.         {  
  38.             width: 258px;  
  39.         }  
  40.         .style9  
  41.         {  
  42.             width: 40px;  
  43.         }  
  44.           
  45.     </style>  
  46.     </head>  
  47.     <body>  
  48.         <form id="form1" runat="server">  
  49.             <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>  
  50.             <div id="man">  
  51.                 <table style="width: 66%; margin-left: 119px;">  
  52.                     <caption class="style5"></caption>  
  53.                     <tr>  
  54.                         <td class="style4">  
  55.                      </td>  
  56.                         <td class="style9">  
  57.                      </td>  
  58.                         <td class="style3">  
  59.                             <asp:Label ID="Label2" runat="server" ForeColor="#6600FF"   
  60.                         style="font-weight: 700; text-decoration: underline"   
  61.                         Text="Student Admission Form"></asp:Label>  
  62.                         </td>  
  63.                     </tr>  
  64.                     <tr>  
  65.                         <td class="style4">  
  66.                      </td>  
  67.                         <td class="style9">  
  68.                      </td>  
  69.                         <td class="style3">  
  70.                      </td>  
  71.                     </tr>  
  72.                     <tr>  
  73.                         <td class="style4">  
  74.                      </td>  
  75.                         <td class="style9">  
  76.                      </td>  
  77.                         <td class="style3">  
  78.                      </td>  
  79.                     </tr>  
  80.                     <tr>  
  81.                         <td class="style4">  
  82.                      </td>  
  83.                         <td class="style9">  
  84.                     Student Name</td>  
  85.                         <td class="style3">  
  86.                             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  87.                             <asp:BalloonPopupExtender ID="BalloonPopupExtender1"  BalloonPopupControlID="Panel1" TargetControlID="TextBox1" runat="server"></asp:BalloonPopupExtender>  
  88.                             <asp:Panel ID="Panel1" runat="server">  
  89.                     Please Enter your Name  
  90.                     </asp:Panel>  
  91.                         </td>  
  92.                         <td>  
  93.                    
  94.                      </td>  
  95.                     </tr>  
  96.                     <tr>  
  97.                         <td class="style4">  
  98.                      </td>  
  99.                         <td class="style9">  
  100.                     Father Name</td>  
  101.                         <td class="style3">  
  102.                             <asp:TextBox ID="TextBox2"  runat="server"></asp:TextBox>  
  103.                             <asp:BalloonPopupExtender ID="BalloonPopupExtender2" BalloonPopupControlID="Panel2" TargetControlID="TextBox2" runat="server"></asp:BalloonPopupExtender>  
  104.                             <asp:Panel ID="Panel2" runat="server">  
  105.                     Please Enter your Father Name  
  106.                     </asp:Panel>  
  107.                         </td>  
  108.                     </tr>  
  109.                     <tr>  
  110.                         <td class="style4">  
  111.                      </td>  
  112.                         <td class="style9">  
  113.                     Mother Name</td>  
  114.                         <td class="style3">  
  115.                             <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>  
  116.                             <asp:BalloonPopupExtender ID="BalloonPopupExtender3" BalloonPopupControlID="Panel3" TargetControlID="TextBox3" runat="server"></asp:BalloonPopupExtender>  
  117.                             <asp:Panel ID="Panel3" runat="server">  
  118.                     Please Enter your Mother Name  
  119.                     </asp:Panel>  
  120.                         </td>  
  121.                         <td>  
  122.                   
  123.                      </td>  
  124.                     </tr>  
  125.                     <tr>  
  126.                         <td class="style4">  
  127.                      </td>  
  128.                         <td class="style9">  
  129.                     Student Age  
  130.                 </td>  
  131.                         <td class="style3">  
  132.                             <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>  
  133.                             <asp:BalloonPopupExtender ID="BalloonPopupExtender5" BalloonPopupControlID="Panel5" TargetControlID="TextBox4" runat="server"></asp:BalloonPopupExtender>  
  134.                             <asp:Panel ID="Panel5" runat="server">  
  135.                     How old are you?  
  136.                     </asp:Panel>  
  137.                         </td>  
  138.                     </tr>  
  139.                     <tr>  
  140.                         <td class="style2">  
  141.                      </td>  
  142.                         <td class="style9">  
  143.                             <asp:CalendarExtender ID="CalendarExtender1" OnClientDateSelectionChanged="SelectDate"  TargetControlID="TextBox4"  runat="server"></asp:CalendarExtender>  
  144.                             <script type="text/javascript">  
  145.   
  146.                 function SelectDate(e) {  
  147.   
  148.                 var PresentDay = new Date();  
  149.   
  150.                 var dateOfBirth = e.get_selectedDate();  
  151.   
  152.                 var months = (PresentDay.getMonth() - dateOfBirth.getMonth() + (12 * (PresentDay.getFullYear() - dateOfBirth.getFullYear())));  
  153.   
  154.                 alert("You Are Of " + Math.round(months / 12) + " Years");  
  155.   
  156.                 document.getElementById("TextBox6").value = Math.round(months / 12);  
  157.   
  158.             }  
  159.   
  160.             </script>  
  161.                         </td>  
  162.                         <td class="style3">  
  163.                             <asp:TextBox ID="TextBox6" ReadOnly="true" runat="server" Font-Size="12px" ></asp:TextBox>  
  164.                         </td>  
  165.                     </tr>  
  166.                     <tr>  
  167.                         <td class="style4">  
  168.                      </td>  
  169.                         <td class="style9">  
  170.                     Qualification</td>  
  171.                         <td class="style3">  
  172.                             <asp:DropDownList ID="DropDownList1" runat="server">  
  173.                                 <asp:ListItem>-- Select Class--</asp:ListItem>  
  174.                                 <asp:ListItem>1st</asp:ListItem>  
  175.                                 <asp:ListItem>2nd</asp:ListItem>  
  176.                                 <asp:ListItem>3rd</asp:ListItem>  
  177.                                 <asp:ListItem>4th</asp:ListItem>  
  178.                                 <asp:ListItem>5th</asp:ListItem>  
  179.                                 <asp:ListItem>6th</asp:ListItem>  
  180.                                 <asp:ListItem>7th</asp:ListItem>  
  181.                                 <asp:ListItem>8th</asp:ListItem>  
  182.                                 <asp:ListItem>9th</asp:ListItem>  
  183.                                 <asp:ListItem>10th</asp:ListItem>  
  184.                                 <asp:ListItem>11th</asp:ListItem>  
  185.                                 <asp:ListItem>12th</asp:ListItem>  
  186.                             </asp:DropDownList>  
  187.                         </td>  
  188.                     </tr>  
  189.                     <tr>  
  190.                         <td class="style4">  
  191.                      </td>  
  192.                         <td class="style9">  
  193.                     Phone No  
  194.                 </td>  
  195.                         <td class="style3">  
  196.                             <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>  
  197.                             <asp:BalloonPopupExtender ID="BalloonPopupExtender4" BalloonPopupControlID="Panel4" TargetControlID="TextBox5" runat="server"></asp:BalloonPopupExtender>  
  198.                             <asp:Panel ID="Panel4" runat="server">  
  199.                     Please Enter your PhoneNo  
  200.                     </asp:Panel>  
  201.                         </td>  
  202.                     </tr>  
  203.                     <tr>  
  204.                         <td class="style4">  
  205.                      </td>  
  206.                         <td class="style9">  
  207.                      </td>  
  208.                         <td class="style3">  
  209.                      </td>  
  210.                     </tr>  
  211.                     <tr>  
  212.                         <td class="style4">  
  213.                      </td>  
  214.                         <td class="style9">  
  215.                      </td>  
  216.                         <td class="style3">  
  217.                             <asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" />  
  218.                         </td>  
  219.                     </tr>  
  220.                 </table>  
  221.             </div>  
  222.             <p>  
  223.                 <table style="width:100%;">  
  224.                     <caption class="style7"></caption>  
  225.                     <tr>  
  226.                         <td class="style6">  
  227.                      </td>  
  228.                         <td align="center" class="style8">  
  229.                      </td>  
  230.                         <td>  
  231.                      </td>  
  232.                     </tr>  
  233.                     <tr>  
  234.                         <td class="style6">  
  235.                      </td>  
  236.                         <td class="style8">  
  237.                      </td>  
  238.                         <td>  
  239.                      </td>  
  240.                     </tr>  
  241.                     <tr>  
  242.                         <td class="style6">  
  243.                      </td>  
  244.                         <td class="style8">  
  245.                             <asp:Label ID="Label1" runat="server"></asp:Label>  
  246.                         </td>  
  247.                     </tr>  
  248.                 </table>  
  249.             </p>  
  250.         </form>  
  251.     </body>  
  252. </html>  

Your design will look like the following.

Design

Code Chamber

Step 4

Open your calendar_demo.aspx.cs file, where we will write the following code for printing the data that you provided in the TextBox in label.

Calendar_demo.aspx.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8.   
  9. public partial class _Default : System.Web.UI.Page  
  10. {  
  11.     protected void Page_Load(object sender, EventArgs e)  
  12.     {  
  13.   
  14.     }  
  15.     protected void Button1_Click(object sender, EventArgs e)  
  16.     {  
  17.   
  18.         
  19.         Label1.Text = "My Name is:" + TextBox1.Text + "</br>" + "My Father Name is:" + TextBox2.Text + "</br>" + "My Mothe Name is:" + TextBox3.Text + "</br>" + TextBox4.Text + "My DOB is:" + DropDownList1.SelectedItem.Text + "</br>" + "My Phone No is:" + TextBox5.Text + "</br>";  
  20.         Label1.ForeColor = System.Drawing.Color.Green;  
  21.   
  22.     }  
  23.       
  24. }  
Output Chamber

Output

calendar control

Here it will automatically get your age by giving your date of birth.

date of birth

student admission form

I hope you like this. Have a nice day, Thank you for reading! 


Similar Articles