MVC Extension Library

If we are building a library of MVC extensions it would be nice to define a name to this library and organize all the extensions within that library. For example we are building a library, called Juime, which contains MVC extensions for the JQuery UI controls. We are grouping all these controls under Juime, so that user can easily access them. Below is how a user can call the Accordion control in our Juime library:

@Html.Juime().Accordion()

@Html.Juime().Tabs()
@Html.Juime().DatePicker()
…

This kind of grouping not only simplifies user access but also improves the branding. In this article I will walk through on how to achieve this kind of grouping.

As we are building a library, from an MVC perspective there will be only one extension, called Juime. All other controls are part of this extension. All of our controls needs to be created from this extension. In order to achieve this, I am using a factory pattern which creates all of our JQuery UI controls and this factory object will be returned from our Juime extension method. Here is the code of the Juime extension which creates and returns the factory:

    public static class JuimeExtension

    {
        public static ControlFactory Juime(this HtmlHelper helper)
        {
            return new ControlFactory(helper);
        }
    }

In the above code ControlFactory creates all the JQuery UI controls. Here is the code of the Control Factory

    public class ControlFactory

    {
        HtmlHelper helper;

        public ControlFactory(HtmlHelper helper)
        {
            this.helper = helper;
        }

        public AccordionBuilder Accordion()
        {
            return new AccordionBuilder();
        }

        public TabsBuilder Tabs()

        {
            return new TabsBuilder();
        }

    }

By using Factory pattern and extension method framework, I was able to group all our controls under our product name called Juime.