Question

Mine is c# web application.
I have a calendar control that defaults to today as the selected date.
Problem is, if the user clicks on the selected date then since there is no
change in date the SelectedChanged does not fire. There is no other control
event that fires either. How do I acknowledge the user selection of a
pre-selected date?

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {               
            if (ddlCityNames.SelectedIndex == 0 || ddlHotelNames.SelectedIndex == 0)
            {
                if(ddlCityNames.SelectedIndex==0)
                    Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "Script", "alert('Select City');", true);   
                else
                    Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "Script", "alert('Select Hotel');", true);
            }
           }

This is called when user changes his selection.But in case if he selects a date and this validations are called,after that previous selection that he has made is stil there but on click on that selection does nothing.when I select another date and come again on that date is works but what about previously selected date?

Answer 1

Looking at your code, you will be better off by porting you server side validation logic at the client side. Essentially, you have to hook up into blur event of backing input (of calender control) and validate your drop-downs. This will also eliminate the post-back on the date selection.

On server side, the validation should be done at the place where all the data will be used – for example, Search button if you are invoking search after hotel, city and date are filled.

EDIT:

Here’s some sample code (based on jquery) that should get you started. Instead of Calender control (whose markup I am not familiar with), I am assuming that you are using AJAX Toolkit Calender Extender or some java-script based UI such as jquery date-picker which will be my preference by the way). With both of these approaches, you have full control over backing input field.

So with AJAX toolkit, markup will be something like

<asp:TextBox runat="server" ID="Date1" />
<ajaxToolkit:Calendar runat="server" TargetControlID="Date1" />

Now you can have following script in your markup (aspx) file:

$(document).ready(function() {
   var date = $('#<%= Date1.ClientID %>');
   var city = $('#<%= ddlCityNames.ClientID %>');
   var hotel = $('#<%= ddlHotelNames.ClientID %>');

   date.blur(function() {
     // check if date has been selected
     if (date.val() != '') {
       if (city.val() == '') { // **** put value at index zero that you use for no-selection
          alert('Select City');
       }
       else if (hotel.val() == '') {
          alert('Select Hotel');
       }
     }
   });
});