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:

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. }
  26. .style6
  27. {
  28. width: 226px;
  29. }
  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. }
  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>
  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>
  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">
  146. function SelectDate(e) {
  148. var PresentDay = new Date();
  150. var dateOfBirth = e.get_selectedDate();
  152. var months = (PresentDay.getMonth() - dateOfBirth.getMonth() + (12 * (PresentDay.getFullYear() - dateOfBirth.getFullYear())));
  154. alert("You Are Of " + Math.round(months / 12) + " Years");
  156. document.getElementById("TextBox6").value = Math.round(months / 12);
  158. }
  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;
  9. public partial class _Default : System.Web.UI.Page
  10. {
  11. protected void Page_Load(object sender, EventArgs e)
  12. {
  14. }
  15. protected void Button1_Click(object sender, EventArgs e)
  16. {
  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;
  22. }
  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!