I was toying with an idea when I started the VS template but never got around to it…How do I create reusable UI components for a ASP.Net MVC website? What I mean is most websites consists of numerous elements, for example the sidebar widgets on this blog:

If you look closely the Recent Posts and Tag Cloud widget uses the exact same Html mark-up, only their contents differ. Wouldn’t it be great if I could write a simple ASP.Net MVC extension that would create the basic mark-up for the widget and then I only need to add the content?

The good news is, I’ve done it for the MVC Themed Web App Visual Studio Project template sidebar components. As you can see in the following screenshot, the standard sidebar consists of 3 UI elements, a Simple Block,  Notice and a Sidebar Inner Block:

The html for these 3 components looks like:

<div id="sidebar">
    <div class="block">
        <h3>
            Simple Block</h3>
        <div class="content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    <div class="block notice">
        <h4>
            Notice Title</h4>
        <p>
            Morbi posuere urna vitae nunc. Curabitur ultrices, lorem ac aliquam blandit, lectus
            eros hendrerit eros, at eleifend libero ipsum hendrerit urna. Suspendisse viverra.
            Morbi ut magna. Praesent id ipsum. Sed feugiat ipsum ut felis. Fusce vitae nibh
            sed risus commodo pulvinar. Duis ut dolor. Cras ac erat pulvinar tortor porta sodales.
            Aenean tempor venenatis dolor.</p>
    </div>
    <div class="block">
        <div class="sidebar-block">
            <h4>
                Sidebar Inner block Title</h4>
            <p>
                Morbi posuere urna vitae nunc. Curabitur ultrices, lorem ac <a href="#">aliquam blandit</a>
                , lectus eros hendrerit eros, at eleifend libero ipsum hendrerit urna. Suspendisse
                viverra. Morbi ut magna. Praesent id ipsum. Sed feugiat ipsum ut felis. Fusce vitae
                nibh sed risus commodo pulvinar. Duis ut dolor. Cras ac erat pulvinar tortor porta
                sodales. Aenean tempor venenatis dolor.
            </p>
        </div>
    </div>
</div>

After doing some digging in the ASP.Net source code, I’ve based my extension on the @Html.BeginForm helper. This means that the mark-up above can be replaced by the following:

@using MVCThemedApp1.Infrastructure
<div id="sidebar">
    @using (Html.SimpleBlock("Simple Block"))
    {
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    }
    @using (Html.NoticeBlock("Notice Title"))
    {
        <p>
            Morbi posuere urna vitae nunc. Curabitur ultrices, lorem ac aliquam blandit, lectus
            eros hendrerit eros, at eleifend libero ipsum hendrerit urna. Suspendisse viverra.
            Morbi ut magna. Praesent id ipsum. Sed feugiat ipsum ut felis. Fusce vitae nibh
            sed risus commodo pulvinar. Duis ut dolor. Cras ac erat pulvinar tortor porta sodales.
            Aenean tempor venenatis dolor.</p>
    }
    @using (Html.InnerBlock("Sidebar Inner block Title"))
    {
        <p>
            Morbi posuere urna vitae nunc. Curabitur ultrices, lorem ac <a href="#">aliquam blandit</a>
            , lectus eros hendrerit eros, at eleifend libero ipsum hendrerit urna. Suspendisse
            viverra. Morbi ut magna. Praesent id ipsum. Sed feugiat ipsum ut felis. Fusce vitae
            nibh sed risus commodo pulvinar. Duis ut dolor. Cras ac erat pulvinar tortor porta
            sodales. Aenean tempor venenatis dolor.
        </p>
    }
</div>

You’ll notice that I’ve created three helpers, one for each different style of sidebar widget. I then only need to specify the widgets’ Title as a parameter and add the widget content as standard html.

To use this in your own ASP.Net MVC project based on my Themed App project template, simply create a new folder called Infrastructure and add a HtmlHeper.cs class to it:

using System;
using System.Web.Mvc;

namespace MVCThemedApp1.Infrastructure
{
    public static class HtmlHelper
    {
        public static ThemedBox NoticeBlock(this System.Web.Mvc.HtmlHelper html, string title)
        {
            TagBuilder divBuilder = new TagBuilder("div");
            divBuilder.AddCssClass("block notice");
            html.ViewContext.Writer.Write(String.Format("{0}<h4>{1}</h4>", divBuilder.ToString(TagRenderMode.StartTag), title));

            ThemedBox theBox = new ThemedBox(html.ViewContext);
            return theBox;
        }

        public static ThemedBox InnerBlock(this System.Web.Mvc.HtmlHelper html, string title)
        {
            TagBuilder blockDiv = new TagBuilder("div");
            blockDiv.AddCssClass("block");
            html.ViewContext.Writer.Write(blockDiv.ToString(TagRenderMode.StartTag));

            TagBuilder divBuilder = new TagBuilder("div");
            divBuilder.AddCssClass("sidebar-block");
            html.ViewContext.Writer.Write(String.Format("{0}<h4>{1}</h4>", divBuilder.ToString(TagRenderMode.SelfClosing), title));

            ThemedBox theBox = new ThemedBox(html.ViewContext,2);
            return theBox;
        }

