I have created a table programatically which displays images from the database in thumbail fashion.
for (int i = 1; i <= rows; i++) {// Create a new row and add it to the table. TableRow tRow =new TableRow(); Table1.Rows.Add(tRow);for (int j = 0; j < cells; j++) {if (count >= 0) {// Create a new cell and add it to the row. TableCell tCell =new TableCell(); tRow.Cells.Add(tCell); HyperLink link =new HyperLink(); link.NavigateUrl ="~/" + images[count].FullImage; link.ImageUrl ="~/" + images[count].ThumbnailImage; tCell.Controls.Add(link); tCell.Controls.Add(new LiteralControl("<br><br><b>Title</b> : " + getproducts[count].Name +"<br>"));/*Add Checkout and add to cart Images */ HyperLink wishlistLink =new HyperLink(); wishlistLink.ImageUrl="~\\images\\Add_to_wish_list.gif"; HyperLink checkoutLink =new HyperLink(); checkoutLink.ImageUrl ="~\\images\\Add_to_my_cart.gif";/*Add the Images to the cells*/ tCell.Controls.Add(wishlistLink); tCell.Controls.Add(checkoutLink); } } }Now I want when user clicks on thumbnail it opens a modal popup extender and displays the full image with some other information. Someone can please let me know how to do it programatically using the Hyperlink I have ?
This should give you what you needed
link.Target="_blank";
http://www.startvbdotnet.com/aspsite/controls/linkbutton.aspx
You could have the hyperlink post back and then in the code behind call ModalPopupExtender1.Show() if you really need it to pop in a modal extender. Make sure to wrap you code that will be posting back inside an update panel for the best user experience.
Hi Thukralz,
thukralz:
Now I want when user clicks on thumbnail it opens a modal popup extender and displays the full image with some other information. Someone can please let me know how to do it programatically using the Hyperlink I have ?
You should create ModalPopupExtender and its associated Panel dynamically for each HyperLink and set the ModalPopupExtender's properties on the server side. But I don't think it is a good way for its low perfermance. The improved method is that we only use one ModalPopupExtender in a page and the ModalPopupExtender is activated when the HyperLink is fired by using Javascript functions.
<%@. 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
