Asp. Net Web control (8) (TabControl tab Control)

Tab controls are often used in project development. There are also many tabs on the Internet. They are actually simple functions, but many of them are complicated and powerful, and they are not what I need.

The following describes how to implement a simple TabControl.

First look at the demo:

Location: TabContorl demo
<Hxj: TabControl ID = "TabControl1" runat = "server" TabSelectedIndex = "0">
<Hxj: TabItem Text = "Section 1" runat = "server">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
Euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</Hxj: TabItem>
<Hxj: TabItem Text = "Section 2" runat = "server">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
Euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor
Sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
Ut laoreet dolore magna aliquam erat volutpat.
</Hxj: TabItem>
<Hxj: TabItem Text = "Section 3" runat = "server">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
Euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor
Sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
Ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer
Adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
</Hxj: TabItem>
<Hxj: TabItem Text = "Section 4" runat = "server">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
Euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor
Sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
Ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer
Adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</Hxj: TabItem>
<Hxj: TabItem Text = "Section 5" runat = "server">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
Euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor
Sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
Ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer
Adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
Euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</Hxj: TabItem>
</Hxj: TabControl>

 

Running results:

 

Paste the following code:

[ControlBuilder (typeof (TabItemBuilder)]
[DefaultProperty ("TabSelectedIndex")] [ToolboxData ("<{0}: TabControl runat = server> </{0}: TabControl>")] [ParseChildren (typeof (TabItem)] [Description ("tab Web Control")] [Designer (typeof (Hxj. web. UI. design. hxjControlDesigner)] public class TabControl: WebControl

[ParseChildren (typeof (TabItem)] indicates that the child node nested in the control must be a TabItem control, which is the sample code above.

 

The simple value of the control defines two custom attributes:

[Description ("Default tab items")] public int TabSelectedIndex

[Description ("Custom tab CSS style")] public string HeaderCssClass

 

Below is the control output HTML:

    int totalTab = TabItems.Count;    if (!string.IsNullOrEmpty(HeaderCssClass))    {        writer.AddAttribute(HtmlTextWriterAttribute.Class, HeaderCssClass);    }    else    {        writer.AddAttribute(HtmlTextWriterAttribute.Class, "tabheader");    }    writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID + "header");    writer.RenderBeginTag(HtmlTextWriterTag.Div);    writer.RenderBeginTag(HtmlTextWriterTag.Ul);    for (int i = 0; i < totalTab; i++)    {        if (i == TabSelectedIndex)        {            writer.AddAttribute(HtmlTextWriterAttribute.Class, "current");        }        if (!TabItems[i].Visible)        {            writer.AddStyleAttribute(HtmlTextWriterStyle.Display, "none");        }        writer.RenderBeginTag(HtmlTextWriterTag.Li);        writer.AddAttribute(HtmlTextWriterAttribute.Href, "javascript:void(0)");        writer.AddAttribute(HtmlTextWriterAttribute.Onclick, string.Concat("htabs('", this.ClientID, "',", i.ToString(), ")"));        writer.AddAttribute(HtmlTextWriterAttribute.Title, TabItems[i].ToolTip);        writer.RenderBeginTag(HtmlTextWriterTag.A);        writer.Write(TabItems[i].Text);        writer.RenderEndTag();        writer.RenderEndTag();    }    writer.RenderEndTag();    writer.RenderEndTag();    for (int i = 0; i < totalTab; i++)    {        if (i != TabSelectedIndex)        {            writer.AddStyleAttribute(HtmlTextWriterStyle.Display, "none");        }        writer.AddAttribute(HtmlTextWriterAttribute.Id, string.Concat(this.ClientID, "Content", i.ToString()));        writer.RenderBeginTag(HtmlTextWriterTag.Div);        TabItems[i].RenderControl(writer);        writer.RenderEndTag();    }

The output code is also very simple.

It can also be written as follows:

Mainly because of the characteristics of TabControl
[ControlBuilder(typeof(TabItemBuilder))]
TabItemBuilder is a custom ControlBuilder.
The Code is as follows:
public class TabItemBuilder : ControlBuilder{    public override Type GetChildControlType(string tagName, IDictionary attribs)    {        if (String.Compare(tagName, "tab", true) == 0)            return typeof(TabItem);        else            return null;    }}
That is, the custom parsing logic is implemented through ControlBuilder.
 
Download