<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<html>
<head>
<title>GridView ImageField Example</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<script language="C#" runat="server" src="fetchData_oledb.cs" />
<style type="text/css">
.desc {
font:bold 12pt arial,verdana,sans-serif; background:khaki;
border:1px inset; padding:10; margin-bottom:10}
.features {
font-size:10pt; 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 getSelected ( Object src, EventArgs e ) {
string id = myGrid.SelectedDataKey.Value.ToString ( );
string query = "Select* FROM Plans where PlanID = '" + id + "'";
planDetails.DataSource = fetchReader ( query, "plans" );
planDetails.DataBind ( );
ShowHidePanel ( null, null );
}
void ShowHidePanel ( Object src, EventArgs e ) {
selectPanel.Visible = ! ( selectPanel.Visible );
detailsPanel.Visible = ! ( detailsPanel.Visible );
}
</script>
</head>
<body>
<!-- #include virtual="~/shared/top.inc" -->
<div class="header"><h2>GridView <span class="hilite">ImageField</span> Example</h2></div>
<hr size=1 width=92%>
<div align="center">
<form runat="server">
<asp:panel id="selectPanel" runat="server">
Select Design Type: <asp:dropdownlist id="typesSelect" runat="server"
datasourceid="planTypes" datatextfield="Type" autopostback />
<p>
<asp:gridview id="myGrid" runat="server"
datasourceid="plans" datakeynames="planId"
width=80% cellpadding=3 gridlines="horizontal"
autogeneratecolumns=false
allowpaging pagesize=7
onSelectedIndexChanged="getSelected">
<headerstyle backcolor="slategray" forecolor="khaki"
font-name="Comic Sans MS" font-bold />
<selectedrowstyle backcolor="lightgreen" />
<pagersettings
mode="nextpreviousfirstlast" />
<pagerstyle
backcolor="steelblue" forecolor="beige"
horizontalalign="right" />
<columns>
<asp:imagefield dataimageurlfield="PlanID"
dataimageurlformatstring = "~/shared/images/plans/thumbs/{0}.jpg"
dataalternatetextfield="Model"
readonly="true">
<controlstyle width=75
borderwidth=1 borderstyle="inset" />
</asp:imagefield>
<asp:templatefield headertext="Choose your dream home">
<itemtemplate>
<asp:linkbutton runat="server" commandname="select"
text='<%# Eval ( "Model" ) %>' />
</itemtemplate>
</asp:templatefield>
<asp:boundfield headertext="Avg. Cost To Build"
datafield="Cost"
htmlencode=false
dataformatstring="{0:c}"
itemstyle-horizontalalign="right" />
</columns>
</asp:gridview>
<asp:accessdatasource id="planTypes" runat="server"
datafile="~/app_data/plans.mdb"
selectcommand="SELECT DISTINCT Type FROM Plans WHERE not Type=''"
datasourcemode="DataReader" />
<asp:accessdatasource id="plans" runat="server"
datafile="~/app_data/plans.mdb"
selectcommand="SELECT Type, PlanID, Model, Cost FROM Plans"
filterexpression="Type='{0}'">
<filterparameters>
<asp:controlparameter controlid="typesSelect" propertyname="SelectedValue" />
</filterparameters>
</asp:accessdatasource>
</asp:panel>
<asp:panel id="detailsPanel" visible=false runat="server">
<div class="small"><asp:linkbutton onClick="ShowHidePanel" text="Back To List" runat="server" /></div>
<p>
<asp:formview id="planDetails" width=95% runat="server">
<itemtemplate>
<table width=100%>
<tr valign="top">
<td><div class="header"><h3 style="color:maroon"><%# Eval ( "Model" ) %></h2></div></td>
<td align="right"><div class="header"><h2>Plan # <%# Eval ( "PlanID" ) %></h2></div></td></tr>
</table>
<table width=100% cellpadding=10 style="background:ddd; 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">
<p><!-- spacer --></p>
<table width=90% class="data" cellspacing=0
style="font-size:8pt; text-align:center; border:1px inset">
<tr><th><%# Eval ( "Design" ) %></th></tr>
<tr><td><%# Eval ( "Area" ) %> ft<sup>2</sup>, <%# Eval ( "Bedrooms" ) %> Bedrooms, <%# Eval ( "Baths" ) %> Baths
<p>National Average Cost to Build: <br>
<b style="color:maroon"><%# Eval ( "Cost", "{0:c}" ) %></b></td></tr>
</table>
</td>
<td>
<div class="desc"><%# Eval ( "Description" ) %></div>
<div class="features"><%# Eval ( "Features" ) %></div>
<div class="specs"><%# Eval ( "Specs" ) %></div>
</td></tr>
</table>
</itemtemplate>
</asp:formview>
<p>
<div class="small"><asp:linkbutton onClick="ShowHidePanel" text="Back To List" runat="server" /></div>
</asp:panel>
</form>
</div>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>