asp.net-mvchtml-helperfluent

How to write HtmlHelper in Fluent syntax


I have a simple tag builder that looks like this:

public static MvcHtmlString Tag(this HtmlHelper helper, string tag, string content)
{
    var tagBuilder = new TagBuilder(tag){InnerHtml = content};
    return MvcHtmlString.Create(tagBuilder.ToString(TagRenderMode.NormalTag));
}

And, I can use it like this:

@Html.Tag("em", Model.Title)

which produces:

<em>The Title</em>

How can this be written to use a Fluent Syntax so it's use would look like this:

@Html.Tag("em").Content(Model.Title)

Solution

  • You have to define a builder interface and implementation. I hope my example can provide some guidance:

    public static class MyHtmlExtensions
    {
        public static IMyTagBuilder Tag(this HtmlHelper helper, string tag)
        {
            return new MyTagBuilder(tag);
        }
    }
    

    Then you define your builder interface and implementation:

    public interface IMyTagBuilder : IHtmlString
    {
        IHtmlString Content(string content);
    }
    
    public class MyTagBuilder : IMyTagBuilder
    {
        private readonly TagBuilder _tagBuilder;
    
        public MyTagBuilder(string tag)
        {
            _tagBuilder = new TagBuilder(tag);
        }
    
        public IHtmlString Content(string content)
        {
            _tagBuilder.InnerHtml = content;
            return this;
        }
    
        public string ToHtmlString()
        {
            return _tagBuilder.ToString(TagRenderMode.NormalTag);
        }
    }
    

    Since IMyTagBuilder implements IHtmlString, it can be used either with or without calling .Content() afterwards.

    A great trick to use when implementing fluent interfaces it to use a IFluentInterface to hide object members (ToString, Equals, GetHashCode and GetType) from IntelliSense, it removes some noise.

    EDIT: A great resource for building fluent APIs is Daniel Cazzulino's screencast from building Funq here