Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Source Code for JQuery ASP.NET Controls

, 10 Jun 2009 CPOL
Get a start to building your own JQuery Controls
Mullivan.Web.zip
TestApp
App_Data
bin
Meps.Web.dll
Meps.Web.pdb
Mullivan.Web.dll
Mullivan.Web.pdb
TestApp.dll
TestApp.pdb
CSS
images
ui-bg_flat_30_cccccc_40x100.png
ui-bg_flat_50_5c5c5c_40x100.png
ui-bg_glass_20_555555_1x400.png
ui-bg_glass_40_0078a3_1x400.png
ui-bg_glass_40_ffc73d_1x400.png
ui-bg_gloss-wave_25_333333_500x100.png
ui-bg_highlight-soft_80_eeeeee_1x100.png
ui-bg_inset-soft_25_000000_1x100.png
ui-bg_inset-soft_30_f58400_1x100.png
ui-icons_222222_256x240.png
ui-icons_4b8e0b_256x240.png
ui-icons_a83300_256x240.png
ui-icons_cccccc_256x240.png
ui-icons_ffffff_256x240.png
Images
bass.jpg
drums.jpg
guitar.jpg
mic.jpg
piano.jpg
LocalTestRun.testrunconfig
Properties
TestApp.csproj.user
TestResults
Sully_SULLYLAPTOP 2009-05-18 11_46_18.trx
Sully_SULLYLAPTOP 2009-05-18 11_46_18
In
SULLYLAPTOP
Out
testproject.dll
TestProject.pdb
Sully_SULLYLAPTOP 2009-05-18 11_47_15.trx
Sully_SULLYLAPTOP 2009-05-18 11_47_15
In
SULLYLAPTOP
Out
testproject.dll
TestProject.pdb
Sully_SULLYLAPTOP 2009-05-18 11_48_19.trx
Sully_SULLYLAPTOP 2009-05-18 11_48_19
Out
testproject.dll
TestProject.pdb
Sully_SULLYLAPTOP 2009-05-18 11_50_12.trx
Sully_SULLYLAPTOP 2009-05-18 11_50_12
In
SULLYLAPTOP
Out
testproject.dll
TestProject.pdb
Sully_SULLYLAPTOP 2009-05-18 11_51_17.trx
Sully_SULLYLAPTOP 2009-05-18 11_51_17
Out
testproject.dll
TestProject.pdb
Sully_SULLYLAPTOP 2009-05-18 11_52_03.trx
Sully_SULLYLAPTOP 2009-05-18 11_52_03
In
SULLYLAPTOP
Out
testproject.dll
TestProject.pdb
Sully_SULLYLAPTOP 2009-05-18 11_52_28.trx
Sully_SULLYLAPTOP 2009-05-18 11_52_28
In
SULLYLAPTOP
Out
testproject.dll
TestProject.pdb
Sully_SULLYLAPTOP 2009-05-19 11_04_00.trx
Sully_SULLYLAPTOP 2009-05-19 11_04_00
Out
testproject.dll
TestProject.pdb
Sully_SULLYLAPTOP 2009-05-19 11_25_01.trx
Sully_SULLYLAPTOP 2009-05-19 11_25_01
Out
testproject.dll
TestProject.pdb
Sully_SULLYLAPTOP 2009-05-19 11_25_08.trx
Sully_SULLYLAPTOP 2009-05-19 11_25_08
Out
testproject.dll
TestProject.pdb
Sully_SULLYLAPTOP 2009-05-19 11_25_29.trx
Sully_SULLYLAPTOP 2009-05-19 11_25_29
Out
testproject.dll
TestProject.pdb
Sully_SULLYLAPTOP 2009-05-19 11_26_11.trx
Sully_SULLYLAPTOP 2009-05-19 11_26_11
In
SULLYLAPTOP
Out
testproject.dll
TestProject.pdb
Sully_SULLYLAPTOP 2009-05-20 13_45_21.trx
Sully_SULLYLAPTOP 2009-05-20 13_45_21
In
SULLYLAPTOP
Out
testproject.dll
TestProject.pdb
TestSecurity.suo
TestSecurity.vsmdi
Mullivan.Web
bin
Debug
Mullivan.Web.dll
Images
calendar.gif
hSliderEnd.gif
hSliderMid.gif
hSliderTab.gif
vSliderEnd.gif
vSliderMid.gif
vSliderTab.gif
JS
Mullivan.snk
Properties
UI
Design
WebControls
WebControls
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.ComponentModel;
using System.Web.UI.WebControls;
using System.Globalization;
using System.Drawing;
using System.Web;

