创建一个 asp mvc 助手来包围 html 代码答案

【问题标题】：Creating an asp mvc helper to surround html code创建一个 asp mvc 助手来包围 html 代码
【发布时间】：2014-08-12 09:55:30
【问题描述】：

我正在尝试创建一个自定义帮助程序，该帮助程序将生成带有 html 内容的可折叠面板，其工作方式类似于 Html.BeginForm，调用方式如下：

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

这将生成以下 html 代码：

<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>

我的问题是我得到以下输出：

<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>

如您所见，html代码中显示了helper调用的方法的名称，并且突然出现了一个带有“clearfix”类的div。这是生成所有这些的代码：

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);
        }
    }
}

这是我创建的辅助扩展：

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);
        }
    }
}

如果这可能相关，我在以下教程的帮助下写了这篇文章：http://www.growingwiththeweb.com/2012/09/custom-helper-for-surrounding-block-in.html

谁能帮我解决这个问题？

【问题讨论】：

您发布的视图代码是否正确？它缺少}。

标签： c# asp.net-mvc razor visual-studio-2013 html-helper

【解决方案1】：

您的视图代码缺少右大括号，请将其更改为：

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

【讨论】：

啊，抱歉，我只是在复制代码时出错了。我马上修改

【解决方案2】：

最后，解决方案非常明显：我必须将我的助手包含在 using 块中，以便调用 Dispose 方法。我的视图代码现在看起来像这样：

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

现在一切正常！

【讨论】：