<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<html>
<head>
<title>Nested MultiView Controls</title>
<link rel="stylesheet" href="/travel/shared/travel.css">
<script language="C#" runat="server" src="multiview1.cs"></script>
<script language="C#" runat="server" src="~/shared/fetchData_sql.cs" />
<script language="Javascript" src="/shared/css.js"></script>
</head>
<body>
<!-- #include virtual="~/shared/top.inc -->
<div class="header"><h3>Nested MultiView Controls</h3></div>
<!-- #include virtual="~/shared/viewsrc_top.inc" -->
<hr size=1 width=92%>
<form runat="server">
<table align="center" cellpadding=0 cellspacing=0 width=92% style="table-layout: fixed">
<tr align="center" valign="top">
<td width=25%>
<table width=96%>
<tr align="center" class="select"><td>Select Destination</td></tr>
</table>
<asp:gridview id="gvCities" runat="server"
datasourceid="destinations" datakeynames="Country,StateProvince,City"
width=96% cellpadding=3
autogeneratecolumns=false
showheader=false font-size=9pt
allowpaging pagesize=20
onSelectedIndexChanged="getSelected"
onPageIndexChanged="resetSelected">
<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>
<asp:multiview id="cityInfo" runat="server">
<asp:view id="overview" runat="server">
<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"
style="border-radius: 4%; box-shadow: 4px 4px 8px gray" /></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" ) %> />
</asp:view>
<asp:view id="quickfacts" runat="server">
<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>
</asp:view>
<asp:view id="images" runat="server">
<div class="header"><h3 style="color:maroon"><%# Eval ( "City" ) %> Images</h2></div></div>
<br>
<asp:multiview id="mvImages" runat="server" activeviewindex=0>
<asp:view id="viewThumbs" runat="server">
<asp:datalist id="destImages" runat="server" width=100%
cellpadding=5 horizontalalign="center"
repeatcolumns=5 repeatdirection="horizontal"
onItemDataBound="setImages"
onItemCommand="showViewZoom">
<itemstyle width=20%
verticalalign="top" horizontalalign="center" />
<itemtemplate>
<asp:imagebutton id="imgThumb" runat="server"
style="border: 1px inset" width=120
onerror="this.src='/travel/images/default-image.gif'" />
</itemtemplate>
</asp:datalist>
</asp:view>
<asp:view id="viewZoom" runat="server">
<center>
<asp:formview id="fvZoom" runat="server"
onDataBound="getZoom"
onItemCommand="showViewThumbs">
<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>
</asp:view>
</asp:multiview>
</asp:view>
<asp:view id="cityscape" runat="server">
<div class="header"><h3 style="color:maroon"><%# Eval ( "City" ) %> Neighborhoods</h2></div>
<br>
<asp:label id="lblCityscape" runat="server"
text=<%# Eval ( "Cityscape" ) %> />
</asp:view>
<asp:view id="Sights" runat="server">
<div class="header"><h3 style="color:maroon"><%# Eval ( "City" ) %> Tourism</h2></div>
<br>
<asp:label id="lblSights" runat="server"
text=<%# Eval ( "Sights" ) %> />
</asp:view>
</asp:multiview>
</itemtemplate>
</asp:formview>
</td></tr>
</table>
<asp:sqldatasource id="destinations" runat="server"
ConnectionString="<%$ ConnectionStrings:aspnet %>"
SelectCommand="SELECT Country, StateProvince, City FROM PopDests WHERE Country+City in ( SELECT DISTINCT Country+City FROM DestImages ) ORDER BY City" />
</form>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
<style type="text/css">
.select {
font: bold 13pt arial, verdana, sans serif; height: 30pt;
background:steelblue; color: beige }
.caption {
font: bold 13pt arial, verdana, sans serif; padding: 10;
background:darkslategray; color:palegoldenrod }
.shortdesc {
font: bold 11pt arial, verdana, sans serif; padding: 10;
background:darkslategray; color:palegoldenrod }
</style>
<script type="text/javascript">
<!--
function chkImageSize ( img ) {
if ( img.width > 700 ) img.width = 700;
if ( img.width < 450 ) img.width = 450;
}
//-->
</script>
</body>
</html>