| | |
help in displaying multiple tabs in same webpage
Please support our ASP.NET advertiser: Intel Parallel Studio Home
Thread Solved |
•
•
Join Date: Nov 2007
Posts: 18
Reputation:
Solved Threads: 0
Hi i am new to asp.net.
i am preparing an asp.net application which is of like this
it will have a webpage,which consists of multiple tabs
when i click on each tab it will display different information in the same webpage.
my problem is how to create a multiple tab webpage
is there any control available in asp.net?
or i need to download any third party tool?
thanks in advance
naresh
i am preparing an asp.net application which is of like this
it will have a webpage,which consists of multiple tabs
when i click on each tab it will display different information in the same webpage.
my problem is how to create a multiple tab webpage
is there any control available in asp.net?
or i need to download any third party tool?
thanks in advance
naresh
i dont know of any third party tabs but when i need tabs i use iframes. with a form for each page you want in each then use javascript to change the page.
When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
•
•
Join Date: Sep 2007
Posts: 1,080
Reputation:
Solved Threads: 68
there are tabs via asp.net controls, but they are for IE and do not work well in orther browsers. Your best bet, if you wish to use tabs, is to either use AJAX methods or plain old Javascript. This way the user downloads all the information in the tabs on the same page, and you use javascript to dynamically hide divs, enable other divs, and set certain colors accordingly. This is best for cross-browser compatability, but requires coding on your end. If you wish to use the IE way with asp.net, then you will need to use asp:Menu controls and asp:View controls. Otherwise, follow a demo here from 4guysfromrolla
http://aspnet.4guysfromrolla.com/articles/092204-1.aspx
http://aspnet.4guysfromrolla.com/articles/092204-1.aspx
•
•
Join Date: Nov 2007
Posts: 18
Reputation:
Solved Threads: 0
hi kusno
can you please send me if you have any example .
as
SheSaidImaPregy has given a link which has tabs vertical in a page .but i need to display in horizantal format similar to this link http://www.abb.com/
i am trying to modify the same thing what SheSaidImaPregy had sent hope it works.
can you please send me if you have any example .
as
SheSaidImaPregy has given a link which has tabs vertical in a page .but i need to display in horizantal format similar to this link http://www.abb.com/
i am trying to modify the same thing what SheSaidImaPregy had sent hope it works.
My code is same as SheSaidImaPregy's link.
I use Anthem control, but you don't use Anthem, you could change it to ASP.Net control
<form runat="server' id="form1">
<table border="2" bordercolor="gray">
<tr>
<td style="width: 75px">
<anthem:Button ID="CmdIBD" runat="server" BorderStyle="Solid" BorderWidth="0px" Height="24px" Text="IBD" Width="104px" BackColor=Aquamarine Font-Bold="False" ForeColor="Blue" AutoUpdateAfterCallBack="True" /></td>
<td style="width: 73px">
<anthem:Button ID="CmdFX" runat="server" BorderStyle="Solid" BorderWidth="0px" Height="24px" Text="Forex" Width="104px" BackColor=Aquamarine Font-Bold="False" ForeColor="Blue" AutoUpdateAfterCallBack="True" OnClick="CmdFX_Click" /></td>
</tr>
</table>
<anthem:MultiView ID="MVBLS" runat="server" ActiveViewIndex="0" AutoUpdateAfterCallBack="True">
<anthem:View ID="VWIBD" runat="server">
<anthem
anel ID="Panel4" runat="server" BorderColor="Gray" BorderWidth="2px" Height="100%" Width="100%">
<anthem:GridView ID="GVIBDFunding" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" AutoUpdateAfterCallBack="True" BackColor="White"
BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" CaptionAlign="Top"
CellPadding="0" CellSpacing="1" DataSourceID="SDSIBDFunding" Font-Size="12px"
Font-Strikeout="False" Font-Underline="False" Height="1px" HorizontalAlign="Left"
Style="left: 0px; top: 383px" UpdateAfterCallBack="True" Width="120%">
<FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" Font-Italic="False" Font-Underline="False"
ForeColor="#E7E7FF" />
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:CommandField HeaderText="Select" InsertVisible="False" ShowCancelButton="False"
ShowSelectButton="True">
<itemstyle font-size="12px" forecolor="Blue" />
</asp:CommandField>
<asp:BoundField DataField="TransNo" HeaderText="Trans. No." SortExpression="TransNo" />
<asp:BoundField DataField="TransactionDate" HeaderText="Trans. Date" SortExpression="TransactionDate" DataFormatString="{0:yyyy-MM-dd}" HtmlEncode="false"/>
<asp:BoundField DataField="CustomerId" HeaderText="Cust. No" SortExpression="CustomerId" />
<asp:BoundField DataField="CustomerName" HeaderText="Cust. Name" SortExpression="CustomerName" />
<asp:BoundField DataField="CCY" HeaderText="CCY" SortExpression="CCY" />
<asp:BoundField DataField="Amount" HeaderText="Amount" SortExpression="Amount" DataFormatString="{0:N2}" HtmlEncode="False">
<itemstyle horizontalalign="Right" />
</asp:BoundField>
<asp:BoundField DataField="ApprovedBy" HeaderText="Approved By" SortExpression="ApprovedBy" />
<asp:BoundField DataField="CreatedBy" HeaderText="Created By" SortExpression="CreatedBy" />
<asp:BoundField DataField="TimeIn" HeaderText="Time In" SortExpression="TimeIn" DataFormatString="{0:HH:mm}" HtmlEncode="false"/>
<asp:BoundField DataField="TimeApproved" HeaderText="Time Approved" SortExpression="TimeApproved" DataFormatString="{0:HH:mm}" HtmlEncode="false"/>
<asp:BoundField DataField="OtherRemark" HeaderText="Other Remark" SortExpression="OtherRemark" />
</Columns>
<RowStyle BackColor="#DEDFDE" ForeColor="Black" />
</anthem:GridView>
</anthem
anel>
</anthem:View>
<anthem:View ID="VWFX" runat="server">
<anthem
anel ID="Panel3" runat="server" BorderColor="Gray" BorderWidth="2px" Height="100%" Width="100%">
<anthem:GridView ID="GVFXFunding" runat="server" AllowPaging="True" AllowSorting="True"
AutoUpdateAfterCallBack="True" BackColor="White" BorderColor="White" BorderStyle="Ridge"
BorderWidth="2px" CaptionAlign="Top" CellPadding="0" CellSpacing="1" DataSourceID="SDSFXFunding"
Font-Size="12px" Font-Strikeout="False" Font-Underline="False" Height="1px" HorizontalAlign="Left"
OnPageIndexChanging="GVFXFunding_PageIndexChanging" OnSelectedIndexChanged="GVFXFunding_SelectedIndexChanged"
OnSorting="GVFXFunding_Sorting" Style="left: 3px; top: 132px" UpdateAfterCallBack="True"
Width="135%">
<FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" Font-Italic="False" Font-Underline="False"
ForeColor="#E7E7FF" />
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
<EmptyDataRowStyle BackColor="Black" ForeColor="Red" Height="1px" />
<Columns>
<asp:CommandField HeaderText="Select" InsertVisible="False" ShowCancelButton="False"
ShowSelectButton="True">
<itemstyle font-size="12px" forecolor="Blue" />
</asp:CommandField>
<asp:BoundField DataField="TransNo" HeaderText="Trans. No." SortExpression="TransNo" />
<asp:BoundField DataField="TransactionDate" HeaderText="Trans. Date" SortExpression="TransactionDate" DataFormatString="{0:yyyy-MM-dd}" HtmlEncode="false" />
<asp:BoundField DataField="DealNumber" HeaderText="Reff. No." SortExpression="DealNumber" />
<asp:BoundField DataField="CustomerName" HeaderText="Cust. Name" SortExpression="CustomerName" />
<asp:BoundField DataField="BuyCCY" HeaderText="Buying CCY" SortExpression="BuyCCY" />
<asp:BoundField DataField="BuyAmount" HeaderText="Buying Amt" SortExpression="BuyAmount" DataFormatString="{0:N5}" HtmlEncode="False">
<itemstyle horizontalalign="Right" />
</asp:BoundField>
<asp:BoundField DataField="SellCCY" HeaderText="Selling CCY" SortExpression="SellCCY" />
<asp:BoundField DataField="SellAmount" HeaderText="Selling Amt" SortExpression="SellAmount" DataFormatString="{0:N5}" HtmlEncode="False" />
<asp:BoundField DataField="ExchangeRate" HeaderText="Exc. Rate" SortExpression="ExchangeRate" DataFormatString="{0:N5}" HtmlEncode="False"/>
<asp:BoundField DataField="InternalRate" HeaderText="Intn. Rate" SortExpression="InternalRate" DataFormatString="{0:N5}" HtmlEncode="False"/>
<asp:BoundField DataField="ApprovedBy" HeaderText="Approved By" SortExpression="ApprovedBy" />
<asp:BoundField DataField="CreatedBy" HeaderText="Created By" SortExpression="CreatedBy" />
<asp:BoundField DataField="RejectedTotal" HeaderText="Rejected Total" SortExpression="RejectedTotal" />
<asp:BoundField DataField="LastRejectedBy" HeaderText="Last Rejected By" SortExpression="LastRejectedBy" />
<asp:BoundField DataField="LastRejectedReason" HeaderText="Last Rejected Reason"
SortExpression="LastRejectedReason" />
<asp:BoundField DataField="TimeIn" HeaderText="Time In" SortExpression="TimeIn" DataFormatString="{0:HH:mm}" HtmlEncode="false"/>
<asp:BoundField DataField="TimeApproved" HeaderText="Time Approved" SortExpression="TimeApproved" DataFormatString="{0:HH:mm}" HtmlEncode="false" />
<asp:BoundField DataField="OtherRemark" HeaderText="Other Remark" SortExpression="OtherRemark" />
</Columns>
<RowStyle BackColor="#DEDFDE" ForeColor="Black" />
</anthem:GridView>
</anthem
anel>
</anthem:View>
</anthem:MultiView>
</form>
Sub SetButtonColor (ByVal TransType As String)
If TransType = "FX" Then
CmdFX.BackColor = Drawing.Color.Yellow
CmdFX.Font.Bold = True
CmdFX.ForeColor = Drawing.Color.IndianRed
CmdIBD.BackColor = Drawing.Color.PaleTurquoise
CmdIBD.Font.Bold = False
CmdIBD.ForeColor = Drawing.Color.Blue
ElseIf TransType = "IBD" Then
CmdFX.BackColor = Drawing.Color.PaleTurquoise
CmdFX.Font.Bold = False
CmdFX.ForeColor = Drawing.Color.Blue
CmdIBD.BackColor = Drawing.Color.Yellow
CmdIBD.Font.Bold = True
CmdIBD.ForeColor = Drawing.Color.IndianRed
End If
End Sub
Protected Sub CmdFX_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CmdFX.Click
MVBLS.ActiveViewIndex = 1
SetButtonClick("FX")
FillFXData()
End Sub
Protected Sub CmdFX_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CmdFX.Click
MVBLS.ActiveViewIndex = 1
SetButtonClick ("FX")
FillIBDData()
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Page.SetFocus(Page)
Page.MaintainScrollPositionOnPostBack = True
If Not IsPostBack Then
MVBLS.ActiveViewIndex = 0
SetButtonColor ("IBD")
FillIBDData()
End If
End Sub
I use Anthem control, but you don't use Anthem, you could change it to ASP.Net control
<form runat="server' id="form1">
<table border="2" bordercolor="gray">
<tr>
<td style="width: 75px">
<anthem:Button ID="CmdIBD" runat="server" BorderStyle="Solid" BorderWidth="0px" Height="24px" Text="IBD" Width="104px" BackColor=Aquamarine Font-Bold="False" ForeColor="Blue" AutoUpdateAfterCallBack="True" /></td>
<td style="width: 73px">
<anthem:Button ID="CmdFX" runat="server" BorderStyle="Solid" BorderWidth="0px" Height="24px" Text="Forex" Width="104px" BackColor=Aquamarine Font-Bold="False" ForeColor="Blue" AutoUpdateAfterCallBack="True" OnClick="CmdFX_Click" /></td>
</tr>
</table>
<anthem:MultiView ID="MVBLS" runat="server" ActiveViewIndex="0" AutoUpdateAfterCallBack="True">
<anthem:View ID="VWIBD" runat="server">
<anthem
anel ID="Panel4" runat="server" BorderColor="Gray" BorderWidth="2px" Height="100%" Width="100%"><anthem:GridView ID="GVIBDFunding" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" AutoUpdateAfterCallBack="True" BackColor="White"
BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" CaptionAlign="Top"
CellPadding="0" CellSpacing="1" DataSourceID="SDSIBDFunding" Font-Size="12px"
Font-Strikeout="False" Font-Underline="False" Height="1px" HorizontalAlign="Left"
Style="left: 0px; top: 383px" UpdateAfterCallBack="True" Width="120%">
<FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" Font-Italic="False" Font-Underline="False"
ForeColor="#E7E7FF" />
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:CommandField HeaderText="Select" InsertVisible="False" ShowCancelButton="False"
ShowSelectButton="True">
<itemstyle font-size="12px" forecolor="Blue" />
</asp:CommandField>
<asp:BoundField DataField="TransNo" HeaderText="Trans. No." SortExpression="TransNo" />
<asp:BoundField DataField="TransactionDate" HeaderText="Trans. Date" SortExpression="TransactionDate" DataFormatString="{0:yyyy-MM-dd}" HtmlEncode="false"/>
<asp:BoundField DataField="CustomerId" HeaderText="Cust. No" SortExpression="CustomerId" />
<asp:BoundField DataField="CustomerName" HeaderText="Cust. Name" SortExpression="CustomerName" />
<asp:BoundField DataField="CCY" HeaderText="CCY" SortExpression="CCY" />
<asp:BoundField DataField="Amount" HeaderText="Amount" SortExpression="Amount" DataFormatString="{0:N2}" HtmlEncode="False">
<itemstyle horizontalalign="Right" />
</asp:BoundField>
<asp:BoundField DataField="ApprovedBy" HeaderText="Approved By" SortExpression="ApprovedBy" />
<asp:BoundField DataField="CreatedBy" HeaderText="Created By" SortExpression="CreatedBy" />
<asp:BoundField DataField="TimeIn" HeaderText="Time In" SortExpression="TimeIn" DataFormatString="{0:HH:mm}" HtmlEncode="false"/>
<asp:BoundField DataField="TimeApproved" HeaderText="Time Approved" SortExpression="TimeApproved" DataFormatString="{0:HH:mm}" HtmlEncode="false"/>
<asp:BoundField DataField="OtherRemark" HeaderText="Other Remark" SortExpression="OtherRemark" />
</Columns>
<RowStyle BackColor="#DEDFDE" ForeColor="Black" />
</anthem:GridView>
</anthem
anel></anthem:View>
<anthem:View ID="VWFX" runat="server">
<anthem
anel ID="Panel3" runat="server" BorderColor="Gray" BorderWidth="2px" Height="100%" Width="100%"><anthem:GridView ID="GVFXFunding" runat="server" AllowPaging="True" AllowSorting="True"
AutoUpdateAfterCallBack="True" BackColor="White" BorderColor="White" BorderStyle="Ridge"
BorderWidth="2px" CaptionAlign="Top" CellPadding="0" CellSpacing="1" DataSourceID="SDSFXFunding"
Font-Size="12px" Font-Strikeout="False" Font-Underline="False" Height="1px" HorizontalAlign="Left"
OnPageIndexChanging="GVFXFunding_PageIndexChanging" OnSelectedIndexChanged="GVFXFunding_SelectedIndexChanged"
OnSorting="GVFXFunding_Sorting" Style="left: 3px; top: 132px" UpdateAfterCallBack="True"
Width="135%">
<FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" Font-Italic="False" Font-Underline="False"
ForeColor="#E7E7FF" />
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
<EmptyDataRowStyle BackColor="Black" ForeColor="Red" Height="1px" />
<Columns>
<asp:CommandField HeaderText="Select" InsertVisible="False" ShowCancelButton="False"
ShowSelectButton="True">
<itemstyle font-size="12px" forecolor="Blue" />
</asp:CommandField>
<asp:BoundField DataField="TransNo" HeaderText="Trans. No." SortExpression="TransNo" />
<asp:BoundField DataField="TransactionDate" HeaderText="Trans. Date" SortExpression="TransactionDate" DataFormatString="{0:yyyy-MM-dd}" HtmlEncode="false" />
<asp:BoundField DataField="DealNumber" HeaderText="Reff. No." SortExpression="DealNumber" />
<asp:BoundField DataField="CustomerName" HeaderText="Cust. Name" SortExpression="CustomerName" />
<asp:BoundField DataField="BuyCCY" HeaderText="Buying CCY" SortExpression="BuyCCY" />
<asp:BoundField DataField="BuyAmount" HeaderText="Buying Amt" SortExpression="BuyAmount" DataFormatString="{0:N5}" HtmlEncode="False">
<itemstyle horizontalalign="Right" />
</asp:BoundField>
<asp:BoundField DataField="SellCCY" HeaderText="Selling CCY" SortExpression="SellCCY" />
<asp:BoundField DataField="SellAmount" HeaderText="Selling Amt" SortExpression="SellAmount" DataFormatString="{0:N5}" HtmlEncode="False" />
<asp:BoundField DataField="ExchangeRate" HeaderText="Exc. Rate" SortExpression="ExchangeRate" DataFormatString="{0:N5}" HtmlEncode="False"/>
<asp:BoundField DataField="InternalRate" HeaderText="Intn. Rate" SortExpression="InternalRate" DataFormatString="{0:N5}" HtmlEncode="False"/>
<asp:BoundField DataField="ApprovedBy" HeaderText="Approved By" SortExpression="ApprovedBy" />
<asp:BoundField DataField="CreatedBy" HeaderText="Created By" SortExpression="CreatedBy" />
<asp:BoundField DataField="RejectedTotal" HeaderText="Rejected Total" SortExpression="RejectedTotal" />
<asp:BoundField DataField="LastRejectedBy" HeaderText="Last Rejected By" SortExpression="LastRejectedBy" />
<asp:BoundField DataField="LastRejectedReason" HeaderText="Last Rejected Reason"
SortExpression="LastRejectedReason" />
<asp:BoundField DataField="TimeIn" HeaderText="Time In" SortExpression="TimeIn" DataFormatString="{0:HH:mm}" HtmlEncode="false"/>
<asp:BoundField DataField="TimeApproved" HeaderText="Time Approved" SortExpression="TimeApproved" DataFormatString="{0:HH:mm}" HtmlEncode="false" />
<asp:BoundField DataField="OtherRemark" HeaderText="Other Remark" SortExpression="OtherRemark" />
</Columns>
<RowStyle BackColor="#DEDFDE" ForeColor="Black" />
</anthem:GridView>
</anthem
anel></anthem:View>
</anthem:MultiView>
</form>
Sub SetButtonColor (ByVal TransType As String)
If TransType = "FX" Then
CmdFX.BackColor = Drawing.Color.Yellow
CmdFX.Font.Bold = True
CmdFX.ForeColor = Drawing.Color.IndianRed
CmdIBD.BackColor = Drawing.Color.PaleTurquoise
CmdIBD.Font.Bold = False
CmdIBD.ForeColor = Drawing.Color.Blue
ElseIf TransType = "IBD" Then
CmdFX.BackColor = Drawing.Color.PaleTurquoise
CmdFX.Font.Bold = False
CmdFX.ForeColor = Drawing.Color.Blue
CmdIBD.BackColor = Drawing.Color.Yellow
CmdIBD.Font.Bold = True
CmdIBD.ForeColor = Drawing.Color.IndianRed
End If
End Sub
Protected Sub CmdFX_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CmdFX.Click
MVBLS.ActiveViewIndex = 1
SetButtonClick("FX")
FillFXData()
End Sub
Protected Sub CmdFX_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CmdFX.Click
MVBLS.ActiveViewIndex = 1
SetButtonClick ("FX")
FillIBDData()
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Page.SetFocus(Page)
Page.MaintainScrollPositionOnPostBack = True
If Not IsPostBack Then
MVBLS.ActiveViewIndex = 0
SetButtonColor ("IBD")
FillIBDData()
End If
End Sub
Last edited by Kusno; Nov 6th, 2007 at 6:49 am. Reason: Edit some code
there seems to be alot of processing on the server to simly just change these pages why not use CSS css tabs with iframes then just load your aspx page into the iframe on tab change, not only would it be complient across all modern browsers but it would save pointless postbacks.
When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
![]() |
Similar Threads
- Post edits - not showing up (DaniWeb Community Feedback)
- TWERQ.com Tabbed search results. Start TWERQn! (Website Reviews)
- Multiple images to a single bmp/jpg image (Visual Basic 4 / 5 / 6)
- counting strings (C)
- How do I make multiple tabs in CSS? (ASP)
- Firefox tabbed home pages (Web Browsers)
- printer problems (Windows 95 / 98 / Me)
Other Threads in the ASP.NET Forum
- Previous Thread: Checkbox
- Next Thread: Error 302 "Object moved to here" from Search Engine Spiders
| Thread Tools | Search this Thread |
.net 3.5 activexcontrol ajax alltypeofvideos appliances asp asp.net bc30451 beginner bottomasp.net box browser businesslogiclayer button c# cac checkbox class click commonfunctions countryselector dataaccesslayer database datagrid datagridview datagridviewcheckbox datalist deployment development dgv dialog dropdownlist dropdownmenu dynamic dynamically edit embeddingactivexcontrol fileuploader fill findcontrol flash formatdecimal formview gridview gudi iis javascript list listbox microsoft mono mouse mssql nameisnotdeclared news novell numerical opera panelmasterpagebuttoncontrols problem radio redirect registration relationaldatabases reportemail save schoolproject search security sessionvariables silverlight smartcard smoobjects software sql sql-server sqlserver2005 ssl suse textbox tracking treeview unauthorized validatedate validation vb.net video videos vista visualstudio vs2008 web webapplications webdevelopemnt webdevelopment webprogramming webservice xsl youareanotmemberofthedebuggerusers






