ASP.net如何設計最好的

Question

在我的頁面上，有時會有一個帶有以下HTML的標簽菜單：

<div class="tabWrapper">
    <div class="tab tabSelected"><a href="artworkHome.aspx">Home</a></div>
    <div class="tab"><a href="#">Create New</a></div>
    <div class="tab"><a href="#">Help!</a></div>
    <div class="clear"></div>
</div>

不同的頁面組顯然具有不同的選項卡。 但是，將這些標簽頁寫到頁面上而不每次都手動用HTML進行處理的最佳方法是什么，那么如果我想添加標簽頁，而不必遍歷每個頁面以確保它們都相同，那是什么？

我應該自己控制嗎？ 以模塊化方式加載這些選項卡的最佳方法是什么？ 我是否應該擁有一個包含所有選項卡組並構建HTML的類？

謝謝你的幫助！

Answer 1

您可以進行自定義控件，也可以使用母版頁 。

Answer 2

如果它們是靜態控件，則最好在自定義ascx控件中創建HTML並將其動態加載到頁面上。 創建它們之后，您應該使用OutputCache指令來加快頁面渲染的速度。

Answer 3

也許像這樣的用戶控件：

public partial class TabControl : System.Web.UI.UserControl
{
    public List<TabObject> TabObjects { get; set; }

    public override void RenderControl(HtmlTextWriter writer)
    {
        writer.Write("<div class=\"tabWrapper\">");
        foreach (var item in TabObjects)
        {
            writer.Write("<div class=\"tab{0}\"><a href=\"{1}\">{2}</a></div>", (item.Selected) ? " tabSelected" : "", item.Link, item.Name);
        }
        writer.Write("<div class=\"clear\"></div>");
        writer.Write("</div>");

        base.RenderControl(writer);
    }
}

TabObject類：

public class TabObject
{
    public string Name { get; set; }
    public string Link { get; set; }
    public bool Selected { get; set; }
}

在您的頁面中：

        UcTabControl.TabObjects = new List<TabObject>()
        {
            new TabObject(){
                Link = "artworkHome.aspx",
                Name = "Home",
                Selected = true
            },
            new TabObject(){
                Link = "#",
                Name = "Create New",
                Selected = false
            },
            new TabObject(){
                Link = "#",
                Name = "Help!",
                Selected = false
            },
        };

輸出將是：

<div class="tabWrapper">
     <div class="tab tabSelected"><a href="artworkHome.aspx">Home</a></div>
     <div class="tab"><a href="#">Create New</a></div>
     <div class="tab"><a href="#">Help!</a></div>
     <div class="clear"></div>
</div>