Hello everyone!! In this article I am going to make a simple application based on ASP.NET Web Forms which includes a few server controls such as Calendar control.

To get started,

Follow these steps

Step 1 -

Open your latest version of Visual Studio. Select File, New, then Project to see the following screen.Under the section of Visual C#, click on ASP.NET Empty Web Application. Name it EventApp.

Step 2 -

Click on OK Button to load the project .On the left hand side of the Solution Explorer right click on your project name and add a new Web Form. Name it Event.aspx as follows.

Click on Add button to load the main project.

Step 3 - Add the following code to the Event.aspx page,

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Event.aspx.cs" Inherits="EventApp.Event" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title></title>
  7. </head>
  9. <body>
  10. <form id="form1" runat="server">
  11. <div>
  12. <h1 style="text-align: center;">
  14. Enter details and set a day to initiate an event.
  16. </h1> </div>
  17. <div style="text-align: center;">
  18. <table style="text-align: left; margin:auto; border-color: #000000;
  20. border-width: 2px; background-color: #fff99e;" cellspacing="0" cellpadding="8" rules="none" width="540">
  21. <tr>
  22. <td valign="top">Your Name:</td>
  23. <td valign="top">
  24. <asp:TextBox ID="nameBox" Runat="server" Width="160px" />
  25. <asp:RequiredFieldValidator ID="validateName"
    Runat=    "server" ErrorMessage="You must enter a name."
    ControlToValidate="nameBox" Display="None" /> </td>
  26. <td valign="middle" rowspan="4">
  27. <asp:Calendar ID="calendar" Runat="server" BackColor="White" /> </td>
  28. </tr>
  29. <tr>
  30. <td valign="top"> Event Name:</td>
  31. <td valign="top">
  32. <asp:TextBox ID="eventBox" Runat="server" Width="160px" />
  33. <asp:RequiredFieldValidator ID="validateEvent" Runat="server"
    ErrorMessage=    "You must enter an event name." ControlToValidate="eventBox" Display="None" /> </td>
  34. </tr>
  35. <tr>
  36. <td valign="top"> Meeting Room:</td>
  37. <td valign="top">
  38. <asp:DropDownList ID="roomList" Runat="server" Width="160px">
  39. <asp:ListItem Value="1">The Happy Room</asp:ListItem>
  40. <asp:ListItem Value="2">The Angry Room</asp:ListItem>
  41. <asp:ListItem Value="3">The Depressing Room</asp:ListItem>
  42. <asp:ListItem Value="4">The Funked Out Room</asp:ListItem>
  43. </asp:DropDownList>
  44. <asp:RequiredFieldValidator ID="validateRoom" Runat="server"
    ErrorMessage=    "You must select a room." ControlToValidate="roomList" Display="None" /> </td>
  45. </tr>
  46. <tr>
  47. <td valign="top"> Attendees:</td>
  48. <td valign="top">
  49. <asp:ListBox ID="attendeeList" Runat="server" Width="160px" SelectionMode="Multiple" Rows="6">
  50. <asp:ListItem Value="1">Bill Gates</asp:ListItem>
  51. <asp:ListItem Value="2">Steve Jobs</asp:ListItem>
  52. <asp:ListItem Value="3">Mark Zuckerberg</asp:ListItem>
  53. <asp:ListItem Value="4">William Hewlett</asp:ListItem>
  54. <asp:ListItem Value="5">Bob Packard</asp:ListItem>
  55. <asp:ListItem Value="6">Larry Page</asp:ListItem>
  56. </asp:ListBox>
  57. <asp:RequiredFieldValidator ID="validateAttendees" Runat="server"
    ErrorMessage=    "You must have at least one attendee." ControlToValidate="attendeeList" Display="None" /> </td>
  58. </tr>
  59. <tr>
  60. <td align="center" colspan="3">
  61. <asp:Button ID="submitButton" Runat="server" Width="100%"
    Text=    "Submit meeting room request" onclick="submitButton_Click" /> </td>
  62. </tr>
  63. <tr>
  64. <td align="center" colspan="3">
  65. <asp:ValidationSummary ID="validationSummary" Runat="server"
    HeaderText=    "Before submitting your request:" /> </td>
  66. </tr>
  67. </table>
  68. </div>
  69. <table>
  70. <tr>
  71. <td height="50"></td>
  72. </tr>
  73. </table>
  74. <table style="text-align: left; margin:auto; border-color: #000000;
  76. border-width: 2px; background-color:lightgoldenrodyellow;" cellspacing="0" cellpadding="8" rules="none" width="540">
  77. <tr>
  78. <td>
  79. <p style="text-align:center;"> Results:
  80. <asp:Label Runat="server" ID="resultLabel" Text="None." /> </p>
  81. </td>
  82. </tr>
  83. </table>
  84. </form>
  85. </body>
  87. </html>
Step 4 - Open the Event.aspx.cs page and the following code to it,

  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. public partial class _Default: System.Web.UI.Page
  8. {
  9. protected void Page_Load(object sender, EventArgs e)
  10. {
  11. if (!this.IsPostBack)
  12. {
  13. calendar.SelectedDate = DateTime.Now;
  14. }
  15. }
  16. protected void submitButton_Click(object sender, EventArgs e)
  17. {
  18. if (this.IsValid)
  19. {
  20. resultLabel.Text = roomList.SelectedItem.Text + " has been booked on " +
    calendar.SelectedDate.ToLongDateString() +     " by " + nameBox.Text + " for " + eventBox.Text + " event. ";
  21. foreach(ListItem attendee in attendeeList.Items)
  22. {
  23. if (attendee.Selected)
  24. {
  25. resultLabel.Text += attendee.Text + ", ";
  26. }
  27. }
  28. resultLabel.Text += " and " + nameBox.Text + " will be attending.";
  29. }
  30. }
  31. }
Step 5 - Save the project and build it to see the following output,