Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 297
  • Last Modified:

How can I use modalpopup extender to show a bigger version of an image?

Hi Experts

I have a formview in C#.
In this fv I have an image that is wrapped in a hyperlink. What I want to achieve is another image to popup when I click the image in the formview. Diffusing?

What I have so far is that the image opens in a new window. But I want the image to open in a modalpopup window.
Someone please help me?

This is my .aspx code, I have no code behind

<asp:FormView ID="fvVarebilde" runat="server" DataKeyNames="vareID" DataSourceID="SqlDataSource_fvVaredetalj">
        <ItemTemplate>
        <asp:hyperlink ID="ImageID" runat="server" target="_blank" navigateurl='<%# Eval("filnavn","bilder/{0}") %>' >
        <img src='<%# Eval("hovedbilde","bilder/{0}")%>' height="130" width="110" alt="produktbilde" />
        </asp:hyperlink>
        </ItemTemplate>
        </asp:FormView>

Open in new window

0
Raggdog
Asked:
Raggdog
  • 2
1 Solution
 
RaggdogAuthor Commented:
C'mon Experts... anyone that know something about ajax??

I changed my code, so that my image is not in a hyperlink, but in an <imagebutton>. This because of the OnClick and code behind. I need help on this because I can not make this work. I click the image... the page reloads...and nothing more happens. I want a new image to show in a modalpopup.

I have done this before, but not in a formview... Is that a problem?

This is my .aspx and code behind

<asp:FormView ID="fvVarebilde" runat="server" DataKeyNames="vareID" DataSourceID="SqlDataSource_fvVaredetalj">
        <ItemTemplate>
            <asp:ImageButton ID="showModalPopup" runat="server" ImageUrl='<%# Eval("hovedbilde","bilder/{0}")%>' OnClick="showModalPopup_Click" />
            <p class="mini">Klikk på bildet...</p>
        
        
        <asp:Panel ID="programmaticPopup" CssClass="modalPopup" style="display:none;width:520px;padding:10px" runat="server">
        <img src='<%# Eval("filnavn","bilder/{0}")%>' height="500" width="500" alt="produktbilde" />
               <asp:LinkButton runat="server" ID="hideModalPopup" Text="Lukk" OnClick="hideModalPopup_Click" />
        
        
        </asp:Panel>
        </ItemTemplate>
        </asp:FormView>
        <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/>
        
        
        <ajaxToolkit:ModalPopupExtender BehaviorID="programmaticModalPopupBehavior" 
            ID="programmaticModalPopup" 
            runat="server" 
            TargetControlID="hiddenTargetControlForModalPopup" 
            PopupControlID="programmaticPopup">
        
        </ajaxToolkit:ModalPopupExtender>
 
 
// and .cs
 
protected void showModalPopup_Click(object sender, EventArgs e)
    {
        this.programmaticModalPopup.Show();
    }
    protected void hideModalPopup_Click(object sender, EventArgs e)
    {
        this.programmaticModalPopup.Hide();
    }

Open in new window

0
 
RaggdogAuthor Commented:
Ahh never mind.... I figured it out my self ;)
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now