Implementing a jQuery-Calendar ASP.NET Control

October 08, 2007 @ 1:52 pm- from Hood River, Oregon

[12/21/2007 - Note: this control has been updated to use a later version jQuery UI Datepicker so the code below is slightly different than the actual code in the download. The download and sample links point at the new control.]

I've posted a wrapper ASP.NET around the jQuery Calendar control from Marc Garbanski. This small client side calendar control is compact, looks nice and is very easy to use and I've added it some time back to my control library. I spend an hour or so cleaning it up and separating it out so it can be distributed independently:

The control is a very basic wrapper around jQuery Calendar and it provides the basic features of the client control wrapped with server side properties so you can just drag and drop the control onto a page. The control also wraps all the resources including jQuery so the control is self contained.

Building a control wrapper around this control is pretty straight forward. The main complications arise out of determining the best way of dealing with the resources. ASP.NET controls tend to embed all resources into the control assemblies - which has certain advantages such as the ability to automatically compress the content. But it's not always optimal to do this for example, if you have many sites and can rely on shared script resources in a server - or even on a remote server - to serve resources which is more efficient then letting ASP.NET serve resources.

I'm still trying to decide how to best integrate with jQuery in general in my own control libraries and with additional libraries in particular. My current leanings are to leaving scripts external with options to explicitly set the script path. One of the big problems is always script versioning, but also the possibility that scripts are already being included into a page - a possibly likely scenario for jQuery for example.

In this control the default is WebResource which uses embedded resources, with specific path overrides for jQuery.js, jquery-calendar.js and jquery-calendar.css which adds a few extra properties, but gives a little more controls. I'd be interested to hear how others are dealing with maintstream script resources.

There are also a few related tools included (from the wwHoverPanel library which will also have this control in it as wwWebDatePicker once I get around to updating it) like ClientScriptProxy required to co-exist with MS AJAX and a few resource embedding related utilities.

This control works by a SelectedDate property that is tied to the underlying text box - or in the case of the Inline calendar a hidden value. Although jQuery calendar is all client side the control is Postback aware and appropriately persists date values.

The main task of the control is simply to map server properties to the appropriate jQuery-calendar initialization code (in jQuery().ready). Thanks to Marc's simple front end to the control it's pretty straight forward to set up a server control. All of the initialization happens through JavaScript code, so there's a bit of not so clean script generation by the control in the sense the script code generation is always pretty ugly.

There's not a ton of code here so you can check it out for yourself here or by downloading the code from the link above.

