asp.net-mvc - 如何使用 ASP.NET MVC 抽象常见的标记片段

Question

我的 ASP.NET MVC 2 站点中有很多内容丰富的 View 。这些包含几个重复出现的 HTML 模式。使用 ASP.NET Webforms 时，从 WebControl 派生的类可以封装这些模式。我想要一些关于 MVC 解决这个问题的正确方法的指针。

详解

与以下 HTML 标记不同的模式在这些 View 中不断出现。标记呈现为一个孤立的内容框:

<div class="top container">
    <div class="header">
       <p>The title</p>
       <em>(and a small note)</em>
    </div>
    <div class="simpleBox rounded">
       <p>This is content.</p>
       <p><strong>Some more content</strong></p>
    </div>
</div>

这是一个简单的例子，但还有更复杂的重复模式。在 ASP.NET Webforms 中，我会将此类代码抽象为一个 WebControl(假设我将其命名为 BoxControl)，并包含在如下页面中:

<foo:BoxControl runat="server">
  <Header>The title</Header>
  <Note>(and a small note)</Note>
  <Content>
     <p>This is content.</p>
     <p><strong>Some more content</strong></p>
  </Content>
</foo:BoxControl>

通过这种抽象，只需更改 BoxControl 源，就可以轻松地调整整个站点中框的构造方式。它还可以将静态 HTML 内容整齐地放在 View 页面中，即使在页面上组合多个 BoxControl 时也是如此。另一个好处是用作内容的 HTML 被 IDE 识别，从而提供语法突出显示/检查。

据我了解，在 ASP.NET MVC 中不鼓励使用 WebControl。我可以用局部 View 代替 WebControl 来完成抽象。这样一个 View 将被包含在一个 View 页面中，如下所示:

<%= Html.Partial("BoxControl", new {
  Header="The Title", 
  Note="(and a small note)", 
  Content="<p>This is content.</p><p><strong>Some more content</strong></p>"});
%>

这并不理想，因为“内容”参数可能会变得很长，并且 IDE 在以这种方式传递时不会将其视为 HTML。

考虑的解决方案
强类型 View 模型可以传递给 Html.Partial 调用，而不是上面显示的冗长参数。但随后我必须从其他地方(CMS 或资源文件)提取内容。我希望内容包含在查看页面中。

我也考虑过 the solution proposed by Jeffrey Palermo ，但这意味着在项目中散布着许多额外的文件。我希望任何 View 的文本内容仅限于一个文件。

我不应该把标记抽象出来吗？或者是否有一种适合 MVC 的方法，我在这里俯瞰？使用 WebControl “犯罪”的缺点是什么？

Answer 1

这个问题有一个解决方案，尽管解决这个问题的方法比其他框架(如 Ruby on Rails)要笨拙一些。

我使用此方法为 Twitter Bootstrap 的控制组语法创建标记，如下所示:

<div class="control-group">
  <label class="control-label">[Label text here]</label>
  <div class="controls">
    [Arbitrary markup here]
  </div>
</div>

就是这样:

1) 为通用标记片段创建模型。模型应该在构造和处置上写下标记:

using System;
using System.Web.Mvc;

namespace My.Name.Space
{
  public class ControlGroup : IDisposable
  {
    private readonly ViewContext m_viewContext;
    private readonly TagBuilder m_controlGroup;
    private readonly TagBuilder m_controlsDiv;

    public ControlGroup(ViewContext viewContext, string labelText)
    {
      m_viewContext = viewContext;
      /*
       * <div class="control-group">
       *  <label class="control-label">Label</label>
       *  <div class="controls">
       *   input(s)
       *  </div>
       * </div>
       */

      m_controlGroup = new TagBuilder("div");
      m_controlGroup.AddCssClass("control-group");
      m_viewContext.Writer.Write(m_controlGroup.ToString(TagRenderMode.StartTag));

      if (labelText != null)
      {
        var label = new TagBuilder("label");
        label.AddCssClass("control-label");
        label.InnerHtml = labelText;
        m_viewContext.Writer.Write(label.ToString());
      }

      m_controlsDiv = new TagBuilder("div");
      m_controlsDiv.AddCssClass("controls");
      m_viewContext.Writer.Write(m_controlsDiv.ToString(TagRenderMode.StartTag));

    }

    public void Dispose()
    {
      m_viewContext.Writer.Write(m_controlsDiv.ToString(TagRenderMode.EndTag));
      m_viewContext.Writer.Write(m_controlGroup.ToString(TagRenderMode.EndTag));
    }
  }
}

2) 创建一个漂亮的 Html 助手

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

using My.Name.Space

namespace Some.Name.Space
{
  public static class FormsHelper
  {
    public static ControlGroup ControlGroup(this HtmlHelper helper, string labelText)
    {
      return new ControlGroup(helper.ViewContext, labelText);
    }
  }
}

3) 在 View 中使用它(Razor 代码)

@using (Html.ControlGroup("My label"))
{
  <input type="text" />
  <p>Arbitrary markup</p>
  <input type="text" name="moreInputFields" />
}

这也是 MVC 框架使用 Html.BeginForm 呈现表单的方式方法