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
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.Linq;
using System.Text;
using System.Security.Permissions;
using Mullivan.Web.UI.WebControls;
using System.Web.UI.Design;
using System.Globalization;
using System.Drawing;
using System.Diagnostics;
using System.ComponentModel.Design;
using System.ComponentModel;
using System.Web.UI;
using System.Drawing.Design;
using System.Web.UI.WebControls;

namespace Mullivan.Web.UI.Design.WebControls
{

    [SecurityPermission(SecurityAction.Demand, Flags = SecurityPermissionFlag.UnmanagedCode)]
    public class JQueryAccordionDesigner : System.Web.UI.Design.ControlDesigner
    {
        // Fields
        private const string AddTabName = "#addtab";
        private const string ClickRegionHtml = "<div style='padding:1px;color:{3}; background-color:{4};{5};height:20px;' {0}='{1}'>{2}</div>";
        private const string DesignTimeHtml = @"
<div style=""width:{1};height:{2}"">
    {0}
</div>";
        private const string SectionEditorHtml = @"
    <div style='clear:both;overflow: auto;text-align:left;border-left:thin white outset; border-bottom:thin white outset; border-right:thin white outset;background-color:{1};height:{4}' {2}='{3}'>
        {0}
    </div>
";
        private const string EmptyDesignTimeHtml = @"
<div style=""padding:2px;width:{2};height:{3}"">
    <div style='color:{0}; background-color:{1};border-left:thin white outset; border-right:thin white outset;height:20px;text-align:left;'>
        Add New Section
    </div>
</div>";
        private JQueryAccordion _accordion = null;
        // Methods
        public override string GetDesignTimeHtml(DesignerRegionCollection regions)
        {
            if (regions == null)
            {
                throw new ArgumentNullException("regions");
            }

            if (this.Accordion.Sections.Count > 0
                && (this.Accordion.ActiveSectionIndex < 0
                || this.Accordion.ActiveSectionIndex >= this.Accordion.Sections.Count))
            {
                this.Accordion.ActiveSectionIndex = 0;
            }

            if (this.Accordion.ActiveSection != null)
            {
                StringBuilder sbSections = new StringBuilder();

                foreach (JQueryAccordionSection panel in this.Accordion.Sections)
                {
                    bool active = panel.IsActive;
                    int index = panel.Position;
                    

                    DesignerRegion dr = new DesignerRegion(this,
                             string.Format(CultureInfo.InvariantCulture, "t{0}", new object[] { index }));
                    dr.Selectable = !active;
                    dr.Selected = dr.Highlight = active;
                    int editIndex = regions.Add(dr);

                    string strHeader = panel.Name;

                    sbSections.AppendFormat(CultureInfo.InvariantCulture,
                        ClickRegionHtml,
                        new object[] { 
                            DesignerRegion.DesignerRegionAttributeName, 
                            editIndex,
                            strHeader, 
                            ColorTranslator.ToHtml(SystemColors.ControlText), 
                            active ?  "transparent" : ColorTranslator.ToHtml(SystemColors.Window), 
                            active ? "border-top:thin white outset;border-left:thin white outset;border-right:thin white outset;" : "" });

                    if (active)
                    {
                        string tabContent = this.GetTabContent(this.Accordion.ActiveSection);

                        EditableDesignerRegion edr = new EditableDesignerRegion(this, string.Format(CultureInfo.InvariantCulture, "c"));
                        editIndex = regions.Add(edr);
                        sbSections.Append(string.Format(CultureInfo.InvariantCulture
                            , SectionEditorHtml
                            , new object[] { 
                                tabContent, 
                            ColorTranslator.ToHtml(SystemColors.Window),
                            DesignerRegion.DesignerRegionAttributeName, 
                            editIndex,
                            this.GetEditorHeight().ToString()}
                            ));
                    }
                }
                string designHtml = string.Format(DesignTimeHtml, sbSections.ToString(), this.Accordion.Width, this.Accordion.Height);
                Trace.Write(designHtml);
                return designHtml;
            }

            StringBuilder sbEmpty = new StringBuilder(0x200);
            sbEmpty.AppendFormat(CultureInfo.InvariantCulture,
                EmptyDesignTimeHtml,
                new object[] { 
                            ColorTranslator.ToHtml(SystemColors.ControlText),
                            ColorTranslator.ToHtml(SystemColors.Control), 
                            this.Accordion.Width, 
                            this.Accordion.Height });

            DesignerRegion region3 = new DesignerRegion(this, AddTabName);
            regions.Add(region3);
            return sbEmpty.ToString();
        }

        private Unit GetEditorHeight()
        {
            int editorHeight = (int)(this.Accordion.Height.Value - (22 * this.Accordion.Sections.Count));
            if (editorHeight < 0)
                editorHeight = 0;
            return editorHeight;
        }