[updated: Oct. 10, '07 with feedback from comments]

/// <summary>

/// ASP.NET jQuery Calendar Control Wrapper

/// by Rick Strahl

/// http://www.west-wind.com/

///

/// based on jQuery calendar client control by Marc Grabanski

/// http://marcgrabanski.com/code/jquery-calendar/

///

/// Simple DatePicker control that uses jQuery-calendar to pop up

/// a date picker.

///

/// Important Requirements:

/// scripts/jquery.js

/// scripts/jquery-calendar.js

/// scripts/calendar.css

///

/// Resources are embedded into the assembly so you don't need

/// to reference or distribute anything. You can however override

/// each of these resources with relative URL based resources.

/// </summary>

[ToolboxBitmap(typeof(System.Web.UI.WebControls.Calendar)), DefaultProperty("Text"),

ToolboxData("<{0}:jQueryCalendar runat='server' width='80px'></{0}:jQueryCalendar>")]

public class jQueryCalendar : TextBox

    public jQueryCalendar()

        this.Width = Unit.Pixel(80);

    /// <summary>

    /// The currently selected date

    /// </summary>

    [DefaultValue(typeof(DateTime),""),

    Category("Date Selection")]

    public DateTime? SelectedDate

get

            DateTime defaultDate = DateTime.Parse("01/01/1900", CultureInfo.InstalledUICulture);

            if (this.Text == "")

                return defaultDate;

            DateTime.TryParse(this.Text, out defaultDate);

            return defaultDate;

set

            if (!value.HasValue)

                this.Text = "";

            else

                this.Text = value.Value.ToString("d");

    /// <summary>

    /// Determines how the datepicking option is activated

    /// </summary>

    [Description("Determines how the datepicking option is activated")]

    [Category("Date Selection"), DefaultValue(typeof(DatePickerDisplayModes),"ImageButton")]

    public DatePickerDisplayModes DisplayMode

        get { return _DisplayMode; }

        set { _DisplayMode = value; }

    private DatePickerDisplayModes _DisplayMode = DatePickerDisplayModes.ImageButton;

    /// <summary>

    /// Url to a Calendar Image or WebResource to use the default resource image.

    /// Applies only if the DisplayMode = ImageButton

    /// </summary>

    [Description("Url to a Calendar Image or WebResource to use the default resource image")]

    [Category("Resources"), DefaultValue("WebResource")]

    public string ButtonImage

        get { return _ButtonImage; }

        set { _ButtonImage = value; }

    private string _ButtonImage = "WebResource";

    /// <summary>

    /// The CSS that is used for the calendar

    /// </summary>

    [Category("Resources"), Description("The CSS that is used for the calendar or empty. WebResource loads from resources."),

     DefaultValue("WebResource")]

    public string CalendarCss

        get { return _CalendarCss; }

        set { _CalendarCss = value; }

    private string _CalendarCss = "WebResource";

    /// <summary>

    /// Location for the calendar JavaScript

    /// </summary>

    [Description("Location for the calendar JavaScript or empty for none. WebResource loads from resources")]

    [Category("Resources"), DefaultValue("WebResource")]

    public string CalendarJs

        get { return _CalendarJs; }

        set { _CalendarJs = value; }

    private string _CalendarJs = "WebResource";

    /// <summary>

    /// Location of jQuery library. Use WebResource for loading from resources

    /// </summary>

    [Description("Location of jQuery library or empty for none. Use WebResource for loading from resources")]

    [Category("Resources"), DefaultValue("WebResource")]

    public string jQueryJs

        get { return _jQueryJs; }

        set { _jQueryJs = value; }

    private string _jQueryJs = "WebResource";

    /// <summary>

    /// Determines the Date Format used. Auto uses CurrentCulture. Format: MDY/  month, date,year separator

    /// </summary>

    [Description("Determines the Date Format used. Auto uses CurrentCulture. Format: MDY/  month, date,year separator")]

    [Category("Date Selection"), DefaultValue("Auto")]

    public string DateFormat

        get { return _DateFormat; }

        set { _DateFormat = value; }

    private string _DateFormat = "Auto";

    /// <summary>

    /// Minumum allowable date. Leave blank to allow any date

    /// </summary>

    [Description("Minumum allowable date")]

    [Category("Date Selection"), DefaultValue(typeof(DateTime?), null)]

    public DateTime? MinDate

        get { return _MinDate; }

        set { _MinDate = value; }

    private DateTime? _MinDate = null;

    /// <summary>

    /// Maximum allowable date. Leave blank to allow any date.

    /// </summary>

    [Description("Maximum allowable date. Leave blank to allow any date.")]

    [Category("Date Selection"), DefaultValue(typeof(DateTime?), null)]

    public DateTime? MaxDate

        get { return _MaxDate; }

        set { _MaxDate = value; }

    private DateTime? _MaxDate = null;

    /// <summary>

    /// Client event handler fired when a date is selected

    /// </summary>

    [Description("Client event handler fired when a date is selected")]

    [Category("Date Selection"), DefaultValue("")]

    public string OnClientSelect

        get { return _OnClientSelect; }

        set { _OnClientSelect = value; }

    private string _OnClientSelect = "";

    /// <summary>

    /// Determines where the Close icon is displayed. True = top, false = bottom.

    /// </summary>

    [Description("Determines where the Close icon is displayed. True = top, false = bottom.")]

    [Category("Date Selection"), DefaultValue(true)]

    public bool CloseAtTop

        get { return _CloseAtTop; }

        set { _CloseAtTop = value; }

    private bool _CloseAtTop = true;

    /// <summary>

    /// Code that embeds related resources (.js and css)

    /// </summary>

    /// <param name="p"></param>

    protected void RegisterResources(ClientScriptProxy p)

        // *** Make sure jQuery is loaded

        if (this.jQueryJs == "WebResource")

            ControlResources.LoadjQuery(this.Page);

        else if(!string.IsNullOrEmpty(this.jQueryJs))

            p.RegisterClientScriptInclude(this.Page, typeof(ControlResources),

                 "_jqueryjs", this.ResolveUrl(this.jQueryJs));

        // *** Load the calandar script

        string script = this.CalendarJs;

        // *** Load jQuery Calendar Scripts

        if (script == "WebResource")

            p.RegisterClientScriptResource(this.Page, typeof(ControlResources),

                ControlResources.JQUERY_CALENDAR_SCRIPT_RESOURCE);

        else if (!string.IsNullOrEmpty(script))

            p.RegisterClientScriptInclude(this.Page, typeof(ControlResources),

                                "__jqueryCalendar",

                                this.ResolveUrl(script));

        // *** Load the related CSS reference into the page

        script = this.CalendarCss;

        if (script == "WebResource")

            script = p.GetWebResourceUrl(this.Page, typeof(ControlResources),

                                         ControlResources.JQUERY_CALENDAR_CSS_RESOURCE);

        else if (!string.IsNullOrEmpty(script))

            script = this.ResolveUrl(this.CalendarCss);

        // *** Register Calendar CSS 'manually'

        string css = @"<link href=""" + script +

                     @""" type=""text/css"" rel=""stylesheet"" />";

        p.RegisterClientScriptBlock(this.Page, typeof(ControlResources), "_calcss", css, false);

    /// <summary>

    /// Most of the work happens here for generating the hook up script code

    /// </summary>

    /// <param name="e"></param>

    protected override void OnPreRender(EventArgs e)

        base.OnPreRender(e);

        // *** MS AJAX aware script management

        ClientScriptProxy p = ClientScriptProxy.Current;

        // *** Register resources

        this.RegisterResources(p);

        string dateFormat = this.DateFormat;

        if (string.IsNullOrEmpty(dateFormat))

            dateFormat = "MDY/";

        else if(dateFormat == "Auto")

             string sep = CultureInfo.CurrentCulture.DateTimeFormat.DateSeparator;

             dateFormat = CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern.ToLower().Replace(sep, "").Replace("yyyy", "y").Replace("mm", "m").Replace("dd", "d").ToUpper() + sep;

        // *** Capture and map the various option parameters

        StringBuilder sbOptions = new StringBuilder(512);

        sbOptions.Append("{");

        string onSelect = this.OnClientSelect;

        if (this.DisplayMode == DatePickerDisplayModes.Button)

            sbOptions.Append( "autoPopUp: 'button',");

        else if (this.DisplayMode == DatePickerDisplayModes.ImageButton)

            string img = this.ButtonImage;

            if (img == "WebResource")

                img = p.GetWebResourceUrl(this, typeof(ControlResources), ControlResources.CALENDAR_ICON_RESOURCE);

            else

                img = this.ResolveUrl(this.ButtonImage);

            sbOptions.Append("autoPopUp: 'button', buttonImageOnly: true, buttonImage: '" + img + "',buttonText: 'Select date',");

        else if (this.DisplayMode == DatePickerDisplayModes.Inline)

            p.RegisterHiddenField(this, this.ClientID, this.Text);

            onSelect = this.ClientID + "OnSelect";

        if (!string.IsNullOrEmpty(onSelect))

            sbOptions.Append("onSelect: " + onSelect + ",");

        if (this.MaxDate.HasValue)

            sbOptions.Append("maxDate: " + wwWebUtils.EncodeJsDate(MaxDate.Value) + ",");

        if (this.MinDate.HasValue)

            sbOptions.Append("minDate: " + wwWebUtils.EncodeJsDate(MinDate.Value) + ",");

        if (!this.CloseAtTop)

            sbOptions.Append("closeAtTop: false,");

        sbOptions.Append("dateFormat: '" + dateFormat + "'}");

        // *** Write out initilization code for calendar

        StringBuilder sbStartupScript = new StringBuilder(400);

        sbStartupScript.AppendLine("jQuery(document).ready( function() {");

        if (this.DisplayMode != DatePickerDisplayModes.Inline)

           sbStartupScript.AppendLine("var cal = jQuery('#" + this.ClientID + "').calendar(" + sbOptions.ToString() + ");");

        else

            sbStartupScript.AppendLine("var cal = jQuery('#" + this.ClientID + "Div').calendar(" + sbOptions.ToString() + ");");

            if (this.SelectedDate.HasValue && this.SelectedDate.Value > new DateTime(1900,1,1,0,0,0,DateTimeKind.Utc))

                sbStartupScript.AppendLine("popUpCal.setDateFor(cal[0],new Date('" + this.Text + "'));");

            sbStartupScript.AppendLine("popUpCal.reconfigureFor(cal[0]);");

            // *** Assign value to hidden form var on selection

            p.RegisterStartupScript(this, typeof(ControlResources), this.UniqueID + "OnSelect",

                "function  " + this.ClientID + "OnSelect(dateStr)\r\n" +

                "{\r\n" +

                ((string.IsNullOrEmpty(this.OnClientSelect)) ? this.OnClientSelect + "(dateStr);\r\n" : "") +

                "jQuery('#" + this.ClientID + "')[0].value = dateStr;\r\n}\r\n",true);

        sbStartupScript.AppendLine("} );");

        p.RegisterStartupScript(this.Page, typeof(ControlResources), "_cal" + this.ID ,

             sbStartupScript.ToString() , true);

    /// <summary>

///

    /// </summary>

    /// <param name="writer"></param>

    public override void RenderControl(HtmlTextWriter writer)

        if (this.DisplayMode != DatePickerDisplayModes.Inline)

            base.RenderControl(writer);

        else

            writer.Write("<div id='" + this.ClientID + "Div'></div>");

        if (HttpContext.Current == null)

            if (this.DisplayMode == DatePickerDisplayModes.Button)

                writer.Write(" <input type='button' value='...' style='width: 20px; height: 20px;' />");

            else if ((this.DisplayMode == DatePickerDisplayModes.ImageButton))

                string img;

                if (this.ButtonImage == "WebResource")

                    img = this.Page.ClientScript.GetWebResourceUrl(this.GetType(), ControlResources.CALENDAR_ICON_RESOURCE);

                else

                    img = this.ResolveUrl(this.ButtonImage);

                writer.AddAttribute(HtmlTextWriterAttribute.Src, img);

                writer.AddAttribute("hspace", "2");

                writer.RenderBeginTag(HtmlTextWriterTag.Img);

                writer.RenderEndTag();

public enum DatePickerDisplayModes

    Button,

    ImageButton,

    AutoPopup,

    Inline

Enjoy,

+++ Rick --

Posted in AJAX ASP.NET jQuery

Feedback for this Weblog Entry

re: Implementing a jQuery-Calendar ASP.NET Control
by Steve October 08, 2007 @ 6:20 pm

wow.

Now, this is where I find MAJOR fault with webforms: you had to do all this integrate a control into .net???

Not to downplay what you have done, I mean that is fantastic, but it seems to me that asp.net webforms makes utilizing this javascript based control a nightmare. The whole point of using a JQuery control is to have pre-built components with the javascript api to add to a web page.

This is where I must say that having a asp.net engine like Monorail instead of webforms makes more sense.

I implemented the yui tab control with no asp.net code needed with Monorail. It cleanly separates the view from the controller.

Agree?

re: Implementing a jQuery-Calendar ASP.NET Control
by Rick Strahl October 08, 2007 @ 8:05 pm

@Steve

>> Now, this is where I find MAJOR fault with webforms: you had to do all this integrate a control into .net???

Depends on what you're after. If you want to use just the client side features with ASP.NET, then you don't need to do anything and you can just use jQuery and jQuery-Calendar directly in your markup - no code of any sort required except the JavaScript you'd write in whatever other tool or plain HTML. And even if you wanted to just USE it from ASP.NET it would take much less code.

But if you want a control that supports postback and toolbox support and script embedded resources, and that supports most of the behavior the client side control has through server assigned properties, then yes you need a bunch of code to hook that up. Personally I think it's worth the effort because from here going forward I don't have to even touch script code or worry about picking up post back values. There's no code involved in getting scripts loaded or configuring the control and maybe most importantly I don't have to go look at the documentation because I can't remember the options I need to set <s>...

OTOH, if you're building a purely client centric application that uses service based patterns (rather than postback patterns) then sure - this isn't going to buy you much of anything given that using the javascript control is basically one line of code to attach...

I have my issues with the ASP.NET webform model myself, but for things like this I actually think it works very well. While this might strike you as a lot of code it actually is very little in terms of time it takes to put this together and the reusability factor is very high at least for me.

I don't want to sound defensive here, but... there's a big difference between USING functionality and building something that is reusable, the latter of which always ends up being a fair bit of code if you do it right - it doesn't matter whether it's ASP.NET JavaScript or anything else...

IOW, you can make it as simple or complex as you like... You know the drill - the more reusable the longer it takes <g>...

re: Implementing a jQuery-Calendar ASP.NET Control
by Anonymous Nagger October 09, 2007 @ 10:49 am

Helpful entry!!

I have a few (nagging) comments on the code though:

1) Wasn\\\'t code like this one of the deadly sins?

try{

}
catch
{
//Pretend nothing ever happened
}

2) Your naming convention hurts my eyes. Class and property names starting with lowercase are not so common to .NET developers, I think, regardless the fact that the technology starts with lowercase (jQuery) - JQueryCalendar seems more natural. The same goes for wwWebUtils - I think branding is usually encoded in the namespace - WestWind.WebUtils sounds better to me for some reason.

3) XHTML compliance. I don\\\'t know of the jQuery calender but your code currently does not comply to standards. Registering a <link> tag with RegisterClientScriptBlock will render the same outside the <head> tag of the page, which is the only acceptable place for <link> tags. Adding a child control in Page.Header will improve things quite a bit.

I hope you don\\\'t find those offensive. I just gave my two cents.

re: Implementing a jQuery-Calendar ASP.NET Control
by Rick Strahl October 09, 2007 @ 11:38 am

Noted <g>

>> 1) Wasn't code like this one of the deadly sins?

Never follow rules absolutely, right? How else are you going to capture code that has a high probability to fail yet you can safely continue on with? I never believed in that particular 'rule' because it enirely depends on the situation.

Code Convention and capitalization- yes I'm aware of that. I admit I still have a real hard time breaking my proper capitalization everywhere habit especially when I just throw something together quickly like this.

>> Link tag

Correct. I did actually think about this a bit recently. There's no 'official' way to do this easily in ASP.NET without a quite a bit of headache. While it's not difficult to get something into the header itself, making sure it only shows up once in the header is. I've been meaning to add a utility routine for this to the client script proxy, but haven't gotten around to it.

Something like RegisterCssTag() is needed to do this right. In fact it'd be nice to provide a separate method for explicitly registering scripts in the header as well (so you have more than one place to register them to shuffle them around - for example, it'd be much nicer to have jquery in the header than in the body, just in case this is used in a page that already uses jquery externally).

>> I hope you don't find those offensive. I just gave my two cents.

Nah... productive comments that stimulate discussion are always welcome... I need all the help I can get. I guess this is one reason I post code - feedback is always good and having it right here I'm always sure to get some whereas if you just distribute the code you rarely get any comments.

re: Implementing a jQuery-Calendar ASP.NET Control
by kevin October 09, 2007 @ 6:10 pm

I'm sorry rick but I have to disagree with ya on this one.

Another level of abstraction on top of something that is meant to be lower level. If you're gonna go this route, why not just use one of the ATLAS calendar controls out there?

Just lets the developer use the jquery plugin directly via javascript.

re: Implementing a jQuery-Calendar ASP.NET Control
by Rick Strahl October 09, 2007 @ 8:24 pm

Wow, interesting reactions - didn't see that coming...

>> Another level of abstraction on top of something that is meant to be lower level. If you're gonna go this route, why not just use one of the ATLAS calendar controls out there?

There’s an interesting discussion here I think <s>

It really depends on how you work. If you’re working in a pure client side environment then yes by all means use jQuery and plugins directly. The calendar and most other plugins are very easy to use and that is the beauty of jQuery.

However, I think there are plenty of scenarios where you still get plenty of value out of ASP.NET controls *if* you’re not using a full bore client side application. I don’t agree about using ATLAS – I use lots of AJAX in my apps but I won’t touch ATLAS with a 10 foot pole unless I have to <s>…

I suppose I’m pragmatic – I use what works which is something that lives in the middle between pure client centric and server side ASP.NET controls. I still use AJAX as an *icing on the cake* technology rather than a main driver for the entire UI application (ie ASP.NET as a service only). I don’t think we’re even close to the point where pure JavaScript client UIs can drive the UI completely especially for more forms and business applications.

Given that, I think that there’s plenty of value of wrapping up functionality of JavaScript components with ASP.NET server side code. Take the example of the calendar. It sure is nice to be able to just drop the control on a page and not having to hook up code to include scripts CSS and even client load code. Most importantly there’s Postback handling (inline mode – that’s non-trivial BTW since it requires a hidden control). Granted it’s no big deal especially with this simple control, but from a developer experience it still is nice and there’s nothing lost in the process – you can still access the raw control and javascript functionality.

I’d be curious to hear what you have in mind here… what's the scenario you're advocating here? Service centric client apps?

Incidentally the reason I wrapped this up and posted it here separately (outside of wwHoverPanel which will include this as well) is because the author of the calendar(Marc Garbanski) left a comment a week ago saying he'd like to see a control for it.

re: Implementing a jQuery-Calendar ASP.NET Control
by kevin October 10, 2007 @ 7:01 am

@rick - yea, I wouldn't use ATLAS either. just mentioned that since it has the encapsulation you're already looking for.

I mean, I understand the "why" you'd wrap it but let me be more specific as to what my main concerns are.

a) what if the app already has a reference to the jquery library maybe in the master page? now you're either introducing another reference or pulling a reference to the jquery file from the resource location.

b) if you're including the jquery library in the compiled resource location, then what about versioning of the jquery library? should I have to recompile my entire app if maybe they introduce a memory leak by accident and push a hot fix?

This all being said, you're code is a great example of how to do this the right way if you're going to do this at all.

You're correct, my cause for concern deals with how I work, and I often leave the reference to jquery in my master page, so any other page can easily use the library when needed. I also like all my js code <!-- included, and then any page level logic placed in the HEAD section of the page. I try to leave my BODY html super clean. This way if I change something I can just push the aspx page if needed version recompiling, etc.

re: Implementing a jQuery-Calendar ASP.NET Control
by Andy October 10, 2007 @ 7:56 am

I like your control and want to use it for my intranet website.
When using it for my asp.net page I got NullReferenceException for var p in LoadjQuery method. I am using master page, not sure it has anything to do with it.
Any suggestion?

public static void LoadjQuery(Control control, string jQueryUrl)
{
ClientScriptProxy p = ClientScriptProxy.Current;
//p.RegisterClientScriptResource(control, typeof(ControlResources), ControlResources.PROTOTYPE_SCRIPT_RESOURCE);
p.RegisterClientScriptResource(control, typeof(ControlResources), ControlResources.JQUERY_SCRIPT_RESOURCE);

return;

//ClientScriptProxy p = ClientScriptProxy.Current;

//if (string.IsNullOrEmpty(jQueryUrl))
// jQueryUrl = "~/scripts/jquery.js";

//string script;
//if (HttpContext.Current.IsDebuggingEnabled)
// script = control.ResolveUrl(jQueryUrl);
//else
// script = control.ResolveUrl(jQueryUrl.Replace(".js",".min.js"));

//p.RegisterClientScriptInclude(control, typeof(ControlResources), "__jquery", script);

#if (false) // *** Embed in header

// StringBuilder sb = new StringBuilder(128);
// sb.Append(@"
//<script src=""" + script +
//@""" type=""text/javascript""></script>
//");

// <script type=""text/javascript"">
//jQuery.noConflict();
//</script>
//control.Page.Header.Controls.AddAt(0, new LiteralControl(sb.ToString()));

//p.RegisterClientScriptBlock(control,typeof(ControlResources),
// "__jqueryinit",
// "jQuery.noConflict",true);
#endif
}

