Question

In an Asp.net MVC application I’d like to encapsulate the ugly wrapper code (just a literal html opening string and another closing string) we use to make corners and shadows compatible with older browsers (we don’t use javascript for performance reasons) in a manner compatible with the visual studio design view.

I’d like to put the wrapper divs in a control so that I can use them in a .aspx view page and not have to look at all the mess required to make fancy corners & shadows but still get the benefit of seeing the results in the designer.

//open wrapper literal
actual content
//close wrapper literal

I couldn’t figure out how to inject content inside 1 control and have the results visible in the designer the way master pages do, so I’m testing a system using 2 controls containing the literal html.

example usage – with one control opening and another closing

<ShadowBoxStart /> //contains div open tags
Hello World. This is actual content with all the nice style divs wrapped around
<ShadowBoxEnd /> //contains div close tags

This renders properly in all browsers when I run the application but the designer seems to be confused by the fact that one control opens the divs and another closes them and renders junk. The System.Web.Mvc.ViewUserControls I’m using contain nothing but literal html, and I’ve replicated the behavior with several different standard style & div configurations so I’m stumped as to what is confusing the designer.

I’d like to keep the solution really simple because this is mainly a convenience setup and not worth a lot of added complexity. Any ideas?

Answer 1

Have you thought of creating an HtmlHelper extension a la the BeginForm extension that would allow you to do the single open/close tags. This extension returns an object of a class that implements IDisposable and uses the Dispose method to generate the closing tag.

Then your HTML would look like:

<% using (Html.ShadowBoxStart()) { %>
   Hello, World!
<% } %>

Some code that you might be able adapt:

public static class HtmlHelperExtensions
{
    /// <summary>
    /// Begins a container block using the specified tag.  Writes directly to the response.  Expected to be used within a using block.
    /// </summary>
    /// <param name="helper">HtmlHelper object from a View.</param>
    /// <param name="tag">The container tag (div, span, hN, etc.)</param>
    /// <returns>An MvcContainer that writes the closing tag when it is disposed.</returns>
    public static MvcContainer BeginContainer( this HtmlHelper helper, string tag )
    {
        return BeginContainer( helper, tag, null );
    }

    /// <summary>
    /// Begins a container block using the specified tag.  Writes directly to the response.  Expected to be used within a using block.
    /// </summary>
    /// <param name="helper">HtmlHelper object from a View.</param>
    /// <param name="tag">The container tag (div, span, hN, etc.)</param>
    /// <param name="htmlAttributes">HTML attribute to apply to the tag.</param>
     /// <returns>An MvcContainer that writes the closing tag when it is disposed.</returns>
    public static MvcContainer BeginContainer( this HtmlHelper helper, string tag, object htmlAttributes )
    {
        var builder = new TagBuilder( tag );
        builder.MergeAttributes( new ParameterDictionary( htmlAttributes ) );
        helper.ViewContext.HttpContext.Response.Write( builder.ToString( TagRenderMode.StartTag ) );
        return new MvcContainer( helper.ViewContext.HttpContext.Response, tag );
    }
}

Container class:

/// <summary>
/// Used by the HtmlHelpeExtensions in conjunction with a using block to close
/// a container tag.
/// </summary>
public class MvcContainer : IDisposable
{
    protected bool Disposed { get; set; }
    protected HttpResponseBase HttpResponse { get; set; }
    protected string Tag { get; set; }

    public MvcContainer( HttpResponseBase httpResponse, string tag )
    {
        if (httpResponse == null)
        {
            throw new ArgumentNullException( "httpResponse" );
        }

        if (string.IsNullOrEmpty( tag ))
        {
            throw new ArgumentNullException( "tag" );
        }

        this.HttpResponse = httpResponse;
        this.Tag = tag;
    }

    /// <summary>
    /// Write the closing tag
    /// </summary>
    public virtual void EndContainer()
    {
        this.Dispose( true );
    }

    #region IDisposable Members

    /// <summary>
    /// Write the closing tag
    /// </summary>
    public void Dispose()
    {
        this.Dispose( true );
        GC.SuppressFinalize( this );
    }

    protected virtual void Dispose( bool disposing )
    {
        if (!this.Disposed)
        {
            this.Disposed = true;
            this.HttpResponse.Write( string.Format( "</{0}>", this.Tag ) );
        }
    }

    #endregion
}