namespace Mullivan.Web.UI.WebControls
{
    /// <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}:JQueryDatePicker runat='server' width='80px'></{0}:JQueryDatePicker>")]
    public class JQueryDatePicker : TextBox
    {

        public JQueryDatePicker() : base()
        {
            this.Width = Unit.Pixel(80);
        }

        [Browsable(false)]
        public string ClientJQueryControlId
        {
            get
            {
                this.EnsureID();
                return "jq" + this.ClientID;
            }
        }

        [Browsable(false)]
        public string ClientJQueryValueControlId
        {
            get
            {
                this.EnsureID();
                return this.ClientID + "_Value";
            }
        }

        /// <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
                {
                    string dateFormat = this.DateFormat;
                    if (dateFormat == "Auto")
                        dateFormat = CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern;
                    this.Text = value.Value.ToString(dateFormat);
                }
            }
        }

        /// <summary>    
        /// Determines how the datepicking option is activated    
        /// </summary>    
        [Description("Determines how the datepicking option is activated")]
        [Category("Date Selection")]
        public DatePickerDisplayModes DisplayMode
        {
            get
            {
                return (this.ViewState["DisplayMode"] != null ?
                    (DatePickerDisplayModes) this.ViewState["DisplayMode"] 
                    : DatePickerDisplayModes.ImageButton);
            }
            set
            {
                this.ViewState["DisplayMode"] = value;
            }
        }

        /// <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 (this.ViewState["ButtonImage"] != null ?
                    this.ViewState["ButtonImage"].ToString()
                    : "WebResource");
            }
            set
            {
                this.ViewState["ButtonImage"] = value;
            }
        }

        /// <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 (this.ViewState["DateFormat"] != null ?
                    this.ViewState["DateFormat"].ToString()
                    : "Auto");
            }
            set
            {
                this.ViewState["DateFormat"] = value;
            }
        }
        /// <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 (this.ViewState["MinDate"] != null ?
                    (DateTime?)this.ViewState["MinDate"]
                    : null);
            }
            set
            {
                this.ViewState["MinDate"] = value;
            }
        }

        /// <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 (this.ViewState["MaxDate"] != null ?
                    (DateTime?)this.ViewState["MaxDate"]
                    : null);
            }
            set
            {
                this.ViewState["MaxDate"] = value;
            }
        }

        /// <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 (this.ViewState["OnClientSelect"] != null ?
                    this.ViewState["OnClientSelect"].ToString()
                    : string.Empty);
            }
            set
            {
                this.ViewState["OnClientSelect"] = value;
            }
        }

        /// <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 (this.ViewState["CloseAtTop"] != null ?
                    (bool)this.ViewState["CloseAtTop"]
                    : true);
            }
            set
            {
                this.ViewState["CloseAtTop"] = value;
            }
        }

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);


            ClientScriptProxy p = ClientScriptProxy.Current;
            // *** Register resources 
            JQueryUtil.RegisterRequiredResources(p, this);
            
#if DEBUG
            p.RegisterClientScriptInclude(this, WebResources.JQUERY_JAVASCRIPT_UI_DATEPICKER, false);
