Web Control Extension Methods like jQuery CSS Utility Methods

Comments (1) | Share

I like these jQuery methods a lot: addClass, removeClass, toggleClass.
I wish ASP.NET Web Controls have similar functionality out of the box like jQuery for manipulating CSS class like below.

// You MUST include your own namespace here
// in order for the Extension Methods to be visible in your code.
using YourProjectNamespace.ExtensionMethods;

textBoxControl.AddCssClass("enable").RemoveCssClass("disabled");
textBoxControl.ToggleCssClass("enable disable");

So I created extension methods for the WebControl class.  Just make sure you change it to your own project namespace and import it so you don't get a compiler error.

DISCLAIMER:
I haven't tested this code thoroughly since I just wrote it a few minutes ago.
So you are on your own if it is buggy :-)

using System;
using System.Text.RegularExpressions;
using System.Linq;
using System.Web.UI.WebControls;

namespace YourProjectNamespace.ExtensionMethods
{
    public static class WebControlExtensions
    {
        private static Regex re = new Regex("\\S+", RegexOptions.Singleline | RegexOptions.Compiled);

        /// <summary>Regex matches non-whitespace characters.</summary>
        /// <param name="value">string value to match</param>
        /// <returns>returns regex match object if it has matching groups, null if none matches.</returns>
        private static Match GetMatch(string value)
        {
            if (string.IsNullOrEmpty(value))
                return null;
            Match ma = re.Match(value);
            if (ma == null || ma.Groups.Count == 0)
                return null;
            return ma;
        }

        /// <summary>Returns CSS class names as an array of strings.</summary>
        /// <param name="ma">regex match</param>
        /// <returns>returns an array of CSS class name strings</returns>
        private static string[] GetClassNames(Match ma)
        {
            return (from Group g in ma.Groups
                    where g.Success
                    select g.Value).ToArray();
        }

        /// <summary>Adds the CSS class names to the web control.</summary>
        /// <param name="c">web control</param>
        /// <param name="value">css class names to add</param>
        /// <returns>returns the control itself so method calls can be chained</returns>
        public static WebControl AddCssClass(this WebControl c, string value)
        {
            Match ma = GetMatch(value);
            if (ma == null)
                return c;

            string[] classNames = GetClassNames(ma);
            string elemClassName = !string.IsNullOrEmpty(c.CssClass)
                                        ? String.Format(" {0} ", c.CssClass)
                                        : " ";

            foreach (var className in classNames)
            {
                if (elemClassName.IndexOf(" " + className + " ") < 0)
                {
                    elemClassName += className + " ";
                }
            }

            c.CssClass = elemClassName.Trim();

            return c;
        }

        /// <summary>Removes the CSS class names of the web control.</summary>
        /// <param name="c">web control</param>
        /// <param name="value">css class names to remove</param>
        /// <returns>returns the control itself so method calls can be chained</returns>
        public static WebControl RemoveCssClass(this WebControl c, string value)
        {
            Match ma = GetMatch(value);
            if (ma == null)
                return c;

            string[] classNames = GetClassNames(ma);
            string elemClassName = !string.IsNullOrEmpty(c.CssClass)
                                        ? String.Format(" {0} ", c.CssClass)
                                        : " ";

            foreach (var className in classNames)
            {
                string searchString = " " + className + " ";
                if (elemClassName.IndexOf(searchString) >= 0)
                {
                    elemClassName = elemClassName.Replace(searchString, " ");
                }
            }

            c.CssClass = elemClassName.Trim();

            return c;
        }

        /// <summary>Toggles the CSS class names of the web control.</summary>
        /// <param name="c">web control</param>
        /// <param name="value">css class names to toggle</param>
        public static void ToggleCssClass(this WebControl c, string value)
        {
            string elemCssClass = !string.IsNullOrEmpty(c.CssClass)
                                    ? String.Format(" {0} ", c.CssClass)
                                    : " ";

            Match ma = re.Match(value);
            var classNames = GetClassNames(ma);
            foreach (var className in classNames)
            {
                string searchString = " " + className + " ";
                if (elemCssClass.IndexOf(searchString) < 0)
                {
                    elemCssClass += className + " ";
                }
                else
                {
                    elemCssClass = elemCssClass.Replace(searchString, " ");
                }
            }

            c.CssClass = elemCssClass.Trim();
        }
    }
}