UpdatePanel and ImageButton

I have several ImageButtons (thumbnails) that when clicked will update the full size version of the thumbnail in an updatepanel. When the imagebutton is clicked I need to pass a value indicating the path of the picture.

When I remove the onClick event from the ImageButton and replace it with CommandName, the updatepanel does not get updated.

Is this the correct way to do this and I'm just missing something small or is this completely wrong? Thanks in advance.

ASPX Page:

1<%@dotnet.itags.org. Page Language="C#" MasterPageFile="~/Default.master" AutoEventWireup="true" CodeFile="test.aspx.cs"2 Inherits="Photos_BirthdayTrip2005_test" Title="Untitled Page" %>34<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="Server">5 <asp:ImageButton ID="ImageButton001" runat="server" ImageUrl="~/Photos/BirthdayTrip2005/Thumbnails/BirthdayTrip2005001.jpg"6 CommandName="FindPhoto" CommandArgument="~/Photos/BirthdayTrip2005/BirthdayTrip2005001.jpg" />7 <asp:ImageButton ID="ImageButton002" runat="server" ImageUrl="~/Photos/BirthdayTrip2005/Thumbnails/BirthdayTrip2005002.jpg"8 CommandName="FindPhoto" CommandArgument="~/Photos/BirthdayTrip2005/BirthdayTrip2005002.jpg" />9 <asp:UpdatePanel ID="UpdatePanel1" runat="server">10 <ContentTemplate>11 <asp:Image ID="LargePhoto" ImageUrl="" runat="server" />12 </ContentTemplate>13 <Triggers>14 <asp:AsyncPostBackTrigger ControlID="ImageButton001" />15 <asp:AsyncPostBackTrigger ControlID="ImageButton002" />16 </Triggers>17 </asp:UpdatePanel>18 <asp:UpdateProgress ID="UpdateProgress1" runat="server">19 <ProgressTemplate>20 Loading...</ProgressTemplate>21 </asp:UpdateProgress>22</asp:Content>23

CODE BEHIND:

1using System;2using System.Data;3using System.Configuration;4using System.Collections;5using System.Web;6using System.Web.Security;7using System.Web.UI;8using System.Web.UI.WebControls;9using System.Web.UI.WebControls.WebParts;10using System.Web.UI.HtmlControls;1112public partialclass Photos_BirthdayTrip2005_test : System.Web.UI.Page13{14protected void Page_Load(object sender, EventArgs e)15 {1617 }1819protected void FindPhoto(object sender, CommandEventArgs e)20 {21 LargePhoto.ImageUrl = e.CommandArgument.ToString();22 }23}

Hi There,

You shouldn't replaceOnClick toCommandName as they are not the same thing.

OnClick is the event and CommandName is the property.

For more information, have a look at this article:

http://codeidol.com/asp/asp.net-illustrated/Web-Site-Navigation-Techniques/Navigation-with-LinkButton-Controls/

Thank you that worked. For some idiotic reason I had CommandName and OnCommand as the same thing in my head; obviously not.

That link has some other useful goodies as well, thanks for that.

Working Source:

1<%@. Page Language="C#" MasterPageFile="~/Default.master" AutoEventWireup="true" CodeFile="test.aspx.cs"2 Inherits="Photos_BirthdayTrip2005_test" Title="Untitled Page" %>34<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="Server">5 <asp:ImageButton ID="ImageButton001" runat="server" ImageUrl="~/Photos/BirthdayTrip2005/Thumbnails/BirthdayTrip2005001.jpg"6 CommandArgument="~/Photos/BirthdayTrip2005/BirthdayTrip2005001.jpg" OnCommand="LoadPhoto" />7 <asp:ImageButton ID="ImageButton002" runat="server" ImageUrl="~/Photos/BirthdayTrip2005/Thumbnails/BirthdayTrip2005002.jpg"8 CommandArgument="~/Photos/BirthdayTrip2005/BirthdayTrip2005002.jpg" OnCommand="LoadPhoto" />9 <asp:UpdatePanel ID="UpdatePanel1" runat="server">10 <ContentTemplate>11 <asp:Label ID="TestLabel" Text="Test Label" runat="Server" />12 <asp:Image ID="LargePhoto" ImageUrl="" runat="server" />13 </ContentTemplate>14 <Triggers>15 <asp:AsyncPostBackTrigger ControlID="ImageButton001" />16 <asp:AsyncPostBackTrigger ControlID="ImageButton002" />17 </Triggers>18 </asp:UpdatePanel>19 <asp:UpdateProgress ID="UpdateProgress1" runat="server">20 <ProgressTemplate>21 Loading...</ProgressTemplate>22 </asp:UpdateProgress>23</asp:Content>24