#endif
        }

        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            if (this.Page.IsPostBack && this.DisplayMode == DatePickerDisplayModes.Inline)
            {
                this.Text = this.Page.Request.Form[ClientJQueryValueControlId];
            }
        }

        /// <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 scriptProxy = ClientScriptProxy.Current;

            string dateFormat = this.DateFormat;

            if (string.IsNullOrEmpty(dateFormat) || dateFormat == "Auto")
            {
                // *** Try to create a data format string from culture settings
                // *** this code will fail if culture can't be mapped on server hence the empty try/catch
                try
                {
                    dateFormat = CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern;
                }
                catch { }
            }

            dateFormat = dateFormat.ToLower().Replace("yyyy", "yy");

            // *** Capture and map the various option parameters
            StringBuilder sbOptions = new StringBuilder(512);
            sbOptions.Append("{");

            string onSelect = this.OnClientSelect;

            if (this.DisplayMode == DatePickerDisplayModes.Button)
                sbOptions.AppendLine("showOn: 'button',");
            else if (this.DisplayMode == DatePickerDisplayModes.ImageButton)
            {
                string img = this.ButtonImage;
                if (img == "WebResource")
                    img = scriptProxy.GetWebResourceUrl(this, typeof(WebResources), WebResources.IMAGE_DATEPICKER);
                else
                    img = this.ResolveUrl(this.ButtonImage);

                sbOptions.AppendLine("showOn: 'button', buttonImageOnly: true, buttonImage: '" + img + "',buttonText: 'Select date',");
            }
            else if (this.DisplayMode == DatePickerDisplayModes.Inline)
            {
                scriptProxy.RegisterHiddenField(this, this.ClientJQueryValueControlId, this.Text);
                onSelect = this.ClientID + "OnSelect";
            }

            if (!string.IsNullOrEmpty(onSelect))
                sbOptions.AppendLine("onSelect: " + onSelect + ",");

            if (this.MaxDate.HasValue)
                sbOptions.AppendLine("maxDate: " + WebUtils.EncodeJsDate(MaxDate.Value) + ",");

            if (this.MinDate.HasValue)
                sbOptions.AppendLine("minDate: " + WebUtils.EncodeJsDate(MinDate.Value) + ",");

            if (!this.CloseAtTop)
                sbOptions.AppendLine("closeAtTop: false,");

            if (this.DisplayMode != DatePickerDisplayModes.Inline)
            {
                sbOptions.AppendLine(@"
beforeShow : function (input){
var inst = $.datepicker._getInst(input);
inst.dpDiv[0].style.zIndex = $.ui.dialog.maxZ + 1; //Places Control Above Dialog
},");
            }

            if (this.SelectedDate.HasValue && this.SelectedDate.Value > new DateTime(1900, 1, 1, 0, 0, 0, DateTimeKind.Utc))
                sbOptions.AppendLine("defaultDate : new Date('" + this.Text + "'),");

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


            // *** Write out initilization code for calendar
            StringBuilder sbStartupScript = new StringBuilder(400);
            sbStartupScript.Append("var ");
            sbStartupScript.Append(this.ClientJQueryControlId);
            sbStartupScript.Append(" = jQuery('#");
            sbStartupScript.Append(this.ClientID);
            sbStartupScript.AppendLine("');");

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

            sbStartupScript.Append(this.ClientJQueryControlId);
            sbStartupScript.AppendLine(".datepicker(" + sbOptions.ToString() + ");");
            

            if (this.DisplayMode == DatePickerDisplayModes.Inline)
            {
                // *** Assign value to hidden form var on selection
                scriptProxy.RegisterStartupScript(this, typeof(WebResources), this.UniqueID + "OnSelect",
                    "function  " + this.ClientID + "OnSelect(dateStr)\r\n" +
                    "{\r\n" +
                    ((!string.IsNullOrEmpty(this.OnClientSelect)) ? this.OnClientSelect + "(dateStr);\r\n" : "") +
                    "jQuery('#" + this.ClientJQueryValueControlId + "')[0].value = dateStr;\r\n}\r\n", true);
            }

            sbStartupScript.AppendLine("} );");
            scriptProxy.RegisterStartupScript(this.Page, typeof(WebResources), "_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>");
            }

            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(), WebResources.IMAGE_DATEPICKER);
                    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
    }
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sike Mullivan
Software Developer (Senior)
United States United States
I am a Sr SharePoint Developer in Saint Louis, MO. I've been developing professionally for about four years now. For three years I worked for a Document Imaging company that developed applications for Scanning, Indexing, Migrating, and Searching SharePoint (MOSS, WSS). I'm now working on a team for a Cable company that customizes their internal and external SharePoint implementations.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 10 Jun 2009
Article Copyright 2009 by Sike Mullivan
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid