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

Question

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

详细说明

与以下 HTML 标记类似的模式在这些视图中不断出现。标记呈现为一个独立的内容框：

<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 内容整齐地保留在视图页面中，即使在页面上组合多个 BoxControl 时也是如此。另一个好处是用作内容的 HTML 可以被 IDE 识别，从而提供语法突出显示/检查。

据我了解，ASP.NET MVC 中不鼓励使用 WebControl。我可以使用部分视图来完成抽象，而不是使用 WebControl。这样的视图将包含在视图页面中，如下所示：

<%= 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>"});
%>

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

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

我还考虑过 Jeffrey Palermo 提出的解决方案，但这意味着项目中会分散大量额外的文件。我希望任何视图的文本内容仅限于一个文件。

我是否应该不想将标记抽象出来？或者是否有一种适合 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）在视图中使用它（Razor 代码）

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

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

Answer 2

好吧，你不会像这样渲染部分，而是传递一个强类型的 ViewModel，如下所示：

<%= Html.RenderPartial("BoxControl", contentModel) %>

contentModel 是 ViewModel（只是视图的类似 POCO 的存储机制），它是强类型的部分视图将绑定到。

所以你可以在你的部分视图中执行此操作：

<h1><%: Model.Header %></h1>
<p><%: Model.Content %></p>

等等

Answer 3

在考虑答案并运行实验之后，我倾向于坚持纯 MVC 方法并在整个视图页面中复制一些演示代码。我想详细说明这一决定的理由。

部分视图
使用部分视图时，框的内容需要作为视图模型传递，与当场声明内容 HTML 相比，这使得视图页面的可读性较差。请记住，内容并非来自 CMS，因此这意味着在控制器中使用 HTML 填充视图模型或在视图页面中设置局部变量。这两种方法都无法利用 IDE 功能来处理 HTML。

网页控制
另一方面，WebControl 派生类不被鼓励，而且也存在一些实际问题。主要问题是传统 ASP.NET .aspx 页面的声明式分层样式不适合 MVC.NET 视图页面的过程式样式。您必须选择完全成熟的传统方法，或者完全采用 MVC。

为了说明这一点，我的实验实现中最突出的问题是变量范围：当迭代产品列表时，MVC 方式是使用 foreach 循环，但这引入了一个局部变量在 WebControl 范围内不可用。传统的 ASP.NET 方法是使用 Repeater 而不是 foreach。使用任何传统的 ASP.NET 控件似乎都是一个滑坡，因为我怀疑您很快就会发现自己需要组合越来越多的控件才能完成工作。

纯 HTML
完全放弃抽象，您将留下重复的表示代码。这违背了 DRY，但会产生非常可读的代码。

Answer 4

对我来说，webforms 的 html 看起来并没有那么少，它看起来更像是横向移动。在 MVC 中使用部分可以使其更清晰，但您需要的 html 标记仍然存在，在一个地方或另一个地方。如果主要是额外的 html 困扰您，您可以看看 NHaml 视图引擎或查看 haml
haml 网站。

我绝不是 Haml 专家，但 html 看起来确实干净多了......

.top container
    .header
       %p 
         The title
       %em 
         (and a small note)
    .simpleBox rounded
       %p 
         This is content.
       %p 
         Some more content