        public static ThemedBox SimpleBlock(this System.Web.Mvc.HtmlHelper html, string title)
        {
            TagBuilder blockDiv = new TagBuilder("div");
            blockDiv.AddCssClass("block");
            html.ViewContext.Writer.Write(String.Format("{0}<h3>{1}</h3>", blockDiv.ToString(TagRenderMode.StartTag), title));

            TagBuilder contentDiv = new TagBuilder("div");
            contentDiv.AddCssClass("content");
            html.ViewContext.Writer.Write(contentDiv.ToString(TagRenderMode.SelfClosing));

            ThemedBox theBox = new ThemedBox(html.ViewContext,2);
            return theBox;
        }
    }
}

Next, you also need to add a new class called ThemedBox.cs to the Infrastructure folder:

using System;
using System.Web;
using System.Web.Mvc;
using System.IO;

namespace MVCThemedApp1.Infrastructure
{
    public class ThemedBox : IDisposable
    {
        private bool _disposed;
        private readonly ViewContext _viewContext;
        private readonly TextWriter _writer;
        private int NumberOfClosingDivs = 1;

        public ThemedBox(HttpResponseBase httpResponse)
        {
            if (httpResponse == null)
            {
                throw new ArgumentNullException("httpResponse");
            }

            _writer = httpResponse.Output;
        }

        public ThemedBox(ViewContext viewContext, int numberOfClosingDivs=1)
        {
            if (viewContext == null)
            {
                throw new ArgumentNullException("viewContext");
            }
            NumberOfClosingDivs = numberOfClosingDivs;
            _viewContext = viewContext;
            _writer = viewContext.Writer;
        }

        public void Dispose()
        {
            Dispose(true /* disposing */);
            GC.SuppressFinalize(this);
        }

        protected virtual void Dispose(bool disposing)
        {
            if (!_disposed)
            {
                _disposed = true;

                for (int i = 1; i <= NumberOfClosingDivs; i++)
                {
                    _writer.Write("</div>");
                }                

                if (_viewContext != null)
                {
                    _viewContext.OutputClientValidation();
                }
            }
        }
    }
}

You would need to compile your solution first in order for the Html helper to become available and as easy as that you have an easy reusable UI component.

The other good news is that if you created your project based on the MVC Themed App project template, the widgets will also be automatically themed

If you have any comments or questions, please feel free to ask leave a comment or drop me a line on Twitter.

This in itself is not very hard to do. However, what if the user adds or removes fields from the one folder via the View Settings dialog?

Read more at Add-in Express.

To see all my Add-in Express blog posts visit my author page.

We will write an add-on for Internet Explorer which will show the selected contact in Dynamics CRM’s orders on an IE bar.

Read more at Add-in Express.

To see all my Add-in Express blog posts visit my author page.

In today’s article I’ll walk you through importing product data from the Northwind database and only display the fields of the Northwind Products table in an Outlook view.

Read more at Add-in Express.

To see all my Add-in Express blog posts visit my author page.

We’ll build a standard WPF UI as our baseline project. The UI will include 2 data grids, a combo box and 3 buttons.

Read more at Add-in Express.

To see all my Add-in Express blog posts visit my author page.

Luckily for us there are a host of 3rd party UI control vendors providing a rich set of both Windows Forms and WPF controls. Which 3rd party vendor’s products work best for Microsoft Office developers? We’ll judge the controls on two areas:

1.     How fast do the components load in an Office Add-in?
2.     Which control suite looks the best in Microsoft Office?

Read more at Add-in Express.

To see all my Add-in Express blog posts visit my author page.

Let’s face it; we do our best work when we enjoy what we do. I know I do. Add-in Express makes creating Microsoft Office add-ins fun. It’s great to have an idea, fire up Visual Studio and have a proof of concept within a few minutes and with zero frustration. Personally, I think having Add-in Express when developing Office extensions should be part of the Programmer’s Bill of Rights, let’s see why.

Read more at Add-in Express.

To see all my Add-in Express blog posts visit my author page.

Visual Studio does a pretty decent job of building setup projects when it comes to non-VSTO projects but one of the major pain areas with VSTO is deployment. In this post, I’ll walk you through some of the steps in building a setup project for a simple VSTO Office Add-in and then I’ll show you how Add-in Express builds the setup project for you.

Read more at Add-in Express.

To see all my Add-in Express blog posts visit my author page.

One of the task panes I use rather often is the Clipboard. You access this task pane by clicking the dialog box launcher button on the Clipboard group in applications such as Word, Excel and Outlook.

Read more at Add-in Express.

To see all my Add-in Express blog posts visit my author page.

VSTO provides a fairly respectable Outlook Form Region project item template for use in Visual Studio.

Read more at Add-in Express.

To see all my Add-in Express blog posts visit my author page.