re: Implementing a jQuery-Calendar ASP.NET Control
by Anonymous Nagger October 10, 2007 @ 11:10 am

You are 100% right. CSS is not a first class citizen in ASP.NET. There is only some rudimentary support for inline styles through the Header control. Anyway I have used RegisterClientScriptBlock/IsClientScriptBlockRegistered along with adding controls to the Header so no CSS file gets registered twice.

As for the try/catch - I have come to follow that rule without having second thoughts. Here are my arguments:
1) Most of the time the Exception thrown would be due to some nasty bug. If the exception is swallowed there is a great chance to miss that bug.
2) If you build a reusable component (or control) users may get aggravated if setting a property does nothing (because of the exception that is).
3) Sometimes you may catch exceptions which are not supposed to. Believe me or not I\\\'ve had a case of Regex.Replace throwing OutOfMemoryException which was caught in a similar try/catch block. Of course the world is not the same after an OutOfMemoryException :)

Also I can\\\'t see what could throw an exception in your case - all I see is a bunch of string.Replace-s and ToLower-s. As far as I know those rarely throw exceptions.

Anyway, thank you for being open to comments and sharing useful code.

re: Implementing a jQuery-Calendar ASP.NET Control
by Rick Strahl October 10, 2007 @ 11:55 am

@Kevin - good points. In fact, I realized I forgot to add an option to allow the resources not to get loaded optionally (by leaving any of the resource references blank (code updated above) which is indeed crucial.

Script versioning is an issue - always, as I'm sure you're aware and it's something that there really aren't great solutions for short of forcing scripts to load through some central manager.

Regarding:

a) I've added the ability to turn off script and resource loading so nothing loads from resources or specified URLs but purely what you put on the page.

