ASP.net how to design this best

Question

On my pages I sometimes have a tab menu with the following 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>

Different groups of pages have different tabs obviously. But what is the best way to write these tabs onto a page without manually doing it with HTML each time, so that if I want to add a tab I don't have to go through each page ensuring they are all the same?

Should I make my own control? What is the best way to load these tabs in a modularised way? Should I have a class which holds all the tab groups and builds the HTML?

Thanks for any help!

Answer 1

您可以进行自定义控件，也可以使用母版页 。

Answer 2

If they are static controls you are best off creating the Html in custom ascx controls and load them dynamically on the page. Once they are created you should look at using the OutputCache directive which will speed up the page rendering.

Answer 3

Maybe a usercontrol like :

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);
    }
}

The TabObject class :

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

And in your page :

        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
            },
        };

The output will be :

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