ASP.NET AJAX Tabbed Dialog

For this Tabbed Dialog, you are going to need a MultiView, 2 View and 2 LinkButton. Of course, you can add more controls. I 'm planning to make a templated control so I would like to receive comments.

I read these articles before:
HTML Tabbed Dialog Widget
Web Parts - How to create a tabbed view

The templates

<asp:scriptmanager id="sm1" runat="server">
</asp:scriptmanager>

<asp:UpdatePanel id="up1" runat="server">
<contenttemplate>
<div class="tabs">
<asp:LinkButton
id="tab0" runat="server" CommandArgument="0" CssClass="tabheader"
OnCommand="SearchTab_Command">Basic Search</asp:LinkButton><asp:LinkButton
id="tab1" runat="server" CommandArgument="1" CssClass="tabheader"
OnCommand="SearchTab_Command">Advanced Search</asp:LinkButton>
</div>
<div class="tabcontent">
<asp:MultiView id="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<div class="tabbody">
<asp:Label ID="Label1" runat="server" Text="Tab 1"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="Post 1" />
</div>
</asp:View>
<asp:View ID="View2" runat="server">
<div class="tabbody">
<asp:Label ID="Label2" runat="server" Text="Tab 2"></asp:Label>
<br />
<asp:Button ID="Button2" runat="server" Text="Post 2" />
</div>
</asp:View>
</asp:MultiView>
</div>
</contenttemplate>
</asp:UpdatePanel>

The code

<script runat="server" type="text/VB">
Private Sub SwitchCss(ByVal wctl As WebControl)
Dim cc As String = IIf(wctl.CssClass.Equals("tabheader"), "tabheader_active", "tabheader")
wctl.CssClass = cc
End Sub

Protected Sub SearchTab_Command(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.CommandEventArgs)
Dim ctl As WebControl

ctl = CType(up1.FindControl(String.Format("tab{0}", MultiView1.ActiveViewIndex.ToString())), WebControl)
SwitchCss(ctl)

MultiView1.ActiveViewIndex = e.CommandArgument

ctl = CType(sender, WebControl)
SwitchCss(ctl)
End Sub

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
If (Not IsPostBack) Then
SwitchCss(tab0)
End If
End Sub
</script>

The CSS

.tabheader {
background-color: #F5F5F5;
color: #C0C0C0;
border: solid 1px #C0C0C0;
}

.tabheader_active {
background-color: #FFFFFF;
color: #608fc8;
border: solid 1px #C0C0C0;
border-bottom: solid 1px #FFFFFF;
cursor:default;
}

.tabs a {
position: relative; width: auto; display:inline;
padding: 2px 4px 2px 4px;
margin: 0 0 0 5px;
font-size:10pt;
}

.tabs a:hover { text-decoration:underline; }
.tabs a.tabheader { color: #666666; }

.tabcontent {
height: 100%; margin-top:2px;
background-color: white;
border: solid 1px #D3D3D3;
}

.tabbody { height: 100%; margin: 9px 9px 9px 9px; }