The other option is to use a central function to load resources. So in the library there's a static ControlResources.IncudejQuery() that can be dropped in code to load jQuery. So in your master scenario using that would be able to discern when jQuery already exists on the page and not double drop it. I've been using this somewhat generic mechanism for resource loading in general and it works well and reliably.

b) I don't necessarily agree with this point. In my mind it's actually easier to manage resources in one place, recompile and redeploy an assembly than redeploy a bunch of script and CSS files. Especially if you use a component or set of libraries in multiple applications. I have 5 sites I update regularily and they all use controls that rely on script libraries. If I make a change to the script library I can recompile the assembly once and update the apps next time they update with just the bin code.

Again it depends on perspective - if you're doing a purely client side application then this may seem like blasphemy, but if you're already dealing with ASP.NET code this is a viable alternative. Compiling and updating code is not any more difficult that updating a JS file <g>...

Great discussion BTW and very appropros as I'm still fretting over library implementation for some updated tools.

re: Implementing a jQuery-Calendar ASP.NET Control
by Rick Strahl October 10, 2007 @ 11:58 am

@Andy - not sure what might be causing this. Can you step into the code of ClientScript.Current? All that does is create an instance on an HttpContext.Item so there's only one instance per request.

It works for me here with or without the master page - how are you running when this fails exactly (ie. what environment/server)? Does it work with out the master page?

