asp.net-mvc - 如何使用动态内容创建可重用的 HTML 片段

Question

我正在尝试创建一个可重用的 HTML 片段，我希望能够接受额外的 HTML 作为某种参数。

我的可重用代码是

<div class="dialog" id="@Model.HtmlId">

  <!-- My reusable code needs to go here -->
</div>

创建局部 View 很容易，但问题是局部 View 接受模型作为参数。

我目前的解决方案是丑陋的。

@Html.Partial("_startDialog", new { HtmlId="someIdGoesHere" });

<form>
  <!-- Some form elements go here -->
</form>

@Html.Partial("_endDialog");

这呈现

<div class="dialog" id="@Model.HtmlId">

  <form>
    <!-- Some form elements go here -->
  </form>
</div>

我怎样才能流线这个。优雅会很好:-)

Answer 1

这应该可以解决问题:

public class MvcDialog : IDisposable
{
    public MvcDialog(ViewContext context, IDictionary<string, object> htmlAttributes)
    {
        this.context = context;
        this.htmlAttributes = htmlAttributes;

        Begin();
    }

    private ViewContext context;
    private IDictionary<string, object> htmlAttributes;
    private TagBuilder tag;
    private bool disposed;

    protected virtual void Begin()
    {
        tag = new TagBuilder("div");
        tag.MergeAttributes(htmlAttributes);
        tag.AddCssClass("dialog");

        context.Writer.Write(tag.ToString(TagRenderMode.StartTag));
    }

    public virtual void End()
    {
        Dispose(true);
    }

    protected virtual void Dispose(bool disposing)
    {
        if (!disposed)
        {
            disposed = true;
            context.Writer.Write(tag.ToString(TagRenderMode.EndTag));
        }
    }

    public void Dispose()
    {
        Dispose(true);
        GC.SuppressFinalize(this);
    }
}

public static class MvcDialogExtensions
{
    public static MvcDialog Dialog(this HtmlHelper self)
    {
        return Dialog(self, new RouteValueDictionary());
    }
    public static MvcDialog Dialog(this HtmlHelper self, object htmlAttributes)
    {
        return Dialog(self, new RouteValueDictionary(htmlAttributes));
    }
    public static MvcDialog Dialog(this HtmlHelper self, IDictionary<string, object> htmlAttributes)
    {
        return new MvcDialog(self.ViewContext, htmlAttributes);
    }
}

用法:

@using (Html.Dialog(new { id = "mightyDialog" }))
{
    <text>awesome content</text>
}