ASP.NET 3.5/AJAX.NET-enabled datepicker snippet using the ASP:Calendar control

plundberg — Tue, 24 Mar 2009 13:50:02 GMT

Looking for a simple datepicker that uses AJAX.NET (to avoid full-page postbacks), for your date fields? Look no further! I was on the same "hunt", and ended up writing my own code for it (inspired by other examples/code I was looking at).

The code does all the work using ASP:NET, nothing is done using JavaScript. Below is the code for the solution. This could (and should) be made into a UserControl if you need to use in more than one place

In the .aspx file, put this: (As you see, I am referencing a calendar icon here - use your own icon for this)

                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:TextBox ID="requestedDeliveryDateTextBox" runat="server" Width="100" />
                        <asp:ImageButton id="imageButton" runat="server" ImageUrl="~/Images/IconCalendar.png" AlternateText="calendar"
                            OnClick="ImageButton_Click" CausesValidation="false" />
                        <br />
                        <div id="calendar" class="calendar" visible="false" runat="server">
                            <asp:Calendar ID="requestedDeliveryDateCalendar" runat="server" OnSelectionChanged="RequestedDeliveryDateCalendar_SelectionChanged" />
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>

In the code-behind (aspx.cs file):

        /// <summary>
        /// The calendar icon was clicked.
        /// </summary>
        protected void ImageButton_Click(object sender, EventArgs eventArgs)
        {
            // Toggle visibility of the calendar.
            calendar.Visible = !calendar.Visible;
        }

        /// <summary>
        /// The selected date in the calendar was changed. This method is called via AJAX.
        /// </summary>
        protected void RequestedDeliveryDateCalendar_SelectionChanged(object sender, EventArgs eventArgs)
        {
            requestedDeliveryDateTextBox.Text = BOMisc.GetDatePart(requestedDeliveryDateCalendar.SelectedDate);

            // We hide the calendar here. You can disable this hiding by removing the following line.
            calendar.Visible = false;

            // Move the focus to the textbox below the calendar, to make things convenient for the user filling in the form.
// Remove this line or change it to reference your own control instead.
            someTextBox.Focus();
        }

And finally, the .css portion. We don't do very much styling of the actual calendar here, we just place it on top of the rest (the z-index part), with a white background to make sure the stuff below doesn't "shine through". We also make the calendar be absolutely positioned so that it becomes a true "dropdown" calendar (it will appear "on top" of everything else on the page).

.calendar
{
    position: absolute;
    width: 250px;
    padding: 5px;
    background-color: White;
    border: 1px solid #858585;
    z-index: 10;
}

That's it for now, hope this helps. Happy datepicking! :-

Trouble getting TargetInvocationException on your ASP.NET web application?`

plundberg — Thu, 19 Mar 2009 18:26:42 GMT

Sometimes, you get pretty unclear exception messages. The message below is one example of such:

    Exception type: TargetInvocationException
    Exception message: Exception has been thrown by the target of an invocation.

    [...some stuff removed...]

    Stack trace:    at System.RuntimeMethodHandle._InvokeMethodFast(Object target, Object[] arguments, SignatureStruct& sig, MethodAttributes methodAttributes, RuntimeTypeHandle typeOwner)
   at System.RuntimeMethodHandle.InvokeMethodFast(Object target, Object[] arguments, Signature sig, MethodAttributes methodAttributes, RuntimeTypeHandle typeOwner)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture, Boolean skipVisibilityChecks)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture)
   at System.Web.UI.WebControls.ObjectDataSourceView.InvokeMethod(ObjectDataSourceMethod method, Boolean disposeInstance, Object& instance)
   at System.Web.UI.WebControls.ObjectDataSourceView.ExecuteSelect(DataSourceSelectArguments arguments)
   at System.Web.UI.DataSourceView.Select(DataSourceSelectArguments arguments, DataSourceViewSelectCallback callback)
   at System.Web.UI.WebControls.DataBoundControl.PerformSelect()
   at System.Web.UI.WebControls.ListView.PerformSelect()
   at System.Web.UI.WebControls.BaseDataBoundControl.DataBind()
   at System.Web.UI.WebControls.BaseDataBoundControl.EnsureDataBound()
   at System.Web.UI.WebControls.ListView.CreateChildControls()
   at System.Web.UI.Control.EnsureChildControls()
   at System.Web.UI.Control.PreRenderRecursiveInternal()
   at System.Web.UI.Control.PreRenderRecursiveInternal()
   at System.Web.UI.Control.PreRenderRecursiveInternal()
   at System.Web.UI.Control.PreRenderRecursiveInternal()
   at System.Web.UI.Control.PreRenderRecursiveInternal()
   at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

I mean, this doesn't tell you anything about where in your code the problem occured. Or does it?

Well, actually, it doesn't. But by experience, you can learn that when working on stuff in an ASP.NET context, this usually (in my experience) means that the problem was caused by an ObjectDataSource. It might happen with other controls as well, but this is one case where I have seen it.

The ObjectDataSource "invokes" the method on the class you are telling it to get the data from (or perform the update, etc). The problem with this is that the "real" exception is not shown. My guess is that it would be in the "inner" exception in IIS, and this is not shown here, in the event viewer.

Anyway, when debugging the project inside Visual Studio, I still didn't get any exception information (maybe since I have a custom error handler page set up, that could be removed but it turned out not to be necessary). But, what I did get was this:

'WebDev.WebServer.EXE' (Managed): Loaded 'C:\Windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files\root\ff657321\e4c5c948\App_Web_vtrilm_y.dll', Symbols loaded.
'WebDev.WebServer.EXE' (Managed): Loaded 'C:\Windows\assembly\GAC_MSIL\Microsoft.VisualStudio.Diagnostics.ServiceModelSink\3.0.0.0__b03f5f7f11d50a3a\Microsoft.VisualStudio.Diagnostics.ServiceModelSink.dll'
A first chance exception of type 'System.IndexOutOfRangeException' occurred in System.Data.dll
A first chance exception of type 'System.Reflection.TargetInvocationException' occurred in mscorlib.dll
A first chance exception of type 'System.Reflection.TargetInvocationException' occurred in System.Web.dll
A first chance exception of type 'System.Web.HttpUnhandledException' occurred in System.Web.dll
A first chance exception of type 'System.Web.HttpUnhandledException' occurred in System.Web.dll
The thread 0x2bb4 has exited with code 0 (0x0).

The red line at least gives you the name of the exception, which in this case was enough to lead me to the real cause of the problem.

Anyway, that's all for now!