        public override string GetEditableDesignerRegionContent(EditableDesignerRegion region)
        {
            if (region == null)
            {
                throw new ArgumentNullException("region");
            }

            JQueryAccordionSection tab = this._accordion.ActiveSection;
            return this.GetTabContent(tab);
        }

        private string GetTabContent(JQueryAccordionSection tab)
        {
            if (tab != null && tab.ContentTemplate != null)
                return this.GetTemplateContent(tab.ContentTemplate, "_content");

            return "";
        }

        private string GetTemplateContent(ITemplate template, string id)
        {
            DesignerPanel container = new DesignerPanel();
            container.ID = id;
            container.Height = this.GetEditorHeight();
            template.InstantiateIn(container);
            IDesignerHost service = (IDesignerHost)this.GetService(typeof(IDesignerHost));
            StringBuilder builder = new StringBuilder(0x400);
            foreach (Control control in container.Controls)
            {
                builder.Append(ControlPersister.PersistControl(control, service));
            }
            return builder.ToString();
        }

        public override void Initialize(IComponent component)
        {
            this.VerifyInitializeArgument(component, typeof(JQueryAccordion));
            this._accordion = (JQueryAccordion)component;
            base.Initialize(component);
            base.SetViewFlags(ViewFlags.TemplateEditing, true);
        }

        internal void VerifyInitializeArgument(IComponent component, Type expectedType)
        {
            if (!expectedType.IsInstanceOfType(component))
            {
                throw new ArgumentException(string.Format(CultureInfo.CurrentCulture, string.Format("ControlDesigner Argument Must Be Of Type {0}"), new object[] { expectedType.FullName }), "component");
            }
        }

        public void StartSectionCollectionEditor()
        {
            IDesignerHost service = (IDesignerHost)this.GetService(typeof(IDesignerHost));
            PropertyDescriptor propDesc = TypeDescriptor.GetProperties(base.Component)["Sections"];
            object val = propDesc.GetValue(_accordion);

            using (DesignerTransaction transaction = service.CreateTransaction("Start Section Collection Editor"))
            {
                UITypeEditor editor = (UITypeEditor)propDesc.GetEditor(typeof(UITypeEditor));

                JQueryAccordionSectionCollection result = (JQueryAccordionSectionCollection)editor.EditValue(new TypeDescriptorContext(service, propDesc, base.Component),
                    new WindowsFormsEditorServiceHelper(this), val);
                if (result != null)
                {
                    Trace.WriteLine("Section count: " + result.Count.ToString());
                    transaction.Commit();
                }
            }
        }

        private void OnAddTab()
        {
            IDesignerHost host = (IDesignerHost)this.GetService(typeof(IDesignerHost));
            if (host != null)
            {
                JQueryAccordion sectionContainer = this.Accordion; 
                using (DesignerTransaction transaction = host.CreateTransaction("Add New Section"))
                {
                    JQueryAccordionSection child = (JQueryAccordionSection)host.CreateComponent(typeof(JQueryAccordionSection));
                    if (child != null)
                    {
                        child.Name = child.ID;
                        IComponentChangeService service = (IComponentChangeService)this.GetService(typeof(IComponentChangeService));
                        try
                        {
                            service.OnComponentChanging(sectionContainer, TypeDescriptor.GetProperties(sectionContainer)["Sections"]);
                            sectionContainer.Sections.Add(child);
                        }
                        finally
                        {
                            service.OnComponentChanged(sectionContainer, TypeDescriptor.GetProperties(sectionContainer)["Sections"], sectionContainer.Sections, sectionContainer.Sections);
                        }
                        TypeDescriptor.GetProperties(sectionContainer)["ActiveSection"].SetValue(sectionContainer, child);
                        this.CurrentTabIndex = sectionContainer.Sections.Count - 1;
                    }
                    transaction.Commit();
                }
            }
        }

        protected override void OnClick(DesignerRegionMouseEventArgs e)
        {
            if ((e.Region != null) && e.Region.Name.StartsWith("t", StringComparison.Ordinal))
            {
                this.CurrentTabIndex = int.Parse(e.Region.Name.Substring(1));
            }
            else if ((e.Region != null) && (e.Region.Name == AddTabName))
            {
                this.OnAddTab();
            }
            base.OnClick(e);
        }

        private void OnRemoveTab()
        {
            JQueryAccordion sectionContainer = this.Accordion;
            if (sectionContainer.ActiveSection != null)
            {
                int ActiveSectionIndex = sectionContainer.ActiveSectionIndex;
                IDesignerHost host = (IDesignerHost)this.GetService(typeof(IDesignerHost));
                if (host != null)
                {
                    using (DesignerTransaction transaction = host.CreateTransaction("Remove Section"))
                    {
                        JQueryAccordionSection ActiveSection = sectionContainer.ActiveSection;
                        IComponentChangeService service = (IComponentChangeService)this.GetService(typeof(IComponentChangeService));
                        try
                        {
                            service.OnComponentChanging(sectionContainer, TypeDescriptor.GetProperties(sectionContainer)["Sections"]);
                            sectionContainer.Sections.Remove(ActiveSection);
                        }
                        finally
                        {
                            service.OnComponentChanged(sectionContainer, TypeDescriptor.GetProperties(sectionContainer)["Sections"], sectionContainer.Sections, sectionContainer.Sections);
                        }
                        ActiveSection.Dispose();
                        if (sectionContainer.Sections.Count > 0)
                        {
                            TypeDescriptor.GetProperties(sectionContainer)["ActiveSectionIndex"].SetValue(sectionContainer, Math.Min(ActiveSectionIndex, sectionContainer.Sections.Count - 1));
                        }
                        this.UpdateDesignTimeHtml();
                        transaction.Commit();
                    }
                }
            }
        }

