创建一个ASP MVC助手来包围HTML代码

Question

I'm trying to create a custom helper that would generate collapsible panels with html content, and which would work like Html.BeginForm, being called like this :

@Html.BeginCollapsiblePanel("Test block", "test_section", new List<string>{"test-class"}, true)
{
    <p>html content goes here</p>
}

and which would generate the following html code :

<section id="test_section" class="collapsible open test-class">
    <div class="collapsible-header">
        <h4>Test block</h4>
    </div>
    <div class="collapsible-content">
        <p>html content goes here</p>
    </div>
<section>

And my problem is that I'm getting the following output :

<section id="test_section" class="test-class collapsible open">
    <div class="collapsible-header">
        <h4>Test block</h4>
    </div>
    <div class="collapsible-content">
      EasyFed.Web.Utils.Helpers.CollapsiblePanel
                  {
      <p>html content goes here</p>
                  }
    </div>
    <div class="clearfix"></div>
</section>

As you can see, the name of the method called by the helper is displayed in the html code, and a div with the "clearfix" class appears out of the blue. Here's the code that generates all of this :

using EasyFed.Web.Utils.Extensions;
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using System.Web.Mvc;

namespace EasyFed.Web.Utils.Helpers
{
    public class CollapsiblePanel : IDisposable
    {
        private const string CollapsiblePanelClass = "collapsible";
        private const string CollapsibleHeaderClass = "collapsible-header";
        private const string CollapsibleContentClass = "collapsible-content";
        private const string CollapsibleOpenClass = "open";

        private bool _disposed;
        private readonly FormContext _originalFormContext;
        private readonly ViewContext _viewContext;
        private readonly TextWriter _writer;

        internal CollapsiblePanel(ViewContext viewContext, string panelTitle, string panelId, List<string> classes, bool openByDefault)
        {
            if (viewContext == null)
            {
                throw new ArgumentNullException("viewContext");
            }

            _viewContext = viewContext;
            _writer = viewContext.Writer;
            _originalFormContext = viewContext.FormContext;
            viewContext.FormContext = new FormContext();
            classes = classes ?? new List<string>();

            Begin(panelTitle, panelId, classes, openByDefault);
        }

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

        public void Begin(string panelTitle, string panelId, List<string> classes, bool openByDefault)
        {
            if (!classes.Contains(CollapsiblePanelClass)) classes.Add(CollapsiblePanelClass);
            if (openByDefault && !classes.Contains(CollapsibleOpenClass)) classes.Add(CollapsibleOpenClass);
            var classesString = "class=\"" + classes.ToSeparatedString(" ") + "\"";

            var sb = new StringBuilder();
            sb.AppendLine(string.Format("<section id=\"{0}\" {1}>", panelId, classesString));
            sb.AppendLine(string.Format("    <div class =\"{0}\">", CollapsibleHeaderClass));
            sb.AppendLine(string.Format("        <h4>{0}</h4>", panelTitle));
            sb.AppendLine("    </div>");
            sb.AppendLine(string.Format("    <div class=\"{0}\">", CollapsibleContentClass));

            _writer.Write(sb.ToString());
        }

        private void End()
        {
            var sb = new StringBuilder();
            sb.AppendLine("    </div>");
            sb.AppendLine("</section>");
            _writer.Write(sb.ToString());
        }

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

            if (_viewContext == null) return;
            _viewContext.OutputClientValidation();
            _viewContext.FormContext = _originalFormContext;
        }

        public void EndForm()
        {
            Dispose(true);
        }
    }
}

and here's the helper extension I created :

using System.Collections.Generic;
using System.Web.Mvc;

namespace EasyFed.Web.Utils.Helpers
{
    public static class HelperExtensions
    {
        public static CollapsiblePanel BeginCollapsiblePanel(this HtmlHelper htmlHelper, string panelTitle, string panelId, List<string> classes = null, bool openByDefault = false)
        {
            return new CollapsiblePanel(htmlHelper.ViewContext, panelTitle, panelId, classes, openByDefault);
        }
    }
}

If that can be relevant, I wrote this with the help of the following tutorial : http://www.growingwiththeweb.com/2012/09/custom-helper-for-surrounding-block-in.html

Can anyone help me with this ?

Answer 1

Your view code is missing a closing brace, change it to this:

@Html.BeginCollapsiblePanel("Test block", "test_section", new List<string>{"test-class"}, true)
{
    <p>html content goes here</p>
}

Answer 2

At the end, the solution was quite obvious : I had to enclose my helper in a using block so that the Dispose method would be called. My view code now looks like this :

@using (Html.BeginCollapsiblePanel("Test block", "test_section", new List<string>{"test-class"}, true))
{
    <p>html content goes here</p>
}

And everything now works just fine !