<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<%@ Register tagprefix="ie" namespace="Microsoft.Web.UI.WebControls" assembly="Microsoft.Web.UI.WebControls" %>
<html>
<head>
<title>Using the MultiPage with the TabStrip Control</title>
<script language="C#" runat="server" src="~/shared/fetchData_oledb.cs"></script>
<script runat="server" src="iemultipage_tabstrip.cs"></script>
<script runat="server">
void Page_Load ( Object source, EventArgs e ) {
if ( ! IsPostBack ) {
string query = "SELECT CountryCode, CountryName FROM Countries ORDER BY CountryName";
lstCountries.DataSource = fetchReader ( query, "destinations" );
lstCountries.DataBind ( );
}
// initialize selection
getCountryInfo ( null, null );
}
void getCountryInfo ( Object src, EventArgs e ) {
string query = "SELECT * FROM Countries WHERE CountryCode = '" + lstCountries.SelectedValue +
"' ORDER BY CountryName";
fvCountryInfo.DataSource = fetchReader ( query, "destinations" );
fvCountryInfo.DataBind ( );
}
</script>
<script language="JavaScript" src="/shared/css.js"></script>
<style type="text/css">
.tabs {
background: ghostwhite; border: 1px inset }
sup { font-size: 6pt }
table { border-color: whitesmoke }
table.qfacts { font-size: 9pt }
table.qfacts th {
background-color: slategray; color: beige; font-style: italic; vertical-align: top;
text-align: right; white-space: no-wrap; padding: 5px }
table.qfacts td {
background-color: whitesmoke; vertical-align: top; padding: 5px }
</style>
</head>
<body>
<!-- #include virtual="~/shared/top.inc -->
<div class="header"><h2>Using the MultiPage with the TabStrip Control</h2></div><hr size=1 width=92%>
<div align="center">
<form runat="server">
<table align="center" cellpadding=3>
<tr>
<td>Select Country:
<asp:dropdownlist id="lstCountries" runat="server"
datatextfield="countryname" datavaluefield="countrycode"
onSelectedIndexChanged="getCountryInfo" autopostback /></td></tr>
</table>
<br>
<asp:formview id="fvCountryInfo" runat="server"
width=96% enableviewstate=false
onDataBound="setCountryBindings">
<itemtemplate>
<div class="tabs">
<ie:tabstrip id="tabsDest" runat="server"
targetid="destInfo" width=100% align="center"
tabdefaultstyle="background-color:steelblue; height:30;
font-weight:bold; font-size:9pt; color:beige; text-align:center"
tabhoverstyle="background-color:maroon; color:khaki"
tabselectedstyle="background-color:ghostwhite; color:maroon">
<ie:tab text="Overview" />
<ie:tab text="Quick Facts" />
<ie:tab text="Geography" />
</ie:tabstrip>
<div style="padding: 10 10">
<ie:multipage id="destInfo" runat="server" style="font-size: 9pt">
<ie:pageview id="overview">
<asp:label id="lblIntro" runat="server"
text=<%# Eval ( "Introduction" ) %> />
</ie:pageview>
<ie:pageview id="quickfacts">
<table width=100% align="center" runat="server">
<tr align="center" valign="top">
<td width=55%>
<table class="qfacts" cellspacing=1>
<tr><th>CountryCode</th><td><%# Eval ( "CountryCode" ) %></td></tr>
<tr><th>LongForm</th><td><%# Eval ( "LongName" ) %></td></tr>
<tr><th>LocalForm</th><td><%# Eval ( "LocalLongName" ) %></td></tr>
<tr><th>Government</th><td><%# Eval ( "Government" ) %></td></tr>
<tr><th>Capital</th><td><%# Eval ( "Capital" ) %></td></tr>
<tr><th>Currency</th><td><%# Eval ( "Currency" ) %></td></tr>
<tr><th>TimeZone</th><td><%# Eval ( "TimeZone" ) %>
<asp:label id="lblDestTime" runat="server" /></td></tr>
</table></td>
<td width=45%>
<table class="qfacts" cellspacing=1>
<tr><th>Total Area</th><td align="right">
<%# Eval ( "Area", "{0:n1} km<sup>2</sup>" ) %></td></tr>
<asp:panel id="pnlLandWater" visible=false runat="server">
<tr><th>Land</th><td align="right">
<%# Eval ( "Land", "{0:n1} km<sup>2</sup>" ) %></td></tr>
<tr><th>Water</th><td align="right">
<%# Eval ( "Water", "{0:n1} km<sup>2</sup>" ) %></td></tr>
</asp:panel>
<tr><th>High Point</th><td><%# Eval ( "HighPoint" ) %>
<%# Eval ( "HighElevation", " ~ {0:n1} m" ) %></td></tr>
<tr><th>Low Point</th><td><%# Eval ( "LowPoint" ) %>
<%# Eval ( "LowElevation", " ~ {0:n1} m" ) %></td></tr>
<tr><th>Population</th><td><%# Eval ( "Population", "{0:n0}" ) %>
( <%# Eval ( "Density", "{0:n1}" ) %> / km<sup>2</sup> )</td></tr>
</table></td></tr>
</table>
</ie:pageview>
<ie:pageview id="geography">
<asp:label id="lblLocation" runat="server"
text=<%# Eval ( "Location" ) %> />
<p class="small"><asp:hyperlink id="destMapLink" runat="server"
target="maps">
<asp:image id="destMap" runat="server" /></asp:hyperlink></p>
<p class="small" style="text-align: right"><i><asp:label id="srcMap" runat="server" /></i></p>
<asp:label id="lblGeography" runat="server"
text=<%# Eval ( "Geography" ) %> />
</ie:pageview>
</ie:multipage>
</div>
</div>
</itemtemplate>
</asp:formview>
</form>
</div>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>