Navigator : Home > Tutorials > Controls Tutorials > ...
Use MultiView and View Control to perform Tabstrip(VB)
This tutorial will show you how to use MultiView Control and View Control to achieve Tabstrip in ASP.NET 2.0 and VB.Net.
Use MultiView Control and View Control to perform tabstrip control is very useful for tab in ASP.Net applications.
To define Style Sheet to make the page looks more professional
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
body
{
font-size: 11pt;
font-family: Arial; }
.mainTitle
{
font-size: 12pt;
font-weight: bold;
font-family: Arial; }
.commonText
{
font-size: 11pt;
font-family: Arial; }
.littleMainTitle
{
font-size: 10pt;
font-weight: bold;
font-family: Arial; }
.TopTitle
{
border: 0px;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
color: Black;
display: inline-block;
width: 100%; }
.SelectedTopTitle
{
border: 0px;
font-size: 10pt;
text-decoration: none;
color: Black;
display: inline-block;
width: 100%;
background-color: White; }
.ContentView
{
border: 0px;
padding: 3px 3px 3px 3px;
background-color: White;
display: inline-block;
width: 390px; }
.SepBorder
{
border-top-width: 0px;
border-left-width: 0px;
font-size: 1px;
border-bottom: Gray 1px solid;
border-right-width: 0px; }
.TopBorder
{
border-right: Gray 1px solid;
border-top: Gray 1px solid;
background: #DCDCDC;
border-left: Gray 1px solid;
color: black;
border-bottom: Gray 1px solid; }
.ContentBorder
{
border-right: Gray 1px solid;
border-top: Gray 0px solid;
border-left: Gray 1px solid;
border-bottom: Gray 1px solid;
height: 100%;
width: 100%; }
.SelectedTopBorder
{
border-right: Gray 1px solid;
border-top: Gray 1px solid;
background: none transparent scroll repeat 0% 0%;
border-left: Gray 1px solid;
color: black;
border-bottom: Gray 0px solid; } |
To design five controls in the web page. These controls are MultiView Control,View Controls and Calendar Control. And then add three LinkButton controls in front of the MultiView control.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>How to create tab control in ASP.Net</title>
<link id="InstanceStyle" href="StyleSheet.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset>
<legend>MultiView and View Usage</legend>
<table height="95%" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td style="height: 22px">
<table id="TopTable" runat="server" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tr style="height: 22px">
<td class="SelectedTopBorder" id="Cell1" align="center" style="height: 21px; width: 60px;">
<asp:LinkButton ID="LBView1" runat="server" CssClass="TopTitle" OnClick="LBView1_Click"
Width="92px">Show GridView</asp:LinkButton>
</td>
<td class="SepBorder" width="2px" style="height: 21px">
</td>
<td class="TopBorder" id="Cell2" align="center" width="60" style="height: 21px">
<asp:LinkButton ID="LBView2" runat="server" CssClass="TopTitle" OnClick="LBView2_Click"
Width="91px">DetailView</asp:LinkButton>
</td>
<td class="SepBorder" width="2px" style="height: 21px">
</td>
<td class="TopBorder" id="Cell3" align="center" style="width: 60px; height: 21px">
<asp:LinkButton ID="LBView3" runat="server" CssClass="TopTitle" OnClick="LBView3_Click"
Width="89px">Calendar</asp:LinkButton>
</td>
<td class="SepBorder" style="height: 21px">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="ContentBorder" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><br />
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White"
BorderColor="#336666" BorderStyle="Double" AllowPaging="true" PageSize="8" BorderWidth="3px"
CellPadding="4" GridLines="Horizontal" Width="515px" OnPageIndexChanging="GridView1_PageIndexChanging">
<FooterStyle BackColor="White" ForeColor="#333333" />
<Columns>
<asp:BoundField DataField="au_lname" HeaderText="author last Name" />
<asp:BoundField DataField="au_fname" HeaderText="author first name" />
<asp:BoundField DataField="address" HeaderText="address" />
</Columns>
<RowStyle BackColor="White" ForeColor="#333333" />
<SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</asp:View>
<asp:View ID="View2" runat="server">
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" BackColor="White"
BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4" Height="52px"
Width="362px">
<FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
<EditRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<RowStyle BackColor="White" ForeColor="#003399" />
<PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
<Fields>
<asp:BoundField DataField="au_id" HeaderText="No" />
<asp:BoundField DataField="phone" HeaderText="phone" />
<asp:BoundField DataField="zip" HeaderText="zip" />
</Fields>
<HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
</asp:DetailsView>
</asp:View>
<asp:View ID="View3" runat="server">
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#3366CC"
BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana"
Font-Size="8pt" ForeColor="#003399" Height="200px" Width="244px" NextMonthText="Next"
PrevMonthText="previous" SelectedDate="2006-08-15" VisibleDate="2006-08-15" SelectMonthText="month" SelectWeekText="week" ShowTitle="False">
<SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
<SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
<WeekendDayStyle BackColor="#CCCCFF" />
<OtherMonthDayStyle ForeColor="#999999" />
<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
<DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
<TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True"
Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
</asp:Calendar>
</asp:View>
</asp:MultiView>
</td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html> |
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
Create a connection to database. The follwing is a connectionstring
Please modify user id and password to your sql server user id and pasoword.
| Dim connectionstring As String = "Data Source=DEV005;Initial Catalog=pubs;User ID=sa;password=1234 |
To define a function ReturnDataSetto communicate with database in the project.
ReturnDataSet has two parameters. One is string type which represent table name, and the other is DataSet type. RetrunDataSet return a DataSet.
Protected Function ReturnDataSet(ByVal tableName As String, ByVal alParams As System.Collections.ArrayList) As System.Data.DataSet
Dim strSql As String = "select " For Each de As String In alParams
strSql = strSql & de & "," Next strSql = strSql.Substring(0, strSql.LastIndexOf(",")) strSql = strSql & " from " & tableName Dim myDs As System.Data.DataSet = New System.Data.DataSet() Dim myConnection As System.Data.SqlClient.SqlConnection = New System.Data.SqlClient.SqlConnection(connectionstring) Try
Dim myAdapter As System.Data.SqlClient.SqlDataAdapter = New System.Data.SqlClient.SqlDataAdapter(strSql, myConnection)
myAdapter.Fill(myDs, tableName) Catch ex As Exception
Throw New Exception(ex.Message) End Try Return myDs |
In order to see data in the page when we first access the page, we must add the following code in the function of page_load()
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
| Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Me.Load
Me.MultiView1.ActiveViewIndex = 0
Dim alParams As System.Collections.ArrayList = New System.Collections.ArrayList()
alParams.Add("au_lname")
alParams.Add("au_fname")
alParams.Add("address")
Me.GridView1.DataSource = ReturnDataSet("authors", alParams)
Me.GridView1.DataBind() End Sub |
Change style and bind data to GridView Control, DetailView Control in the profile with code.
Please be noted that you must add MultiView1.ActiveViewIndex = intValue;(intValue=1,2,3)
It's very important. It will control which View control display the page.
| Protected Sub LBView1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LBView1.Click
Me.MultiView1.ActiveViewIndex = 0
Cell1.Attributes("class") = "SelectedTopBorder"
Cell2.Attributes("class") = "TopBorder"
Cell3.Attributes("class") = "TopBorder"
Dim alParams As System.Collections.ArrayList = New System.Collections.ArrayList()
alParams.Add("au_lname")
alParams.Add("au_fname")
alParams.Add("address")
Me.GridView1.DataSource = ReturnDataSet("authors", alParams)
Me.GridView1.DataBind() End Sub
Protected Sub LBView2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LBView2.Click
MultiView1.ActiveViewIndex = 1
Cell1.Attributes("class") = "TopBorder"
Cell2.Attributes("class") = "SelectedTopBorder"
Cell3.Attributes("class") = "TopBorder"
Dim alParams As System.Collections.ArrayList = New System.Collections.ArrayList()
alParams.Add("au_id")
alParams.Add("phone")
alParams.Add("zip")
Me.DetailsView1.DataSource = ReturnDataSet("authors", alParams)
Me.DetailsView1.DataBind() End Sub
Protected Sub LBView3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LBView3.Click
MultiView1.ActiveViewIndex = 2
Cell1.Attributes("class") = "TopBorder"
Cell2.Attributes("class") = "TopBorder"
Cell3.Attributes("class") = "SelectedTopBorder" End Sub |
Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!
Looking for the C#.NET 2005 Version? Click Here!
Looking for more ASP.NET Tutorials? Click Here!