Note though - you might run into problems if you use this in combination with my wwHoverPanel control because there are some name overlaps (because this control is actually part of that) and that could possibly be the cause.

re: Implementing a jQuery-Calendar ASP.NET Control
by Rick Strahl October 10, 2007 @ 12:03 pm

>> Anyway I have used RegisterClientScriptBlock/IsClientScriptBlockRegistered along with adding controls to the Header so no CSS file gets registered twice.

Yes that's what I'm doing above as well. Isn't that what you were complaining about in the code above? Unfortunately though that doesn't render in the header, but in the body of the HTML.

As to the exception - it was meant to ensure that the culture specific date parameters got retrieved. It turns out this is not necessary - I was actually thinking of the culture switching and a culture not being available but that would actually happen elsewhere so you're right in this case this was completely redundant.

I understand abuse of empty try/catch and it should be avoided but there are a some scenarios - the culture switch scenario being one of them - where I have no qualms about using this type of code, coding 'recommendations' or not.

Anyway thanks for the comments. I've updated the code with a few small adjustments thanks to your comments.

re: Implementing a jQuery-Calendar ASP.NET Control
by Bernal Schooley October 14, 2007 @ 7:20 am

Hello Rick,

I'm glad to see more people making use of jQuery in ASP.Net. I too avoid the Ajax Control Toolkit. I find it too heavy and difficult to tweak.

