<%@ 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>Nested MultiPage Controls</title>
<script language="C#" runat="server" src="~/shared/fetchData_oledb.cs"></script>
<script runat="server">
// initialize datakeys container
DataKey keys;
// initialize datakeys
string country = "", state = "", city = "";
MultiPage cityInfo;
void Page_Load ( Object source, EventArgs e ) {
if ( ! IsPostBack ) {
gvCities.SelectedIndex = 0;
gvCities.DataBind ( );
getSelected ( null, null );
}
if ( cityInfo == null ) cityInfo = ( MultiPage ) fvCity.FindControl ( "cityInfo" );
}
void getSelected ( Object src, EventArgs e ) {
keys = gvCities.SelectedDataKey;
country = keys [ 0 ].ToString ( );
state = keys [ 1 ].ToString ( );
city = keys [ 2 ].ToString ( );
string query = "SELECT * FROM Cities WHERE CountryCode = '" + country +
( state != "" ? "' and StateProvince = '" + state : "" ) +
"' and City = '" + city + "'";
fvCity.DataSource = fetchReader ( query, "destinations" );
fvCity.DataBind ( );
cityInfo = ( MultiPage ) fvCity.FindControl ( "cityInfo" );
cityInfo.SelectedIndex = 0;
setButtons ( );
}
void setSelectedPage ( Object src, EventArgs e ) {
gvCities.SelectedIndex = 0;
gvCities.DataBind ( );
getSelected ( null, null );
}
public void setButtons ( ) {
btnNext.Enabled = true;
btnBack.Enabled = true;
if ( cityInfo.SelectedIndex == 0 ) btnBack.Enabled = false;
else if ( cityInfo.SelectedIndex == cityInfo.Controls.Count - 1 ) btnNext.Enabled = false;
}
public void nextClick ( object sender, EventArgs e ) {
if ( cityInfo.SelectedIndex < ( cityInfo.Controls.Count - 1 ) ) {
cityInfo.SelectedIndex ++;
setButtons ( );
}
}
public void backClick ( object sender, EventArgs e ) {
if ( cityInfo.SelectedIndex > 0 ) {
cityInfo.SelectedIndex --;
setButtons ( );
}
}
void showPageZoom ( object src, DataListCommandEventArgs e ) {
string query = "SELECT Caption, Url, Width, Credit, CreditLink, Supplier FROM DestImages WHERE Url = '" + e.CommandArgument + "'";
PageView pageZoom = ( PageView ) fvCity.FindControl ( "pageZoom" );
FormView fvZoom = ( FormView ) pageZoom.FindControl ( "fvZoom" );
fvZoom.DataSource = fetchReader ( query, "destinations" );
fvZoom.DataBind ( );
pageZoom.Activate ( );
}
void showPageThumbs ( object src, EventArgs e ) {
PageView pageThumbs = ( PageView ) fvCity.FindControl ( "pageThumbs" );
pageThumbs.Activate ( );
}
</script>
<script language="C#" runat="server" src="iemultipage1.cs"></script>
<script language="JavaScript" src="/shared/css.js"></script>
<style type="text/css">
p, li { font-size: 9pt }
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 }
.caption {
font: bold 10pt "Comic Sans MS", arial, verdana, sans serif; padding: 5 5 5 10;
background:darkslategray; color:palegoldenrod }
</style>
</head>
<body>
<!-- #include virtual="~/shared/top.inc -->
<div class="header"><h2>Nested MultiPage Controls</h2></div>
<hr size=1 width=92%>
<form runat="server">
<table align="center" cellpadding=0 cellspacing=0 width=98% style="table-layout: fixed">
<tr align="center" valign="top">
<td width=25%>
<table width=96% style="background-color: slategray; color: khaki; font: bold 9pt Comic Sans MS">
<tr height=20pt>
<td>Select Destination</td></tr>
</table>
<asp:gridview id="gvCities" runat="server" width=96%
datasourceid="destinations" datakeynames="Country,StateProvince,City"
autogeneratecolumns=false
showheader=false font-size=9pt
allowpaging pagesize=25
onSelectedIndexChanged="getSelected"
onPageIndexChanged="setSelectedPage">
<selectedrowstyle backcolor="lightgreen" />
<pagersettings
mode="nextpreviousfirstlast" />
<pagerstyle
backcolor="steelblue" forecolor="beige"
horizontalalign="right" />
<columns>
<asp:templatefield>
<itemtemplate>
<asp:linkbutton runat="server" commandname="select"
text='<%# Eval ( "City" ) %>' />
</itemtemplate>
</asp:templatefield>
</columns>
</asp:gridview>
</td>
<td width=75%>
<asp:button id="btnBack" runat="server" font-size=9pt
text="< Back" onclick="backClick" />
<asp:button id="btnNext" runat="server" font-size=9pt
text="Next >" onclick="nextClick" />
<asp:formview id="fvCity" runat="server" width=96%
onDataBound="setBindings">
<itemtemplate>
<ie:multipage id="cityInfo" runat="server">
<ie:pageview id="overview">
<div class="header"><h3 style="color:maroon"><%# Eval ( "City" ) %> Overview</h2></div>
<table id="tbllmgIntro" runat="server" align="center" cellspacing=0 visible=false>
<tr><td><div class="caption"><asp:label id="lblCaption"
runat="server" /></div></td></tr>
<tr><td align="center"><asp:image id="imgIntro" runat="server" /></div></td></tr>
<tr><td align="right"><asp:panel id="imgCredits" runat="server"
style="font:bold italic 9pt arial; color:navy; line-height:12pt" /></td></tr>
</table>
<asp:label id="lblIntro" runat="server"
text=<%# Eval ( "Introduction" ) %> />
</ie:pageview>
<ie:pageview id="quickfacts">
<div class="header"><h3 style="color:maroon"><%# Eval ( "City" ) %> Quick Facts</h2></div>
<br>
<table width=100% align="center" runat="server">
<tr align="center" valign="top">
<td width=55%>
<table class="qfacts" cellspacing=1 width=96%>
<col width=25%>
<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>TimeZone</th><td><%# Eval ( "TimeZone" ) %>
<asp:label id="lblDestTime" runat="server" /></td></tr>
</table></td>
<td width=45%>
<table class="qfacts" cellspacing=1 width=96%>
<col width=25%>
<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="images">
<div class="header"><h3 style="color:maroon"><%# Eval ( "City" ) %> Images</h2></div></div>
<br>
<ie:multipage id="mpImages" runat="server">
<ie:pageview id="pageThumbs">
<asp:datalist id="destImages" runat="server" width=100%
cellpadding=5 horizontalalign="center"
repeatcolumns=5 repeatdirection="horizontal"
onItemDataBound="setImages"
onItemCommand="showPageZoom">
<itemstyle width=20%
verticalalign="top" horizontalalign="center" />
<itemtemplate>
<asp:imagebutton id="imgThumb" runat="server"
style="border: 1px inset" width=75 />
</itemtemplate>
</asp:datalist>
</ie:pageview>
<ie:pageview id="pageZoom">
<center>
<asp:formview id="fvZoom" runat="server"
onDataBound="getZoom"
onItemCommand="showPageThumbs">
<itemtemplate>
<table id="tbllmgZoom" runat="server" align="center" cellspacing=0>
<tr><td><div class="caption"><asp:label id="lblCaption"
runat="server" /></div></td></tr>
<tr><td align="center"><asp:imagebutton id="imgZoom" runat="server"
style="border: 1px inset" /></div></td></tr>
<tr><td align="right"><asp:panel id="imgCredits" runat="server"
style="font:bold italic 9pt arial; color:navy; line-height:12pt" /></td></tr>
</table>
</itemtemplate>
</asp:formview>
</center>
</ie:pageview>
</ie:multipage>
</ie:pageview>
<ie:pageview id="cityscape">
<div class="header"><h3 style="color:maroon"><%# Eval ( "City" ) %> Neighborhoods</h2></div>
<br>
<asp:label id="lblCityscape" runat="server"
text=<%# Eval ( "Cityscape" ) %> />
</ie:pageview>
<ie:pageview id="Sights">
<div class="header"><h3 style="color:maroon"><%# Eval ( "City" ) %> Tourism</h2></div>
<br>
<asp:label id="lblSights" runat="server"
text=<%# Eval ( "Sights" ) %> />
</ie:pageview>
</ie:multipage>
</itemtemplate>
</asp:formview>
</td></tr>
</table>
<asp:accessdatasource id="destinations" runat="server"
datafile="~/app_data/destinations.mdb"
selectcommand="SELECT Country, StateProvince, City FROM PopularDestinations ORDER BY City" />
</form>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>