asp.net-mvc - 如何在 ASP.NET MVC 中创建可重用的自定义 HTML 面板？

Question

我正在尝试在 ASP.NET MVC 中创建一个可重用的 UI 元素，该元素包含我选择放置在其中的任何内容。我的第一个想法是创建一个局部 View ，但这似乎对我想要完成的任务没有帮助。

模板

例如，我想创建一些与此类似的可重用标记(请原谅伪代码):

<div class="panel panel-default">
  <div class="panel-body">
    @RenderBody()
  </div>
</div>

一个简单的例子

然后在我看来我想做类似的事情:

@Render.Partial("MyPanel")
{
    <img src="image.jpg" />
}

假设代码按预期工作，它将生成以下内容:

<div class="panel panel-default">
  <div class="panel-body">
     <img src="image.jpg" />
  </div>
</div>

另一个示例，具有更复杂的标记

理论上，我希望能够在其中一个面板中放置我想要的任何内容。因此，即使更复杂的标记仍然显得清晰易读。

@Render.Partial("MyPanel")
{
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
}

就像第一个示例一样，它将所有内容包装在模板的页眉和页脚内:

<div class="panel panel-default">
  <div class="panel-body">
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
      </div>
      .. truncated ..
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

已知的可能性

• 分部 View 。分部 View 似乎很有意义，但我一直无法找到一种方法来创建具有超出其设计模型的灵活性的分部 View 。我举了两个例子，因为每次使用面板中的内容可能会有很大不同。我希望能够将任何东西放入这个局部 View 的主体中；文本、标记、更多 Razor 代码等。
• HTML Helper。当我有要传递的特定参数时，这非常有用。当需要输入大量标记时，我认为这不实用，因为它会变得很难阅读/维护。另外，由于 html 将作为字符串传入，我不确定这如何与 razor 标签一起使用？
• 2 个部分 View 。使用一个作为页眉，另一个作为页脚。这可行，但对我来说感觉很草率。

我能够通过创建自定义控件在 ASP.NET WebForms 中执行此操作。看起来这在 MVC 中也应该是直接的，但我还没有找到一个好的解决方案。

Answer 1

您可以使用“DynamicInvoke”创建具有动态标记的 html 帮助器，例如:

public static IHtmlString CustomPanel(this HtmlHelper htmlHelper, Func<object, object> panelMarkup = null)
{
    return CustomPanel(htmlHelper, (panelMarkup == null ? "" : panelMarkup.DynamicInvoke(htmlHelper.ViewContext).ToString()));
}

public static IHtmlString CustomPanel(this HtmlHelper htmlHelper, string content)
{
    TagBuilder div = new TagBuilder("div");
    div.AddCssClass("panel panel-default");

    TagBuilder innerDiv = new TagBuilder("div");
    innerDiv.AddCssClass("panel-body");

    innerDiv.InnerHtml = content;
    div.InnerHtml = innerDiv.ToString();

    return new HtmlString(div.ToString());
}

然后你可以像这样使用它:

@Html.CustomPanel(
    @<text>
        <div>My Custom Markup</div>
        <span>More Stuff</span>
    </text>
)

您的最终内容将如下所示:

<div class="panel panel-default">
    <div class="panel-body">
        <div>My Custom Markup</div>
        <span>More Stuff</span>
    </div>
</div>

您会看到它经常在一些第三方小部件库中使用(kendo-ui 是我所知道的主要库)