Hi I have a DataList that populates from an SQL datasource. One control in the DataList is an image whose ImageUrl i am currently setting as follows:
protected void dlItems_ItemDataBound(object sender, DataListItemEventArgs e)
{
Label lblItemID = (Label)e.Item.FindControl("lblItemID");
Image imgItem = (Image)e.Item.FindControl("imgItem");imgItem.ImageUrl ="~/Images/Items/" + lblItemID.Text +".jpg";
}
I want to be able to click the image and get a modal popup which displays a large view of the image. I have wrapped the image (imgItem) in a LinkButton. Heres the code:
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script runat="server">
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public void SetLargeImagePath(int contextKey)
{
imgLargeImage.ImageUrl = "~/Images/Items/" + contextKey.ToString() + ".jpg";
}
</script>
<div>
<asp:DataList ID="dlItems" runat="server" DataKeyField="pkiItemID" Width="100%" OnItemDataBound="dlItems_ItemDataBound">
<ItemTemplate>
<asp:Label ID="lblItemID" runat="server" Text='<%# Eval("pkiItemID")%>' Visible="False" CssClass="ItemText"></asp:Label>
<asp:Label ID="bSpecialOfferLabel" runat="server" Text='<%# Eval("bSale")%>' Visible="False" CssClass="ItemText"></asp:Label>
<table width="100%" class="Table">
<tr>
<td rowspan="6" valign="top">
<asp:LinkButton ID="lnkImage" runat="server">
<asp:Image ID="imgItem" runat="server" Width="150px" AlternateText="Click for a larger view" />
</asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="lnkImage" PopupControlID="pnlLargeImage"
BackgroundCssClass="modalBackground"
OkControlID="OkButton" DynamicControlID="Label1" DynamicContextKey='<%# Eval("pkiItemID")%>' DynamicServiceMethod="SetLargeImagePath" >
</cc1:ModalPopupExtender>
</td>
<td style="width: 104px; padding-left: 5px;"><h2>Title:</h2></td>
<td><asp:Label ID="szTitleLabel" runat="server" Text='<%# Eval("szTitle")%>' CssClass="ItemText"></asp:Label></td>
<td style="width: 112px" rowspan="6" valign="middle">
</td>
</tr>
<tr>
<td style="width: 104px; padding-left: 5px;"><h2>Type:</h2></td>
<td><asp:Label ID="szItemTypeLabel" runat="server" Text='<%# Eval("szItemType")%>' CssClass="ItemText"></asp:Label></td>
</tr>
<tr>
<td style="width: 104px; padding-left: 5px;"><h2>Status:</h2></td>
<td><asp:Label ID="szItemStatusLabel" runat="server" Text='<%# Eval("szItemStatus")%>' CssClass="ItemText"></asp:Label></td>
</tr>
<tr>
<td style="width: 104px; padding-left: 5px;"><h2>Description:</h2></td>
<td><asp:Label ID="szDescriptionLabel" runat="server" Text='<%# Eval("szDescription")%>' CssClass="ItemText"></asp:Label></td>
</tr>
<tr>
<td style="width: 104px; padding-left: 5px;"><h2>Price:</h2></td>
<td><asp:Label ID="mPriceLabel" runat="server" Text='<%# String.Format("{0:c}", Eval("mPrice"))%>' CssClass="ItemText"></asp:Label></td>
</tr>
<tr>
<td style="width: 104px; padding-left: 5px;"><h2><asp:Label ID="mOfferPriceLabelStatic" runat="server" Text="Offer Price:"></asp:Label></h2></td>
<td><asp:Label ID="mOfferPriceLabel" runat="server" Text='<%# String.Format("{0:c}", Eval("mSalePrice"))%>' CssClass="ItemText"></asp:Label></td>
</tr>
<tr>
<td align="center" colspan="4">
<asp:Button ID="btnAddToBasket" runat="server" CssClass="Button" Text="Add To Basket" />
<asp:Button ID="btnBuyNow" runat="server" CssClass="Button" Text="Buy Now" /></td>
</tr>
</table>
<br />
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="dlItemsDataSource" runat="server" CancelSelectOnNullParameter="False" ConnectionString="<%$ ConnectionStrings:ConnectionString%>" SelectCommand="spREAD_tblItems" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:Parameter Name="pkiItemID" Type="Int32" />
<asp:Parameter DefaultValue="BRACELET" Name="fkiItemTypeShortText" Type="String" />
<asp:Parameter DefaultValue="FORSALE" Name="fkiItemStatusShortText" Type="String" />
<asp:Parameter DefaultValue="True" Name="bPublic" Type="Boolean" />
<asp:Parameter Name="bSale" Type="Boolean" />
<asp:Parameter Name="mPrice" Type="Decimal" />
</SelectParameters>
</asp:SqlDataSource>
</div>
<asp:Panel ID="pnlLargeImage" runat="server" Width="50%">
<asp:Panel ID="pnlHeader" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black" HorizontalAlign="Center" Width="100%">
<div>
<p>Larger view of item</p>
</div>
</asp:Panel>
<div>
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Image ID="imgLargeImage" runat="server" Width="200px" />
<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="OK" />
</p>
</div>
</asp:Panel>
</asp:Content>
This currently will load the ModalPopup and give Label1 the value of the pkiItemID, so i am successfully getting the item ID and passing it to the ModalPopup.
The problem is that the ImageURL is not being set. Oddly the SetLargeImagePath() method does not appear to run (breakpoints are ignored), although the Label1 value is being set??
Does anyone have any ideas how to get the image to appear in the ModalPopup?
Many thanks
Hi Assimalyst,
Assimalyst:
<script runat="server">
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public void SetLargeImagePath(int contextKey)
{
imgLargeImage.ImageUrl = "~/Images/Items/" + contextKey.ToString() + ".jpg";
}
</script>
Please contextKey should be a string type. For example, public void SetLargeImagePath(string contextKey){};
We suggest that you should use a debugging tool such as Web Development Helper or Fildder etc.
I want to be able to click the image and get a modal popup which displays a large view of the image.
Here is a sample which implement on the client side.
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Change Picture</title> <style> .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#FFD9D5; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } </style></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager><asp:Image ID="Image1" runat="server" ImageUrl="~/pic/upg_Business.jpg" imgUrl="../pic/upg_HomePremium.jpg" onclick="changePicture(event.srcElement.imgUrl)"/><asp:Image ID="Image2" runat="server" ImageUrl="~/pic/upg_HomeBasic.jpg" imgUrl="../pic/upg_Ultimate.jpg" onclick="changePicture(event.srcElement.imgUrl)"/> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="200px" Width="300px" style="display:none"> <asp:Image ID="Image3" runat="server" ImageUrl="~/pic/AJAX.gif"/> <asp:Button ID="Button2" runat="server" Text="Cancel" /> </asp:Panel> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" PopupControlID="Panel1" CancelControlID="Button2"> </ajaxToolkit:ModalPopupExtender> <div style="display:none"> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> <script type="text/javascript" language="javascript"> function changePicture(imgUrl){ $get("<%=Image3.ClientID%>").src = imgUrl; $get("<%=Button1.ClientID%>").click(); } </script> </div> </form></body></html>I hope this help.
Best regards,
Jonathan
