使用ajax modalpopup扩展器显示图像 [英] display image using ajax modalpopup extender

问题描述

我已经在数据列表中创建了缩略图列表，然后单击图像，我想将图像名称传递给显示更大图像的Ajax控制工具箱模态弹出"窗口.
但是该代码无法正常工作.

I have created list of thumbnail images in datalist and on clicking image i want to pass image name to Ajax control toolkit Modal Popup window which display bigger image.
But that code is not working properly.

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage.master" CodeFile="Datalist_image.aspx.cs" Inherits="Datalist_image" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="content1" ContentPlaceHolderID="content1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>

    <script type="text/javascript">
            function ShowFullImg(url) {
                var img = $get("<%=Image1.ClientID %>");
                img.src = url;
                $find("MPEImage").show();
            }
        </script>

        <asp:Panel ID="PnlImage" runat="server" Style="display: none">
        <asp:Image ID="Image1" runat="server" />
        <asp:Button ID="btnClose" runat="server" Text="Close" />
        </asp:Panel>

        <asp:Button ID="BtnHidden" runat="server" Text="Hidden" Style="display: none" />
    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="BtnHidden" PopupControlID="PnlImage"

            BehaviorID="MPEImage" CancelControlID="btnClose">
    </asp:ModalPopupExtender>
    <asp:DataList ID="dl1" runat="server" DataSourceID="sql1">
    <ItemTemplate>
                <asp:ImageButton ID="ThumbnailImg" ImageUrl='<%# Eval("client_img_path") %>' OnClientClick='<%# Eval("client_img_path","client_img_path(\"{0}\");return false;") %>'

                    runat="server" />
            </ItemTemplate>
    </asp:DataList>
    <asp:SqlDataSource ID="sql1" runat="server" ConnectionString="<%$ ConnectionStrings:tisConnectionString %>"

                                                SelectCommand="SELECT * FROM [client_details]"></asp:SqlDataSource>
</asp:Content>

推荐答案

get(" ); img.src = url;

get("<%=Image1.ClientID %>"); img.src = url;

查找(" ).展示(); } < / 脚本 > < asp:Panel ID =" runat 服务器" 样式 显示:无" < asp:Image ID =" runat 服务器" / < asp:Button ID =" runat 服务器" 文本 关闭" / < /asp:Panel > < asp:Button ID =" runat 服务器" 文本 隐藏" 样式 显示:无" / < asp:ModalPopupExtender ID =" runat 服务器" TargetControlID BtnHidden" PopupControlID PnlImage" =" MPEImage" CancelControlID =" > < /asp:ModalPopupExtender > < asp:DataList ID =" runat 服务器" DataSourceID sql1" < ItemTemplate > < asp:ImageButton ID =" ImageUrl <％#Eval(" )％> ' OnClientClick =' <％#Eval(" ，" ) runat =" > < /ItemTemplate > < /asp:DataList > < asp:SqlDataSource ID =" runat 服务器" ConnectionString <％

find("MPEImage").show(); } </script> <asp:Panel ID="PnlImage" runat="server" Style="display: none"> <asp:Image ID="Image1" runat="server" /> <asp:Button ID="btnClose" runat="server" Text="Close" /> </asp:Panel> <asp:Button ID="BtnHidden" runat="server" Text="Hidden" Style="display: none" /> <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="BtnHidden" PopupControlID="PnlImage" BehaviorID="MPEImage" CancelControlID="btnClose"> </asp:ModalPopupExtender> <asp:DataList ID="dl1" runat="server" DataSourceID="sql1"> <ItemTemplate> <asp:ImageButton ID="ThumbnailImg" ImageUrl='<%# Eval("client_img_path") %>' OnClientClick='<%# Eval("client_img_path","client_img_path(\"{0}\");return false;") %>' runat="server" /> </ItemTemplate> </asp:DataList> <asp:SqlDataSource ID="sql1" runat="server" ConnectionString="<%

ConnectionStrings:tisConnectionString ％> " SelectCommand =" > >&l t; /asp:SqlDataSource > < /asp:Content >

ConnectionStrings:tisConnectionString %>" SelectCommand="SELECT * FROM [client_details]"></asp:SqlDataSource> </asp:Content>

这篇关于使用ajax modalpopup扩展器显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！