Problema com UpdatePanel e fotos de produtos

[Henrique Gouvêa 0]

E aí galera, beleza?

 

Eu tenho um sistema onde é apresentado os detalhes do produto. Tem uma foto default no tamanho normal e as outras fotos em miniaturas em baixo em uma ListView. Só que quando clica na foto da ListView pra ver no tamanho normal ta gerando um postback na página inteira, e eu não queria que isso acontecesse, então coloquei um UpdatePanel, ficando da seguinte forma:

 

<div class="picture">
           <asp:UpdateProgress ID="updateProgressPictures" runat="server" AssociatedUpdatePanelID="UpdatePanelPictures"> 
               <ProgressTemplate>Carregando imagem... </ProgressTemplate>
           </asp:UpdateProgress>            
           <div class="big" style="margin-top:10px;margin-left:10px;">
             <asp:HyperLink ID="lnkMainLightbox2" runat="server" CssClass="cloud-zoom">
               <asp:Image id="defaultImage" runat="server" />
             </asp:HyperLink>
           <asp:Label ID="labelCliqueParaAmpliar" runat="server" Text="<% $NopResources:Products.CliqueParaAmpliar %>"></asp:Label>
           <div class="big">
           <asp:UpdatePanel ID="UpdatePanelPictures" runat="server" UpdateMode="Always">
               <ContentTemplate>
               <asp:ListView ID="lvProductPictures" runat="server" GroupItemCount="3">
                   <LayoutTemplate>
                       <table style="margin-top: 10px;">
                           <asp:PlaceHolder runat="server" ID="groupPlaceHolder"></asp:PlaceHolder>
                       </table>
                   </LayoutTemplate>
                   <GroupTemplate>
                       <tr>
                           <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
                       </tr>
                   </GroupTemplate>                    
                   <ItemTemplate>                    
                       <td align="left">
                       <asp:ImageButton DescriptionUrl="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 300)%>" 
                                        AlternateText="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem)%>"
                                        ImageUrl="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 70)%>" 
                                        runat="server" ID="imageButton" OnClick="imageButton_click" />                            
                       </td>                    
                   </ItemTemplate>
               </asp:ListView>
               </ContentTemplate>
               </asp:UpdatePanel>
               <asp:ImageButton CssClass="pictureVideo" runat="server" ID="imageVideo" ImageUrl="~/Scripts/images/video.jpg"  OnClick="imageVideo_Click" />
           </div>            
       </div>

 

Só que o problema é que agora não está mudando a foto. Ele termina de dar o post e não troca a foto. Tenho alguns javascripts referenciados na página, e acho que o problema deve ser isso, mas não sei como resolver. Já tentei remover estes javascripts da página e registrar via C# fazendo assim:

 

string scriptUpdateMainImage = "meus javascripts";
ScriptManager.RegisterStartupScript(UpdatePanelPictures, UpdatePanelPictures.GetType(), Guid.NewGuid().ToString(), scriptUpdateMainImage.ToString(), false);

 

Aqui está o evento do botão em C#:

 

protected void imageButton_click(object sender, ImageClickEventArgs e) 
       {
           panelVideo.Visible = false;

           ImageButton imageButtonSelecionado = (ImageButton)sender;

           this.defaultImage.ImageUrl = imageButtonSelecionado.DescriptionUrl;

           lnkMainLightbox2.Attributes["href"] = imageButtonSelecionado.AlternateText;

           if (lnkMainLightbox2.Visible == false)
           {
               lnkMainLightbox2.Visible = true;
           }
           if (defaultImage.Visible == false)
           {
               defaultImage.Visible = true;
           }            
       }

 

Por favor, alguém me ajude :o

[quintelab 91]

Ja que ja utiliza JavaScript, pq não muda essa foto via javascript? Sera bem melhor.

De qualquer forma não esta dando algum erro de JavaScript?

 

Abraços...

[Henrique Gouvêa 0]

Quintelab, tentei por javascript e tirei o UpdatePanel, mas ainda não troca a foto e ta dando postback.

Tem como verificar se fiz alguma besteira...?

 

No botão imageButton eu adicionei um OnClientClick no page_load:

 

           if(!Page.IsPostBack)
           {
               BindData();
               PreencheFormasPagamento();
               ValidaLayout();
               AtualizaFacebook();

               foreach (ListViewItem lvi in lvProductPictures.Items)
               {
                   var imageButton = (ImageButton)lvi.FindControl("imageButton");
                   imageButton.Attributes.Add("OnClientClick", "UpdateMainImage('" + imageButton.ImageUrl + "');");
               }

 

E a função UpdateMainImage está no topo da página junto com as outras:

 

<link href='<%= CommonHelper.GetStoreLocation() + "Scripts/cloud-zoom.css"%>' rel="stylesheet" type="text/css" />
<script type="text/javascript" src='<%= CommonHelper.GetStoreLocation() + "Scripts/cloud-zoom.1.0.2.js" %>' ></script>
<script type="text/javascript" src='<%= CommonHelper.GetStoreLocation() + "Scripts/slimbox2.js" %>' ></script>
<script type="text/javascript" src='<%= CommonHelper.GetStoreLocation() + "Scripts/jquery-1.3.2.min.js" %>' ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
           function UpdateMainImage(url) {
               var imgMain = document.getElementById('<%=defaultImage.ClientID%>');
               imgMain.src = url;
           }
           function SetActiveTab(tabControl, tabNumber) {
               var ctrl = $find(tabControl);
               ctrl.set_activeTab(ctrl.get_tabs()[tabNumber]);
           }
</script>
<script language="javascript" type="text/javascript">
           $(document).ready(function () {
               $('.cloud-zoom').jqzoom();
           });  

           jQuery(document).ready(function($){
            var options = {
                zoomWidth:300,
                zoomHeight: 200,
                   xOffset: 20,
                   yOffset: 0,
                   position: "right",
                   zoomType: 'standard',
                   lens:true,
                   frameWidth: 500,
                   frameHeight: 600
               };
               $('.cloud-zoom').jqzoom(options);
           });

</script>

 

O estranho é o código-fonte gerado pelo browser, ele ainda possui onclick e da uma olhada no onclientclick, não da pra por apóstrofo (') na url...

Isso é normal???

 

<input type="image" name="... ...imageButton" id="... ...imageButton" OnClientClick="UpdateMainImage('http://localhost:5382/images/thumbs/noDefaultImage_70.gif');" src="http://localhost:5382/images/thumbs/noDefaultImage_70.gif" longdesc="http://localhost:5382/images/thumbs/noDefaultImage_300.gif" alt="http://localhost:5382/images/noDefaultImage.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$cph1$cph1$ctl00$lvProductPictures$ctrl0$ctl00$imageButton", "", true, "", "", false, false))" style="border-width:0px;" />

 

Valeu desde já...

[quintelab 91]

Utilize um botao html, não o do asp.net, ae não tem como ocorrer o postback.

 

Abraços...