Question

我试图创建一个自定义助手，它会生成带有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代码中，而一个div使用＆＃34; clearfix＆＃34;课堂出现了。以下是生成所有这些内容的代码：

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

任何人都可以帮我吗？

Answer 1

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

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

Answer 2

最后，解决方案非常明显：我必须将我的帮助器放在一个使用块中，以便调用Dispose方法。我的视图代码现在看起来像这样：

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

现在一切正常！

创建一个asp mvc帮助器来包围html代码

2 个答案: