如何使用動態內容創建可重用的HTML片段

Question

我試圖創建一個可重用的HTML片段，我希望能夠接受其他HTML作爲某種參數。

我可重用的代碼是

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

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

創建一個局部視圖很容易，但問題是，部分景色接受模型作爲參數。

我現在的解決方案很難看。

@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> 
}