My suggestion for how to deal with resources is to code your control without them and give a list of dependencies and installation steps. I would even include the CSS as a dependency as well. Even if you want to support a less dependent model, you should probably assume the resources are present by default and provide properties like IncludeJquery="true".

This will make room for more controls built around jQuery plugins with less worry about duplicating resources.

Keep them coming.. I have some ASP.Net/jQuery controls that I've been thinking about posting on my blog as well.

--Bernal

re: Implementing a jQuery-Calendar ASP.NET Control
by Rick Strahl October 15, 2007 @ 12:24 pm

@Bernal - I agree and what I did with the control above is to use resources by default, but you can explicitly tell it where to find each of the resources, or leave them blank in which case nothing gets embedded at all (like if jQuery is already defined for example).

re: Implementing a jQuery-Calendar ASP.NET Control
by Jeff October 30, 2007 @ 3:07 pm

I have been trying to use AJAX with this control and just putting the ScriptManager on the page will stop the popup from showing. I assume I need to use ScriptManagerProxy, but this is unfamiliar to me. I looked around for some hints, but I have not found an answer. How do you get AJAX work with this control?

re: Implementing a jQuery-Calendar ASP.NET Control
by Rick Strahl October 30, 2007 @ 5:37 pm

Hmmm... works for me. Everything should work except having the control invisible inside of an UpdatePanel and then making it visible. Due to the way the scriptmanager adds scripts it doesn't allow the addition of the references to the CSS resource. You can avoid that particular problem by manually adding the CSS reference to the page and setting the Css location to blank.

