Location > Blog

JQueryDialog wrapper for C# ASP.NET

I wanted to integrate the JQuery UI Dialog with a ASP.NET project so I created a C# class to wrap the functionality and make it easy to configure. I ended up not using the Dialog in the end the class was never completed, but thought I would post it in case its is useful for someone.

JQuery UI Dialog Class

using System; 
using System.Text; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Collections; 
using System.ComponentModel; 
using System.Web.UI.Design; 
using System.Web.UI.Design.WebControls; 
using System.ComponentModel.Design; 
 
namespace Juna.Web.UI.WebControls 
    /// <summary> 
    ///  
    /// </summary> 
    public enum JQueryDialogPosition 
    { 
        /// <summary> 
        ///  
        /// </summary> 
        Center, 
        /// <summary> 
        ///  
        /// </summary> 
        Left, 
        /// <summary> 
        ///  
        /// </summary> 
        Top, 
        /// <summary> 
        ///  
        /// </summary> 
        Bottom, 
        ///<summary> 
        ///</summary> 
        Right 
    } 
 
    /// <summary> 
    ///  
    /// </summary> 
    [Serializable] 
    public class JQueryDialogButton 
    { 
        /// <summary> 
        ///  
        /// </summary> 
        public string Text { getset; } 
        /// <summary> 
        ///  
        /// </summary> 
        public string CssClass { getset; } 
        /// <summary> 
        ///  
        /// </summary> 
        public string OnClientClick { getset; } 
    } 
 
    /// <summary> 
    ///  
    /// </summary> 
    [Serializable] 
    public class JQueryDialogButtonCollection : CollectionBase 
    { 
        /// <summary> 
        /// Gets or sets the <see cref="Juna.Web.UI.WebControls.JQueryDialogButton"/> with the specified obj. 
        /// </summary> 
        /// <value></value> 
        public JQueryDialogButton this[object item] 
        { 
            get { return (JQueryDialogButton)List[IndexOf(item)]; } 
            set { List[IndexOf(item)] = value; } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        /// <param name="item"></param> 
        /// <returns></returns> 
        public int Add(JQueryDialogButton item) 
        { 
            return List.Add(item); 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        /// <param name="index"></param> 
        /// <param name="item"></param> 
        public void Insert(int index, JQueryDialogButton item) 
        { 
            List.Insert(index, item); 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        /// <param name="item"></param> 
        public void Remove(JQueryDialogButton item) 
        { 
            List.Remove(item); 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        /// <param name="item"></param> 
        /// <returns></returns> 
        public bool Contains(JQueryDialogButton item) 
        { 
            return List.Contains(item); 
        } 
 
        /// <summary> 
        /// Copies to. 
        /// </summary> 
        /// <param name="array">The array.</param> 
        /// <param name="index">The index.</param> 
        public void CopyTo(JQueryDialogButton[] array, int index) 
        { 
            List.CopyTo(array, index); 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        /// <param name="item"></param> 
        /// <returns></returns> 
        public int IndexOf(object item) 
        { 
            if (item is int
            { 
                return (int)item; 
            } 
 
            if (item is string
            { 
                for (int i = 0; i < List.Count; i++) 
                { 
                    if (((JQueryDialogButton)List[i]).Text == item.ToString()) 
                    { 
                        return i; 
                    } 
                } 
                return -1; 
            } 
            throw new ArgumentException("Only a string or an integer is permitted for the indexer."); 
        } 
    } 
 
    /// <summary> 
    ///  
    /// </summary> 
 
    [ParseChildren(true)] 
    [Designer(typeof(JQueryDialogControlDesigner))] 
    public class JQueryDialog : CompositeControl 
    { 
        private bool? _open; 
        private bool? _enable; 
        private bool _moveToTop; 
 
        /// <summary> 
        ///  
        /// </summary> 
        public JQueryDialog() 
        { 
            Style[HtmlTextWriterStyle.Display] = "none"
        } 
 
        /// <summary> 
        /// Gets the jQuery refernence to the opbect i.e. $('#Dialog1') 
        /// </summary> 
        [Browsable(false)] 
        public string ClientReference 
        { 
            get 
            { 
                return string.Format("$('#{0}')", ClientID); 
            } 
        } 
 
        /// <summary> 
        /// Specifies which buttons should be displayed on the dialog 
        /// </summary> 
        [PersistenceMode(PersistenceMode.InnerProperty)] 
        public JQueryDialogButtonCollection Buttons 
        { 
            get 
            { 
                if (ViewState["Buttons"] == null
                { 
                    ViewState["Buttons"] = new JQueryDialogButtonCollection(); 
                } 
                return (JQueryDialogButtonCollection)ViewState["Buttons"]; 
            } 
        } 
 
        /// <summary> 
        /// When autoOpen is true the dialog will open automatically. If  
        /// false it will stay hidden until Open is called. 
        /// </summary> 
        [DefaultValue(false)] 
        public bool AutoOpen 
        { 
            get 
            { 
                if (ViewState["AutoOpen"] == null
                { 
                    return false
                } 
                return (bool)ViewState["AutoOpen"]; 
            } 
            set 
            { 
                ViewState["AutoOpen"] = value; 
                if (value) 
                { 
                    ViewState["IsOpen"] = false
                } 
            } 
        } 
 
        /// <summary> 
        /// Specifies whether the dialog should close when it has  
        /// focus and the user presses the esacpe (ESC) key 
        /// </summary> 
        [DefaultValue(true)] 
        public bool CloseOnEscape 
        { 
            get 
            { 
                if (ViewState["CloseOnEscape"] == null
                { 
                    return true
                } 
                return (bool)ViewState["CloseOnEscape"]; 
            } 
            set 
            { 
                ViewState["CloseOnEscape"] = value; 
            } 
        } 
 
        /// <summary> 
        /// Specifies whether the dialog will stack on top of other dialogs. This  
        /// will cause the dialog to move to the front of other dialogs when it gains focus. 
        /// </summary> 
        [DefaultValue(true)] 
        public bool Stack 
        { 
            get 
            { 
                if (ViewState["Stack"] == null
                { 
                    return true
                } 
                return (bool)ViewState["Stack"]; 
            } 
            set 
            { 
                ViewState["Stack"] = value; 
            } 
        } 
 
        /// <summary> 
        /// If set to true, the dialog will be resizeable 
        /// </summary> 
        [DefaultValue(true)] 
        public bool Resizable 
        { 
            get 
            { 
                if (ViewState["Resizable"] == null
                { 
                    return true
                } 
                return (bool)ViewState["Resizable"]; 
            } 
            set 
            { 
                ViewState["Resizable"] = value; 
            } 
        } 
 
        /// <summary> 
        /// If set to true, the dialog will be draggable 
        /// </summary> 
        [DefaultValue(true)] 
        public bool Draggable 
        { 
            get 
            { 
                if (ViewState["Draggable"] == null
                { 
                    return true
                } 
                return (bool)ViewState["Draggable"]; 
            } 
            set 
            { 
                ViewState["Draggable"] = value; 
            } 
        } 
 
        /// <summary> 
        /// The specified class name(s) will be added to the dialog, for additional theming 
        /// </summary> 
        public string DialogCssClass 
        { 
            get 
            { 
                if (ViewState["DialogCssClass"] == null
                { 
                    return string.Empty; 
                } 
                return (string)ViewState["DialogCssClass"]; 
            } 
            set 
            { 
                ViewState["DialogCssClass"] = value; 
            } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        [Browsable(false)] 
        public bool IsOpen 
        { 
            get 
            { 
                if (ViewState["IsOpen"] == null
                { 
                    return false
                } 
                return (bool)ViewState["IsOpen"]; 
            } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        [Browsable(false)] 
        public new bool IsEnabled 
        { 
            get 
            { 
                if (ViewState["IsEnabled"] == null
                { 
                    return true
                } 
                return (bool)ViewState["IsEnabled"]; 
            } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        [DefaultValue(false)] 
        public bool Modal 
        { 
            get 
            { 
                if (ViewState["Modal"] == null
                { 
                    return false
                } 
                return (bool)ViewState["Modal"]; 
            } 
            set { ViewState["Modal"] = value; } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        [DefaultValue(JQueryDialogPosition.Center)] 
        public JQueryDialogPosition Position 
        { 
            get 
            { 
                if (ViewState["Position"] == null
                { 
                    return JQueryDialogPosition.Center; 
                } 
                return (JQueryDialogPosition)ViewState["Position"]; 
            } 
            set { ViewState["Position"] = value; } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        [DefaultValue(JQueryEffect.Fade)] 
        public JQueryEffect Hide 
        { 
            get 
            { 
                if (ViewState["Hide"] == null
                { 
                    return JQueryEffect.Fade; 
                } 
                return (JQueryEffect)ViewState["Hide"]; 
            } 
            set { ViewState["Hide"] = value; } 
        } 
 
        /// <summary> 
        /// The weight of the dialog, needs to be in pixels. 
        /// </summary> 
        public override Unit Width 
        { 
            get 
            { 
                return base.Width; 
            } 
            set 
            { 
                if (value.Type != UnitType.Pixel) 
                { 
                    throw new ArgumentException("Width UnitType must be UnitType.Pixel"); 
                } 
                if (MinWidth.IsEmpty) 
                { 
                    MinWidth = value; 
                } 
                base.Width = value; 
            } 
        } 
 
        /// <summary> 
        /// The height of the dialog, needs to be in pixels. 
        /// </summary> 
        public override Unit Height 
        { 
            get 
            { 
                return base.Height; 
            } 
            set 
            { 
                if (value.Type != UnitType.Pixel) 
                { 
                    throw new ArgumentException("Width UnitType must be UnitType.Pixel"); 
                } 
 
                if (MinHeight.IsEmpty) 
                { 
                    MinHeight = value; 
                } 
                base.Height = value; 
            } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        public Unit MinWidth 
        { 
            get 
            { 
                if (ViewState["MinWidth"] == null
                { 
                    return Unit.Empty; 
                } 
                return (Unit)ViewState["MinWidth"]; 
            } 
            set 
            { 
                if (value.Type != UnitType.Pixel) 
                { 
                    throw new ArgumentException("MinWidth UnitType must be UnitType.Pixel"); 
                } 
                ViewState["MinWidth"] = value; 
            } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        public Unit MaxWidth 
        { 
            get 
            { 
                if (ViewState["MaxWidth"] == null
                { 
                    return Unit.Empty; 
                } 
                return (Unit)ViewState["MaxWidth"]; 
            } 
            set 
            { 
                if (value.Type != UnitType.Pixel) 
                { 
                    throw new ArgumentException("MaxWidth UnitType must be UnitType.Pixel"); 
                } 
                ViewState["MaxWidth"] = value; 
            } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        public Unit MinHeight 
        { 
            get 
            { 
                if (ViewState["MinHeight"] == null
                { 
                    return Unit.Empty; 
                } 
                return (Unit)ViewState["MinHeight"]; 
            } 
            set 
            { 
                if (value.Type != UnitType.Pixel) 
                { 
                    throw new ArgumentException("MinHeight UnitType must be UnitType.Pixel"); 
                } 
                ViewState["MinHeight"] = value; 
            } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        public Unit MaxHeight 
        { 
            get 
            { 
                if (ViewState["MaxHeight"] == null
                { 
                    return Unit.Empty; 
                } 
                return (Unit)ViewState["MaxHeight"]; 
            } 
            set 
            { 
                if (value.Type != UnitType.Pixel) 
                { 
                    throw new ArgumentException("MaxHeight UnitType must be UnitType.Pixel"); 
                } 
                ViewState["MaxHeight"] = value; 
            } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        public override ControlCollection Controls 
        { 
            get 
            { 
                EnsureChildControls(); 
 
                return base.Controls; 
            } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        [Browsable(false)] 
        [PersistenceMode(PersistenceMode.InnerProperty)] 
        [DefaultValue(null)] 
        [TemplateInstance(TemplateInstance.Single)] 
        public virtual ITemplate ContentTemplate { getset; } 
 
        /// <summary> 
        ///  
        /// </summary> 
        public string ContentControl 
        { 
            get 
            { 
                if (ViewState["ContentControl"] == null
                { 
                    return string.Empty; 
                } 
                return (string)ViewState["ContentControl"]; 
            } 
            set 
            { 
                ViewState["ContentControl"] = value; 
            } 
        } 
 
        protected override void CreateChildControls() 
        { 
            if (ContentTemplate != null
            { 
                ContentTemplate.InstantiateIn(this); 
            } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        /// <param name="argument"></param> 
        /// <returns></returns> 
        public string GetEventReference(string argument) 
        { 
            if (string.IsNullOrEmpty(argument)) 
            { 
                return string.Format("{0}.dialog()", ClientReference); 
            } 
            return string.Format("{0}.dialog('{1}')", ClientReference, argument.ToLower()); 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        /// <param name="e"></param> 
        protected override void OnInit(EventArgs e) 
        { 
            EnsureChildControls(); 
            base.OnInit(e); 
        } 
 
        protected override void OnLoad(EventArgs e) 
        { 
            //Stops a javascript error in firefox 
            if (Page.Request.Browser.Browser == "Firefox"
            { 
                Page.Response.Cache.SetNoStore(); 
            } 
            if (!string.IsNullOrEmpty(ContentControl)) 
            { 
                Control control = Page.LoadControl(ContentControl); 
                control.ID = ID + "_Content"
                if (control is IJQueryDialogControl) 
                { 
                    ((IJQueryDialogControl)control).Dialog = this
                } 
                Controls.Add(control); 
            } 
            base.OnLoad(e); 
        } 
 
        protected override void OnPreRender(EventArgs e) 
        { 
            EnsureChildControls(); 
            ScriptRegistrar.RegisterJQueryUIScript(Page, JQueryUI.Dialog); 
            ScriptRegistrar.RegisterJQueryEffectScript(Page, Hide); 
            var options = new StringBuilder(); 
            var buttonCss = new StringBuilder(); 
            options.AppendFormat("{{hide:'{0}'", Hide.ToString().ToLower()); 
 
            if (!Width.IsEmpty) 
            { 
                options.AppendFormat(",width:{0}", Width.Value); 
            } 
            if (!MinWidth.IsEmpty) 
            { 
                options.AppendFormat(",minWidth:{0}", MinWidth.Value); 
            } 
            if (!MaxWidth.IsEmpty) 
            { 
                options.AppendFormat(",maxWidth:{0}", MaxWidth.Value); 
            } 
            if (!Height.IsEmpty) 
            { 
                options.AppendFormat(",height:{0}", Height.Value); 
            } 
            if (!MinHeight.IsEmpty) 
            { 
                options.AppendFormat(",minHeight:{0}", MinHeight.Value); 
            } 
            if (!MaxHeight.IsEmpty) 
            { 
                options.AppendFormat(",maxHeight:{0}", MaxHeight.Value); 
            } 
            if (!AutoOpen) 
            { 
                options.Append(",autoOpen:false"); 
            } 
            if (!CloseOnEscape) 
            { 
                options.Append(",closeOnEscape:false"); 
            } 
            if (!Stack) 
            { 
                options.Append(",stack:false"); 
            } 
            if (Modal) 
            { 
                options.Append(",modal:true"); 
            } 
            if (Position != JQueryDialogPosition.Center) 
            { 
                options.AppendFormat(",position:'{0}'", Position.ToString().ToLower()); 
            } 
            if (Draggable) 
            { 
                ScriptRegistrar.RegisterJQueryUIScript(Page, JQueryUI.Draggable); 
            } 
            else 
            { 
                options.Append(",draggable:false"); 
            } 
            if (Resizable) 
            { 
                ScriptRegistrar.RegisterJQueryUIScript(Page, JQueryUI.Resizable); 
            } 
            else 
            { 
                options.Append(",resizable:false"); 
            } 
            if (!string.IsNullOrEmpty(DialogCssClass)) 
            { 
                options.AppendFormat(",dialogClass:'{0}'", DialogCssClass); 
            } 
            if (Buttons.Count > 0) 
            { 
                options.Append(",buttons:{"); 
                var buttons = new StringBuilder(); 
                string seperator = string.Empty; 
                for (int i = Buttons.Count - 1; i >= 0; i--) 
                { 
                    JQueryDialogButton button = Buttons[i]; 
                    if (!string.IsNullOrEmpty(button.Text)) 
                    { 
                        options.AppendFormat("{0}'{1}':function(){{{2};}}", seperator, button.Text.Replace("'""\'"), button.OnClientClick); 
                        if (!string.IsNullOrEmpty(Buttons[i].CssClass)) 
                        { 
                            buttonCss.AppendFormat("$({0}_Buttons[{1}]).addClass('{2}');\n", ClientID, Buttons.Count - 1 - i, button.CssClass); 
                        } 
                        seperator = ","
                    } 
                } 
                //The 1.7.2 version of JQuery Dialog does not allow you to 
                //set the css class of a button you need to use javascript to  
                //do so after 
                if (buttonCss.Length > 0) 
                { 
                    buttonCss.Insert(0, string.Format("var {0}_Buttons={0}_Dialog.next().children(':button');\n", ClientID)); 
                } 
                options.Append(buttons); 
                options.Append("}"); 
            } 
            options.Append("}"); 
            ScriptManager.RegisterStartupScript(Page, typeof(JQueryDialog), string.Format("JQueryDialog_{0}", ClientID), string.Format("var {0}_Dialog = {1}.dialog({2});\n{3}", ClientID, ClientReference, options, buttonCss), true); 
            //ScriptManager.RegisterStartupScript(Page, typeof(JQueryDialog), string.Format("JQueryDialog_{0}", ClientID), string.Format("var {0}_Dialog = {1}.dialog({2});\n{0}_Dialog.parent().appendTo($(\"form:first\"));\n{3}", ClientID, ClientReference, options, buttonCss), true); 
            //ScriptManager.RegisterStartupScript(Page, typeof(JQueryDialog), string.Format("JQueryDialog_{0}", ClientID), string.Format("$('#{0}').before('<div id=\"{0}_Marker\"/>');\nvar {0}_Dialog = {1}.dialog({2});\n{0}_Dialog.parent().insertAfter('#{0}_Marker');\n{3}", ClientID, ClientReference, options, buttonCss), true); 
            if (_open.HasValue && _open.Value) 
            { 
                RegisterClientMethod("open"); 
            } 
            if (_enable.HasValue && _enable.Value) 
            { 
                RegisterClientMethod("enable"); 
            } 
            if (_enable.HasValue && !_enable.Value) 
            { 
                RegisterClientMethod("disable"); 
            } 
            if (_moveToTop) 
            { 
                RegisterClientMethod("moveToTop"); 
            } 
            if (_open.HasValue && !_open.Value) 
            { 
                RegisterClientMethod("close"); 
            } 
            base.OnPreRender(e); 
        } 
 
        private void RegisterClientMethod(string method) 
        { 
            if (!string.IsNullOrEmpty(method)) 
            { 
                ScriptManager.RegisterStartupScript(Page, typeof(JQueryDialog), string.Format("JQueryDialog_{0}_{1}", ClientID, method), string.Format("{0}.dialog('{1}');\n", ClientReference, method.ToLower()), true); 
            } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        public void Open() 
        { 
            ViewState["IsOpen"] = true
            _open = true
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        public void Enable() 
        { 
            ViewState["IsEnabled"] = true
            _enable = true
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        public void Disable() 
        { 
            ViewState["IsEnabled"] = false
            _enable = false
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        public void Close() 
        { 
            ViewState["IsOpen"] = false
            _open = false
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        public void MoveToTop() 
        { 
            _moveToTop = true
        } 
 
        protected override HtmlTextWriterTag TagKey 
        { 
            get 
            { 
                return HtmlTextWriterTag.Div; 
            } 
        } 
    } 
 
    /// <summary> 
    ///  
    /// </summary> 
    public class JQueryDialogControlDesigner : CompositeControlDesigner 
    { 
        private JQueryDialog _dialog; 
 
        public override void Initialize(IComponent component) 
        { 
            base.Initialize(component); 
            _dialog = (JQueryDialog)component; 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        public override bool AllowResize 
        { 
            get { return false; } 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        protected override void CreateChildControls() 
        { 
            base.CreateChildControls(); 
 
            _dialog.Attributes[DesignerRegion.DesignerRegionAttributeName] = "0"
        } 
 
 
        public override string GetDesignTimeHtml(DesignerRegionCollection regions) 
        { 
            regions.Add(new EditableDesignerRegion(this"Content"false)); 
 
            return base.GetDesignTimeHtml(); 
        } 
 
 
        /// <summary> 
        ///  
        /// </summary> 
        /// <param name="region"></param> 
        /// <returns></returns> 
        public override string GetEditableDesignerRegionContent(EditableDesignerRegion region) 
        { 
            // Get a reference to the designer host 
            IDesignerHost host = (IDesignerHost)Component.Site.GetService(typeof(IDesignerHost)); 
            if (host != null
            { 
                ITemplate template = null
 
                if (region.Name == "Content"
                { 
                    template = _dialog.ContentTemplate; 
                } 
 
                if (template != null
                { 
                    return ControlPersister.PersistTemplate(template, host); 
                } 
            } 
 
            return string.Empty; 
        } 
 
 
        /// <summary> 
        ///  
        /// </summary> 
        /// <param name="region"></param> 
        /// <param name="content"></param> 
        public override void SetEditableDesignerRegionContent(EditableDesignerRegion region, string content) 
        { 
            if (content == null
            { 
                return
            } 
 
            // Get a reference to the designer host 
            IDesignerHost host = (IDesignerHost)Component.Site.GetService(typeof(IDesignerHost)); 
            if (host != null
            { 
                // Create a template from the content string 
                ITemplate template = ControlParser.ParseTemplate(host, content); 
 
                if (template != null
                { 
                    if (region.Name == "Content"
                    { 
                        _dialog.ContentTemplate = template; 
                    } 
                } 
            } 
        } 
    } 
 

Sunday June 13 2010 12:26 a.m.

Title
Name
Email
 
Url
Comments  
Enter code shown