1using System;2using System.Data;3using System.Configuration;4using System.Collections;5using System.Web;6using System.Web.Security;7using System.Web.UI;8using System.Web.UI.WebControls;9using System.Web.UI.WebControls.WebParts;10using System.Web.UI.HtmlControls;1112public partialclass Photos_BirthdayTrip2005_test : System.Web.UI.Page13{14protected void Page_Load(object sender, EventArgs e)15 {1617 }1819protected void LoadPhoto(Object sender, CommandEventArgs e)20 {21 TestLabel.Text ="Command Argument: " + e.CommandArgument;22 LargePhoto.ImageUrl = e.CommandArgument.ToString();23 }24}25

No probs, it happened to me too

I thought I was done. The problem I mentioned above is fixed however my end goal is not complete. The code snippet above was just from a test page that I was working on. The updatepanel lives inside a div tag with id="FullImage" this div's visibility is controlled through an AnimationExtender. In a nutshell, you click on a thumbnail, the thumbnail loads the full version of the image in the update panel, and the update panel becomes visible via the AnimationExtender. The problem is that I have to change the TargetControlID and the AnimationTarget(at the bottom of closeAnimation to make the thumbnail clickable again) when thumbnail is clicked. My LoadPhoto method has one extra line to care of the TargetControlID:

1protected void LoadPhoto(Object sender, CommandEventArgs e)2 {3 OpenAnimation.TargetControlID = e.CommandName.ToString();4 LargePhoto.ImageUrl = e.CommandArgument.ToString();5 }

This, however, does not work. If I click on ImageButton002 nothing happens; ImageButton001 is hardcoded otherwise the compiler complains. At any rate, I guess the question is whether I can change the TargetControlID or any other properties inside of the AnimationExtender on the fly.

Below is the aspx file. Thanks in advance.

1<%@. Page Language="C#" MasterPageFile="~/Default.master" AutoEventWireup="true" CodeFile="BirthdayTrip2005.aspx.cs"2 Inherits="Photos_BirthdayTrip2005_Birthday2005" Title="Przemek Lach | Birthday Trip 2005" %>34<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="Server">5<!-- Buttons used to launch the animation -->6 <asp:ImageButton ID="ImageButton001" runat="server" ImageUrl="~/Photos/BirthdayTrip2005/Thumbnails/BirthdayTrip2005001.jpg"7 CommandArgument="~/Photos/BirthdayTrip2005/BirthdayTrip2005001.jpg" CommandName="ImageButton001"8 OnCommand="LoadPhoto" />9 <asp:ImageButton ID="ImageButton002" runat="server" ImageUrl="~/Photos/BirthdayTrip2005/Thumbnails/BirthdayTrip2005002.jpg"10 CommandArgument="~/Photos/BirthdayTrip2005/BirthdayTrip2005002.jpg" CommandName="ImageButton002"11 OnCommand="LoadPhoto" />12<!-- FullImage panel to be displayed as a flyout when the button is clicked -->13 <div id="FullImage" class="fullImage">14 <asp:LinkButton ID="CloseLinkButton" runat="server" OnClientClick="return false;"15 Text="X" ToolTip="Close" CssClass="closeLinkButton" />16 <div>17 <p>18 <asp:UpdatePanel ID="UpdatePanel1" runat="server">19 <ContentTemplate>20 <asp:Image ID="LargePhoto" ImageUrl="" runat="server" />21 </ContentTemplate>22 <Triggers>23 <asp:AsyncPostBackTrigger ControlID="ImageButton001" />24 <asp:AsyncPostBackTrigger ControlID="ImageButton002" />25 </Triggers>26 </asp:UpdatePanel>27 <asp:UpdateProgress ID="UpdateProgress1" runat="server">28 <ProgressTemplate>29 Loading...</ProgressTemplate>30 </asp:UpdateProgress>31 </p>32 </div>33 </div>34 <ajaxToolkit:AnimationExtender ID="OpenAnimation" runat="server" TargetControlID="ImageButton001">35 <Animations>36 <OnClick>37 <Sequence>38<%-- Disable the image so it can't be clicked again --%>39 <EnableAction Enabled="false" />4041<%-- Overlay the background --%>42 <StyleAction AnimationTarget="overlay" Attribute="height" Value="100%"/>43 <StyleAction AnimationTarget="overlay" Attribute="width" Value="100%"/>44 <StyleAction AnimationTarget="overlay" Attribute="margin-left" Value="0px"/>45 <StyleAction AnimationTarget="overlay" Attribute="visibility" Value="visible" />46 <FadeIn AnimationTarget="overlay" Duration=".2" />4748<%-- Bring up the full image --%>49 <StyleAction AnimationTarget="FullImage" Attribute="display" Value="block"/>50 <FadeIn AnimationTarget="FullImage" />51 <FadeIn AnimationTarget="CloseLinkButton" />52 </Sequence>53 </OnClick>54 </Animations>55 </ajaxToolkit:AnimationExtender>56 <ajaxToolkit:AnimationExtender ID="CloseAnimation" runat="server" TargetControlID="CloseLinkButton">57 <Animations>58 <OnClick>59 <Sequence AnimationTarget="FullImage">60<%-- Shrink the FullImage panel out of view --%>61 <StyleAction Attribute="overflow" Value="hidden"/>62 <Parallel Duration=".3" Fps="15">63 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />64 <FadeOut />65 </Parallel>6667<%-- Reset the FullImage so it can be played again --%>68 <StyleAction Attribute="display" Value="none"/>69 <StyleAction Attribute="width" Value="" />70 <StyleAction Attribute="height" Value="" />71 <StyleAction Attribute="top" Value="50px" />72 <StyleAction Attribute="left" Value="35px" />73 <OpacityAction AnimationTarget="CloseLinkButton" Opacity="0" />7475<%-- Reset the overlay so it can be played again --%>76 <EnableAction Enabled="false" />77 <FadeOut AnimationTarget="overlay" Duration=".4" />78 <StyleAction AnimationTarget="overlay" Attribute="height" Value="0%"/>79 <StyleAction AnimationTarget="overlay" Attribute="width" Value="0%"/>80 <StyleAction AnimationTarget="overlay" Attribute="margin-left" Value="0px"/>81 <StyleAction AnimationTarget="overlay" Attribute="visibility" Value="hidden" />8283<%-- Enable the button so it can be played again --%>84 <EnableAction AnimationTarget="ImageButton001" Enabled="true" />85 </Sequence>86 </OnClick>87 </Animations>88 </ajaxToolkit:AnimationExtender>89</asp:Content>

