<%@ 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 MultiView with the ToolBar WebControl</title>
<script language="C#" runat="server" src="~/shared/fetchData_oledb.cs"></script>
<script runat="server" src="multiview3.cs"></script>
<script runat="server">
MultiView mvCountry;
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
getCountry ( null, null );
}
if ( mvCountry == null ) mvCountry = ( MultiView ) fvCountry.FindControl ( "mvCountry" );
}
void getCountry ( Object src, EventArgs e ) {
string query = "SELECT * FROM Countries WHERE CountryCode = '" + lstCountries.SelectedItem.Value +
"' ORDER BY CountryName";
fvCountry.DataSource = fetchReader ( query, "destinations" );
fvCountry.DataBind ( );
mvCountry = ( MultiView ) fvCountry.FindControl ( "mvCountry" );
if ( ! IsPostBack ) mvCountry.ActiveViewIndex = 0;
else setActive ( null, null );
}
void setActive ( Object sender, EventArgs e ) {
switch ( checkGroup.SelectedCheckButton.ID ) {
case "btnOview" :
mvCountry.ActiveViewIndex = 0;
break;
case "btnFacts" :
mvCountry.ActiveViewIndex = 1;
break;
case "btnGeo" :
mvCountry.ActiveViewIndex = 2;
break;
}
}
</script>
<script language="JavaScript" src="/shared/css.js"></script>
<style type="text/css">
.tabs {
background: ghostwhite; border: 1px inset;
font-size: 9pt;
padding: 10 10 }
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 MultiView with the ToolBar WebControl</h2></div><hr size=1 width=92%>
<div align="center">
<form runat="server">
<table width=96%>
<tr align="center">
<td>
<ie:toolbar id="tb1" runat="server"
backcolor="aliceblue" width=0
defaultstyle="font-size: 9pt;
border: none;
padding-left: 5;
padding-right: 5;
background-image: url('/shared/images/toolbar/ofcxp/bg.gif')"
hoverstyle="background-image: none;
background-color: wheat;
border: 1px outset;
padding-left: 4;
padding-right: 4;
cursor: hand"
selectedstyle="background-image: none;
background-color: aliceblue;
border: 1px inset;
padding-left: 5;
padding-right: 5"
onbuttonclick="setActive" autopostback>
<ie:toolbarlabel text="Select Country:" />
<ie:toolbardropdownlist id="lstCountries" runat="server"
datatextfield="countryname" datavaluefield="countrycode"
onSelectedIndexChanged="getCountry" autopostback />
<ie:toolbarseparator />
<ie:toolbarcheckgroup id="checkGroup" forceselection>
<ie:toolbarcheckbutton id="btnOview" text="overview" />
<ie:toolbarcheckbutton id="btnFacts" text="quick facts" />
<ie:toolbarcheckbutton id="btnGeo" text="geography" />
</ie:toolbarcheckgroup>
</ie:toolbar>
</td></tr>
<tr align="center">
<td>
<asp:formview id="fvCountry" runat="server" width=100%
onDataBound="setCountryBindings">
<itemtemplate>
<div class="tabs">
<asp:multiview id="mvCountry" runat="server">
<asp:view id="overview" runat="server">
<asp:label id="lblIntro" runat="server"
text=<%# Eval ( "Introduction" ) %> />
</asp:view>
<asp:view id="quickfacts" runat="server">
<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>
</asp:view>
<asp:view id="geography" runat="server">
<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" ) %> />
</asp:view>
</asp:multiview>
</div>
</div>
</itemtemplate>
</asp:formview>
</td></tr>
</table>
</form>
</div>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>