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
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;
}
|
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
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>
|
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
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
|
We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
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 |
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
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()
|
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
|
Looking for the C#.NET 2005 Version? Click Here!
Looking for more ASP.NET Tutorials? Click Here!