Otherwise this should just work because the control is using the ClientScriptProxy which properly uses the AJAX scriptmanager to register all script code.

re: Implementing a jQuery-Calendar ASP.NET Control
by Jeff October 31, 2007 @ 8:37 am

Thanks for the feedback. I tried using the control with AJAX in a new project and it works fine. Something about my other project is not quite right.

re: Implementing a jQuery-Calendar ASP.NET Control
by Jeff October 31, 2007 @ 12:12 pm

> Due to the way the scriptmanager adds scripts it doesn't allow the addition of the references to the CSS resource.

Funny that you mentioned this. I have a list of days of the week where the user can select the day instead of using the calendar. It fills in the calendar with the desired date. It is within an UpdatePanel and it is all visible. After the control's selected event runs, I get this error,

The script tag registered for type 'Westwind.Web.Controls.ControlResources' and key '_calcss' has invalid characters outside of the script tags: <link href="...WebResource.axd?d=..." type="text/css" rel="stylsheet" />. Only property formatted script tags can be registered.

I took the <link> tag information and put it on the page and commented out the register client script in jQueryCalendar.cs and it is happy.

re: Implementing a jQuery-Calendar ASP.NET Control
by Rick Strahl October 31, 2007 @ 1:21 pm

Yes I found this problem yesterday as I tested this with your scenario. The problem is that the script manager only allows registration of script code on a callback where on the main page render it doesn't care (which is kind of lame actually, but makes sense).

The fix is to check whether the Css path is blank and if it it is not render the CSS tag - this requires that you manually add the CSS reference into the document though.

I fixed this here and will be updated next time I'll post this up.

re: Implementing a jQuery-Calendar ASP.NET Control
by Doug December 10, 2007 @ 1:24 pm

I found a major problem with every version of the ui.datepicker control when used in conjunction with the .NET RequiredField Validator controls.

