ASP.NET 5 - Tag Helpers, the HTML way

// Old style tag helpers
@Html.LabelFor(Model => Model.Name, "User Name", new { @class = "control-label" });
// Declarative style
<label asp-for="Name" class="control-label">User Name</label>
// add tag helpers
@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"
// ITagHelper
int Order { get; }

Task ProcessAsync(TagHelperContext context, TagHelperOutput output);
    // Custom tag helper example
    [TargetElement("div", Attributes = "panel-title")]
    [TargetElement("div", Attributes = "panel-style")]
    public class PanelTagHelper : TagHelper
    {
        [HtmlAttributeName("panel-title")]
        public string Title { get; set; }

        [HtmlAttributeName("panel-type")]
        public HtmlPanelType PanelType { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            //<div class="panel panel-default">
            //  <div class="panel-heading">
            //    <h3 class="panel-title">Panel title</h3>
            //  </div>
            //  <div class="panel-body">
            //    Panel content
            //  </div>
            //</div>

            // header content
            var panelHeadingContent = new TagBuilder("h3");
            panelHeadingContent.SetInnerText(Title);

            // header
            var panelHeading = new TagBuilder("div");
            panelHeading.AddCssClass("panel-heading");
            panelHeading.InnerHtml = panelHeadingContent.ToHtmlString(TagRenderMode.Normal).ToString();

            // body
            var panelBody = new TagBuilder("div");
            panelBody.AddCssClass("panel-body");
            panelBody.InnerHtml = context.GetChildContentAsync().Result.GetContent();

            // panel
            var panel = new TagBuilder("div");
            panel.AddCssClass("panel");
            AddPanelTypeStyle(panel, PanelType);

            // replace the custom tag with the panel just built
            output.MergeAttributes(panel);
            var content = panelHeading.ToHtmlString(TagRenderMode.Normal).ToString();
            content += panelBody.ToHtmlString(TagRenderMode.Normal).ToString();
            output.Content.SetContent(content);

            base.Process(context, output);
        }

        private void AddPanelTypeStyle(TagBuilder panel, HtmlPanelType type)
        {
            switch (type)
            {
                case HtmlPanelType.Default:
                    panel.AddCssClass("panel-default");
                    break;

                case HtmlPanelType.Primary:
                    panel.AddCssClass("panel-primary");
                    break;

                case HtmlPanelType.Info:
                    panel.AddCssClass("panel-info");
                    break;

                case HtmlPanelType.Success:
                    panel.AddCssClass("panel-success");
                    break;

                case HtmlPanelType.Warning:
                    panel.AddCssClass("panel-warning");
                    break;

                case HtmlPanelType.Danger:
                    panel.AddCssClass("panel-danger");
                    break;

                default:
                    throw new InvalidOperationException("The panel type specified is not specified or invalid");
            }
        }

    }

ASP.NET 5 is in beta at the time this post is published and the final version may be different than the beta version.

comments powered by Disqus