        private static void PersistTemplate(JQueryAccordionSection panel, IDesignerHost host, ITemplate template, string propertyName)
        {

            PropertyDescriptor descriptor = TypeDescriptor.GetProperties(panel)[propertyName];
            using (DesignerTransaction transaction = host.CreateTransaction("Set Editable Designer Region Content"))
            {
                descriptor.SetValue(panel, template);
                transaction.Commit();
            }
        }

        private static void PersistTemplateContent(JQueryAccordionSection panel, IDesignerHost host, string content, string propertyName)
        {
            ITemplate template = ControlParser.ParseTemplate(host, content);
            PersistTemplate(panel, host, template, propertyName);
        }

        public override void SetEditableDesignerRegionContent(EditableDesignerRegion region, string content)
        {
            if (region == null)
            {
                throw new ArgumentNullException("region");
            }

            JQueryAccordionSection panel = this._accordion.ActiveSection;
            if (panel == null)
                return;

            IDesignerHost service = (IDesignerHost)this.GetService(typeof(IDesignerHost));
            PersistTemplateContent(panel, service, content, "ContentTemplate");
        }

        // Properties
        public override DesignerActionListCollection ActionLists
        {
            get
            {
                DesignerActionListCollection lists = new DesignerActionListCollection();
                lists.AddRange(base.ActionLists);
                lists.Add(new JQueryAccordionDesignerActionList(this));
                return lists;
            }
        }

        private int CurrentTabIndex
        {
            set
            {
                JQueryAccordion sectionContainer = this.Accordion;
                if (value > -1 && value < sectionContainer.Sections.Count)
                {
                    IDesignerHost host = (IDesignerHost)this.GetService(typeof(IDesignerHost));
                    using (DesignerTransaction transaction = host.CreateTransaction("Change Index"))
                    {
                        TypeDescriptor.GetProperties(sectionContainer)["ActiveSectionIndex"].SetValue(sectionContainer, value);
                        transaction.Commit();
                    }
                    this.UpdateDesignTimeHtml();
                }
                else
                    throw new ArgumentException(string.Format(CultureInfo.InvariantCulture, "Can't find child section '{0}'", new object[] { value }));

            }
        }

        private JQueryAccordion Accordion
        {
            get
            {
                return _accordion;
            }
        }

        protected override bool UsePreviewControl
        {
            get
            {
                return true;
            }
        }

        // Nested Types
        internal class DesignerPanel : System.Web.UI.WebControls.Panel, INamingContainer
        {
        }

        private class JQueryAccordionDesignerActionList : DesignerActionList
        {
            // Fields
            private JQueryAccordionDesigner _designer;

            public JQueryAccordionDesigner Designer
            {
                get
                {
                    return _designer;
                }
            }

            // Methods
            public JQueryAccordionDesignerActionList(JQueryAccordionDesigner designer)
                : base(designer.Component)
            {
                this._designer = designer;
            }

            public override DesignerActionItemCollection GetSortedActionItems()
            {
                DesignerActionItemCollection items = new DesignerActionItemCollection();

                DesignerActionMethodItem item = new DesignerActionMethodItem(this, "StartSectionCollectionEditor", "Add/Remove Sections", true);
                items.Add(item);
                return items;
            }

            public void StartSectionCollectionEditor()
            {
                try
                {
                    this._designer.StartSectionCollectionEditor();
                }
                catch (Exception ex)
                {
                    System.Windows.Forms.MessageBox.Show(ex.ToString(), "Error", System.Windows.Forms.MessageBoxButtons.OK, System.Windows.Forms.MessageBoxIcon.Error);
                }
            }

            public void OnAddTab()
            {
                try
                {
                    this._designer.OnAddTab();
                }
                catch (Exception ex)
                {
                    Trace.WriteLine(ex.ToString());
                    throw;
                }
            }

            public void OnRemoveTab()
            {
                try
                {
                    this._designer.OnRemoveTab();
                }
                catch (Exception ex)
                {
                    Trace.WriteLine(ex.ToString());
                    throw;
                }
            }
        }
    }
}

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 | Mobile
Web02 | 2.8.140827.1 | Last Updated 10 Jun 2009
Article Copyright 2009 by Sike Mullivan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid