<html>
<head>
<title>Using a MultiView within a Templated Control</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style type="text/css">
.tabs {
background: ghostwhite; border: 1px inset;
padding: 10 10}
.desc {
font:bold 11pt arial,verdana,sans-serif; background:khaki;
border:1px inset; padding:10; margin-bottom:10}
.features {
font-size:9pt; background:#efefef;
border:1px inset; padding-right:5; margin-bottom:10}
.specs {
font-size:10pt; background:beige;
border:1px inset; padding-right:5}
</style>
<script language="C#" runat="server">
void Page_Load ( object src, EventArgs e ) {
if ( ! IsPostBack ) {
lstPlans.SelectedIndex = 0;
lstPlans.DataBind ( );
}
}
void getPlans ( Object src, EventArgs e ) {
lstPlans.SelectedIndex = 0;
lstPlans.DataBind ( );
}
void getPlan ( object src, DataListCommandEventArgs e ) {
lstPlans.SelectedIndex = e.Item.ItemIndex;
lstPlans.DataBind ( );
MultiView planInfo = ( MultiView ) fvPlan.FindControl ( "planInfo" );
switch ( e.CommandName ) {
case "intro" :
View intro = ( View ) fvPlan.FindControl ( "intro" );
planInfo.SetActiveView ( intro );
break;
case "features" :
View features = ( View ) fvPlan.FindControl ( "features" );
planInfo.SetActiveView ( features );
break;
case "specs" :
View specs = ( View ) fvPlan.FindControl ( "specs" );
planInfo.SetActiveView ( specs );
break;
}
}
</script>
</head>
<body>
<!-- #include virtual="~/shared/top.inc -->
<div class="header"><h2>Using a <span class="hilite">MultiView</span> within a Templated Control</h2></div>
<!-- #include virtual="~/shared/viewsrc_top.inc" -->
<hr size=1 width=92%>
<form runat="server">
<center>
<table width=96%>
<tr align="center" valign="top" border>
<td width=30%>
<div>Design Type: <asp:dropdownlist id="typesSelect" runat="server"
datasourceid="planTypes" datatextfield="Type"
onselectedindexchanged="getPlans" autopostback /></div>
<br>
<asp:datalist id="lstPlans" runat="server"
datasourceid="plans"
datakeyfield="planId"
onItemCommand="getPlan">
<selecteditemstyle backcolor="palegoldenrod" />
<itemtemplate>
<table cellpadding=3 style="font-size: 10pt">
<tr>
<td valign="top">
<asp:imagebutton align="top" width=75 border=1 runat="server"
imageurl='<%# Eval ( "PlanId", "~/shared/images/plans/thumbs/{0}.jpg" ) %>' />
</td>
<td valign="top">
<asp:linkbutton runat="server" text='<%# Eval ( "Model" ) %>'
style="color:darkred" />
<br>
<%# Eval ( "Design" ) %>
</td></tr>
</table>
</itemtemplate>
<selecteditemtemplate>
<table cellpadding=3 style="font-size: 10pt">
<tr>
<td valign="top">
<asp:imagebutton align="top" width=75 border=1 runat="server"
imageurl='<%# Eval ( "PlanId", "~/shared/images/plans/thumbs/{0}.jpg" ) %>' />
</td>
<td valign="top">
<asp:label runat="server"
text='<%# Eval ( "Model" ) %>'
style="font: bold 10pt arial; color: navy" />
<br>
<asp:linkbutton runat="server"
text="Intro"
commandname="intro"
style="font-size:9pt" />
|
<asp:linkbutton runat="server"
text="Features"
commandname="features"
style="font-size:9pt" />
|
<asp:linkbutton runat="server"
text="Specs"
commandname="specs"
style="font-size:9pt" />
</td></tr>
</table>
</selecteditemtemplate>
</asp:datalist>
</td>
<td width=70%>
<asp:formview id="fvPlan" width=100% runat="server"
datasourceid="plan">
<itemtemplate>
<div class="header"><h3 style="color:maroon"><%# Eval ( "Model" ) %></h2></div>
<br>
<div class="tabs">
<asp:multiview id="planInfo" runat="server" activeviewindex=0>
<asp:view id="intro" runat="server">
<table width=96% align="center" cellpadding=10
style="background-color: whitesmoke; border: 2px outset">
<tr valign="top">
<td align="center" width=290>
<img width=290 runat="server"
src='<%# Eval ( "PlanID", "~/shared/images/plans/{0}.jpg" ) %>'
alt='<%# Eval ( "Model" ) %>'
style="border:1px inset">
</td>
<td>
<asp:detailsview id="dvPlans" runat="server"
width=90% align="center" cellpadding=3
datasourceid="details"
autogeneraterows=false
headertext="Plan Details">
<headerstyle font-bold horizontalalign="center"
backcolor="slategray" forecolor="khaki" />
<rowstyle backcolor="whitesmoke" />
<fields>
<asp:boundfield headertext="Design"
datafield="Design" />
<asp:boundfield headertext="PlanId"
datafield="PlanId" />
<asp:boundfield headertext="Area"
datafield="Area" />
<asp:boundfield headertext="Bedrooms"
datafield="Bedrooms" />
<asp:boundfield headertext="Baths"
datafield="Baths" />
<asp:boundfield headertext="Price"
datafield="Cost"
dataformatstring="{0:c}"
itemstyle-horizontalalign="right" />
</fields>
</asp:detailsview>
</td></tr>
</table></div>
</asp:view>
<asp:view id="features" runat="server">
<div class="desc"><%# Eval ( "Description" ) %></div>
<div class="features"><%# Eval ( "Features" ) %></div>
</asp:view>
<asp:view id="specs" runat="server">
<div class="specs"><%# Eval ( "Specs" ) %></div>
</asp:view>
</asp:multiview>
</div>
</itemtemplate>
</asp:formview>
</td></tr>
</table>
</center>
</form>
<asp:sqldatasource id="planTypes" runat="server"
ConnectionString="<%$ ConnectionStrings:plans %>"
ProviderName="System.Data.OleDb"
selectcommand="SELECT DISTINCT Type FROM Plans WHERE not Type=''"
datasourcemode="datareader" />
<asp:sqldatasource id="plans" runat="server"
ConnectionString="<%$ ConnectionStrings:plans %>"
ProviderName="System.Data.OleDb"
selectcommand="SELECT Type, PlanID, Model, Design FROM Plans"
filterexpression="Type='{0}'">
<filterparameters>
<asp:controlparameter controlid="typesSelect" propertyname="SelectedValue" />
</filterparameters>
</asp:sqldatasource>
<asp:sqldatasource id="plan" runat="server"
ConnectionString="<%$ ConnectionStrings:plans %>"
ProviderName="System.Data.OleDb"
selectcommand="SELECT * FROM Plans"
filterexpression="PlanId='{0}'">
<filterparameters>
<asp:controlparameter controlid="lstPlans" propertyname="SelectedValue" />
</filterparameters>
</asp:sqldatasource>
<asp:sqldatasource id="details" runat="server"
ConnectionString="<%$ ConnectionStrings:plans %>"
ProviderName="System.Data.OleDb"
selectcommand="SELECT Design, PlanId, Area, Bedrooms, Baths, Cost FROM Plans"
filterexpression="PlanId='{0}'">
<filterparameters>
<asp:controlparameter controlid="lstPlans" propertyname="SelectedValue" />
</filterparameters>
</asp:sqldatasource>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>