You are currently browsing the category archive for the ‘ASP.NET Ajax Popup Calendar’ category.
Objective: This article describes how to ad an Ajax popup calendar to a textbox with the help of the AjaxControlToolkit. This is a simple demonstration with nothing but the required elements on the page so we can study the code and not get confused by other distracting elements. In a future article we’ll explore how to add such component to your insert and update forms.
Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008 with the AjaxControlToolkit library.
- Create a new web form page in your site.
- Before anything else, drag and drop an Ajax ScriptManager onto your page like shown below.
- Below the Ajax ScriptManager, drag and drop a TextBox control and set its ID to “Date1”.
- Drag and drop an ImageButton control next to the TextBox and set its ID to “Image1” and its alternate URL property to “Click to show calendar”.
- Create a new folder in your site and name it Images (if you haven’t done it already).
- Then right click and save this image and drop it into the image folder in your site.
- Go back to the page and set the ImageButton’s Image URL property so it points to the calendar image you saved in your Images folder. Your page should look something like the image below.
- Now while in code view, go to your AjaxControlToolkit tab of your Toolbox and drag and drop a Calendar Extender under the code of the image button like shown on the image below. Set its ID to “calendarButtonExtender”, the TargetControlID to “Date1” and the PopupButtonID to “Image1”.
- Now let’s do one last thing. Open the web.config file and make sure that you have the following line between the <controls> tags:
<add tagPrefix=”ajaxToolkit” namespace=”AjaxControlToolkit” assembly=”AjaxControlToolkit”/>
If its already in there, fine, if not, copy and paste it in there. This will register the ajax control toolkit with your site. Otherwise it won’t work and you’ll get an error message.
Finally, below is the code for the entire page in case you’ve missed something and also an image of what it should look like when you load the page in your browser.
That’s it! Enjoy.