Whether it is wrapped in this control or used stand alone where you just include the js files for jquery and the ui.datepicker.js... OR you used the older version as used in this control which is the jquery-calendar.js. As soon as you throw a asp:requiredfieldvalidator or other type on the date field the validator code throws a javascript error.

function ValidatorOnChange(event) {
    if (!event) {
        event = window.event;
    }
    Page_InvalidControlToBeFocused = null;
    var targetedControl;
    if ((typeof(event.srcElement) != "undefined") && (event.srcElement != null)) {
        targetedControl = event.srcElement;
    }
    else {
        targetedControl = event.target;
    }
    var vals;
    if (typeof(targetedControl.Validators) != "undefined") {
        vals = targetedControl.Validators;
    }
    else {
        if (targetedControl.tagName.toLowerCase() == "label") {
            targetedControl = document.getElementById(targetedControl.htmlFor);
            vals = targetedControl.Validators;
        }
    }
    var i;
    for (i = 0; i < vals.length; i++) {
        ValidatorValidate(vals[i], null, event);
    }
    ValidatorUpdateIsValid();
}

What I've run into is that the action of chosing the date from the calendar popup triggers the validator on change event... but the target control is an anchor tag denoting the day which was clicked on vs the text control... so when the code executes and it gets to the

for (i = 0; i < vals.length; i++) {
ValidatorValidate(vals[i], null, event);
}

the vals.length property fails because vals is null. Try taking this download example and just throw a required field validator on the first datepicker control. Run it with debug scripting enabled on the browser and look where it breaks.

This is a great control but I cannot find a way to use it with the .NET validators. Anyone have any ideas?

re: Implementing a jQuery-Calendar ASP.NET Control
by Earl December 19, 2007 @ 8:15 am

Rick,

Nice article. I am in the process of investigating alternative to the MS Ajax Library and AJAX control toolkit as I feel it is too heavy to use on our main landing pages. A friend of mine got me using jquery, and I have to say I love its simplicity and size. I am also investigating how to create Custom Controls and user controls that leverage and wrap the Jquery library, so I really appreciated your article.

I have a question that perhaps you can help me with. I am trying to figure out the best options to maintain client side preference changes that are made as a result of javascript running on the client. For example, suppose I created a jquery version of a collapse panel as a custom control. With this panel I want to collect its state (opened or closed) on every postback so I can maintain the user's preference. To do this I am thinking about using a hidden field, is there a better way of storing this information so it can be easily collected at postback? What are you thoughts on this?

Thanks,
Earl

re: Implementing a jQuery-Calendar ASP.NET Control
by Marc February 01, 2008 @ 1:52 pm

@Doug

I ran into a similar problem, and rather than use a RequiredValidator, I've switched to a CustomValidator to do everything server-side, and also removed the ControlToValidate attribute. Wasn't a big deal for me since I had to validate some other things as well. This has so far seemed to work ok, but I haven't done much testing with it as of yet.

re: Implementing a jQuery-Calendar ASP.NET Control
by sangy May 27, 2008 @ 11:23 am

Hi Rick:

Though the calendar control works perfectly, in IE when one clicks on the back button then the control seems to lose the date value -- though in firefox it works just fine.

Essentially, I'm selecting the dates and then need to navigate to another page -- when one returns to the page that contains the calendar control the dates are lost. However, if one causes a postback on the page that contains the calendar control and navigates away from the page, and then returns back to the page contains the calendar controls the dates *remain*.

Again, the dates being lost seems to happen only with IE...

re: Implementing a jQuery-Calendar ASP.NET Control
by Rob September 24, 2008 @ 5:56 am

Hi Rick,

I am trying to load a new JQueryDatePicker into a DataGrid Template dynamically in ItemDatabound. The first DatePicker is rendered and works as planned but all others are disabled. I have it set for auto popup but clicking the textbox does nothing, no javascrpt error msg appears?

I have tried placing the control directly into the template or a placeholder and the same problem occurs. If the control is placed in the template control on the page (not dynamically) it works fine.

Is there anyway around this?

Code:
Protected Sub dg2_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dg2.ItemDataBound
If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
Dim plc As PlaceHolder = CType(e.Item.FindControl("plc"), PlaceHolder)
Dim cal As New Westwind.Web.Controls.jQueryDatePicker
cal.DisplayMode = Westwind.Web.Controls.DatePickerDisplayModes.AutoPopup
plc.Controls.Add(cal)
End If
End Sub

re: Implementing a jQuery-Calendar ASP.NET Control
by kaweesak October 30, 2008 @ 8:41 pm

how to set regional to other language?

i set
//ui.datepicker.js

this.regional['th'] = {
...

but error