Post
Ask Question

Adding Calendar Control in ASP.Net Web API

Introduction

This article describes how to add a calendar in the Web API. Here we use the jQuery Calendar Control in the Web API. In it I show how to transfer the date of the calendar to the controller. We use the Calendar Control for showing the calendar in our application Through this calendar the user can point to any day in any year.

Now we will see the procedure for adding the calendar in the Web API.

Step 1

Create a Web API application:

  • Start Visual Studio 2012.
  • From the Start Window select "Installed" -> "Visual C#" -> "Web".
  • Select "ASP.NET MVC 4 Web Application" and click on the "OK" button.

    calend.jpg

  • From the "MVC4 Project" Window select "Web API".

    calend1.jpg

  • Click on the "OK" button.

Step 2

Create a Model Class "Calendar.cs":

  • In the "Solution Explorer".
  • Right-click on the "Models" -> "Add" -> "Class".
  • Select "Installed" -> "Visual C#" and select class.

    calend3.jpg

  • Click on the "Add" button.

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.ComponentModel.DataAnnotations;  
  4. using System.Linq;  
  5. using System.Web;  
  6. namespace CalendarWebAPI.Models  
  7. {  
  8.    public class Calendar  
  9.     {  
  10.         [Required(ErrorMessage = "Date Must be Require")]   
  11.         public string Date  
  12.         {  
  13.             get;  
  14.             set;  
  15.         }  
  16.     }  
  17. }   

In the code above "Required" shows that the Date field is required.

Step 3

In the "HomeController" write some code. This file exists in:

  • In the "Solution Explorer".

  • Select "Controllers" -> "HomeController".

    calend2.jpg

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using CalendarWebAPI.Models;  
  7. namespace CalendarWebAPI.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             return View();  
  14.         }  
  15.         [HttpPost]  
  16.         public string DisplayDate(Calendar calendar)  
  17.         {  
  18.             if (ModelState.IsValid)  
  19.             {  
  20.                 return "Date have been selected by you : <b>" + calendar.Date.ToString() + "</b>";  
  21.             }  
  22.             return "Please select any date ";  
  23.         }  
  24.     }  
  25. }   

In the code above, there is an action method "Index" that returns a view and the "DisplayDate()" method returns the date selected by you, otherwise it returns a message "Please select any date".

Step 4

Now we add an "MVC 4 View Page(ASPX)" named "Index.aspx".

  • In the "Solution Explorer".

  • Right-click on the "Home" then select "Add" -> "New Item".

    calend4.jpg

  • Select "Installed" -> "Visual C#" -> "Web" -> "MVC 4 View Page (ASPX)".

    calend5.jpg

  • Click on the "Add" button

Add the following code:

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<CalendarWebAPI.Models.Calendar>" %>  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head id="Head1"  runat="server">  
  5.     <title>Index</title>  
  6.     <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>  
  7.     <script src="Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>  
  8.     <script src="Scripts/jquery.ui.datepicker.js" type="text/javascript"></script>  
  9.     <script type="text/javascript">  
  10.         $(function () {  
  11.             $("#datepicker").datepicker();  
  12.         });  
  13.        </script>  
  14. </head>  
  15. <body>  
  16.     <% using (Html.BeginForm("DisplayDate", "Home", FormMethod.Post))  
  17.        {%>  
  18.     <div>  
  19.         <div class="demo">  
  20.             <p>  
  21.                 Date:  
  22.                 <%: Html.TextBoxFor(d => d.Date, new { id = "datepicker" })%>   
  23.                 <input type="submit" value="Display" />  
  24.             </p>  
  25.         </div>  
  26.         <%} %>  
  27.     </div>  
  28. </body>  
  29. </html>   

In the code above we use the three jQuery files for adding the Calendar Control that are "jquery-1.8.2.min.js" , "jquery-ui-1.8.16.custom.min.js" and "jquery.ui.datepicker.js". Here we also create a JavaScript function that calls the "datepicker" function.

When we click on the Display button then it calls the "DisplayDate" view and displays the selected date.

Step 5

Now execute the application for seeing the output by pressing "F5". The output will be as:

 calend6.jpg

When we move the cursor on the TextBox and click it, it shows the calendar.

calend7.jpg

Select a date and click on the "Display" button.

calend8.jpg

Click on "Previous"; it then displays the previous month.

calend9.jpg

If we click on "Next" then it displays the next month.

calend10.jpg


Similar Articles