Navigator : Home > Tutorials > Controls Tutorials > ...
Use MultiView and View Control to perform Tabstrip(C#)
This tutorial will show you how to use MultiView Control and View Control to achieve Tabstrip in ASP.NET 2.0 and C#.
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
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.
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> |
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!
Create a connection to database. The follwing is a connectionstring
Please modify user id and password to your sql server user id and pasoword.
| protected const string CONNECTIONSTRING = "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 DataSet ReturnDataSet(string tableName,ArrayList alParams)
{
string strSql = "select "; foreach (string de in alParams) {
strSql = strSql + de + ","; } strSql = strSql.Substring(0,strSql.LastIndexOf(",")); strSql += " from " + tableName; DataSet myDs = new DataSet(); SqlConnection myConnection = new SqlConnection(CONNECTIONSTRING); try {
SqlDataAdapter myAdapter = new SqlDataAdapter(strSql, myConnection);
myAdapter.Fill(myDs, tableName); } catch (Exception ex) {
throw new Exception(ex.Message); } 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()
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack) {
MultiView1.ActiveViewIndex = 0;
ArrayList alParams = new ArrayList();
alParams.Add("au_lname");
alParams.Add("au_fname");
alParams.Add("address");
this.GridView1.DataSource = ReturnDataSet("authors", alParams);
this.GridView1.DataBind(); } |
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.
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
protected void LBView1_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 0;
Cell1.Attributes["class"] = "SelectedTopBorder";
Cell2.Attributes["class"] = "TopBorder";
Cell3.Attributes["class"] = "TopBorder";
ArrayList alParams = new ArrayList();
alParams.Add("au_lname");
alParams.Add("au_fname");
alParams.Add("address");
this.GridView1.DataSource = ReturnDataSet("authors", alParams);
this.GridView1.DataBind(); }
protected void LBView2_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 1;
Cell1.Attributes["class"] = "TopBorder";
Cell2.Attributes["class"] = "SelectedTopBorder";
Cell3.Attributes["class"] = "TopBorder";
ArrayList alParams = new ArrayList();
alParams.Add("au_id");
alParams.Add("phone");
alParams.Add("zip");
this.DetailsView1.DataSource = ReturnDataSet("authors", alParams);
this.DetailsView1.DataBind(); }
protected void LBView3_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 2;
Cell1.Attributes["class"] = "TopBorder";
Cell2.Attributes["class"] = "TopBorder";
Cell3.Attributes["class"] = "SelectedTopBorder"; } |
Looking for the VB.NET 2005 Version? Click Here!
Looking for more ASP.NET Tutorials? Click Here!