The CSS file in case it's relevant:

1/* 0 BASIC TAGS */23a4{5text-decoration: none;6color: #d32525;7}89a:visited10{11color: #980000;12}1314a:hover15{16text-decoration: underline;17color: #e05252;18}1920a:active21{22color: #980000;23}2425body26{27background-color: #ffffff;28margin:0;29padding:0;30text-align: center;31color: #666666;32}333435/* 1 HEADER */3637.header38{39position: relative;40height:53px;41font-family: Arial, Helvetica Sans-Serif;42font-size:0.6em;43line-height:12.53pt;44}4546.footer47{48padding-top:50px;49font-family: Arial, Helvetica Sans-Serif;50font-size:0.6em;51line-height:12.53pt;52}5354.menu55{56position: absolute;57left:37px;58top:20px;59text-transform: uppercase;60}616263/* 2 PAGE */6465.page66{67left:50px;68width:85%;69text-align: left;70}717273/* 2.1 HOME, JAIMIE PAGES */7475#home, #jaimie, #photos76{77position: relative;78padding:0px37px;79padding-top:1px;/* Weird Mozilla Bug */80padding-bottom:40px;/* Weird Mozilla Bug */81}8283/* Accordion */84.accordionHeader85{86font-family: Arial, Sans-Serif;87font-size:0.9em;88font-weight: bold;89padding:5px;90margin-top:5px;91margin-left:0px;92cursor: pointer;93color: #d32525;94}9596.accordionHeaderSelected97{98color: #980000;99font-family: Arial, Sans-Serif;100font-size:0.9em;101font-weight: bold;102padding:5px;103104margin-top:5px;105margin-left:0px;106cursor: pointer;107border-bottom: #980000 thin solid;108}109110.accordionContent111{112padding:5px;113padding-top:10px;114text-align: left;115margin-left:100px;116font-family: Georgia, Arial;117font-size:0.7em;118line-height:12.53pt;119}120121/* Login View */122123.loginButton124{125position: absolute;126top:20px;127right:0px;128}129130.login131{132position: absolute;133width:250px;134right:37px;135top:0px;136text-transform: uppercase;137}138139.loggedIn140{141position: absolute;142right:37px;143top:20px;144text-transform: uppercase;145}146147/* Photo Animations */148149150.overlay151{152width:0px;153height:0px;154background-color: White;155visibility: hidden;156z-index:3;157position: absolute;158left:0px;159top:0px;160}161162.fullImage163{164position: absolute;165background-color: Gray;166display: none;167z-index:4;168top:50px;169left:50px;170}171172.closeLinkButton173{174position: absolute;175top:18px;176right:10px;177background-color: White;178color: #000000;179text-align: center;180font-weight: bold;181text-decoration: none;182padding:5px;183font-size:35px;184z-index:5;185border-right: black thin solid;186border-top: black thin solid;187border-left: black thin solid;188border-bottom: black thin solid;189}190191/* Horizonal Rulers */192.horizontalRule193{194color: black;195background-color: Black;196}197198199/*Textbox Watermark*/200201.unwatermarked202{203height:20px;204width:150px;205padding:2px0 0 2px;206border:1px solid #BEBEBE;207margin-top:3px;208}209210.watermarked211{212height:20px;213width:150px;214padding:2px0 0 2px;215border:1px solid #BEBEBE;216background-color: #F0F8FF;217color: gray;218margin-top:3px;219}220