asp.net 列表视图弹出图像

Question

我正在尝试使用对象数据源在列表视图中弹出图像。

我希望当我们单击该行的图像时，会弹出一个带有此图像的窗口。

在我的代码中，无论我点击哪个图像，它始终是弹出窗口中的第一个图像（因为弹出 "build itself" 在编译中，在运行时没有。

            <asp:ListView ID="ListView1" runat="server" DataSourceID="ObjectDataSource2" OnItemDataBound="ListView1_ItemDataBound" OnItemCommand="ListView1_ItemCommand" DataKeyNames="HotelID">

                <EditItemTemplate>
                    <li style="">HotelID:
                    <asp:TextBox ID="HotelIDTextBox" runat="server" Width="200px" Text='<%# Bind("HotelID") %>' />
                        <br />
                        HotelName:
                    <asp:TextBox ID="HotelNameTextBox" runat="server" Text='<%# Bind("HotelName") %>' />
                        <br />
                        Country:
                    <asp:TextBox ID="CountryTextBox" runat="server" Text='<%# Bind("Country") %>' />
                        <br />
                        Town:
                    <asp:TextBox ID="TownTextBox" runat="server" Text='<%# Bind("Town") %>' />
                        <br />
                        Image:
                    <asp:TextBox ID="ImageTextBox" runat="server" Text='<%# Bind("Image") %>' />
                        <br />
                        City:
                    <asp:TextBox ID="CityTextBox" runat="server" Text='<%# Bind("City") %>' />
                        <br />
                        Country1:
                    <asp:TextBox ID="Country1TextBox" runat="server" Text='<%# Bind("Country1") %>' />
                        <br />
                        Rooms:
                    <asp:TextBox ID="RoomsTextBox" runat="server" Text='<%# Bind("Rooms") %>' />
                        <br />
                        <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Update" />
                        <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" />
                    </li>
                </EditItemTemplate>
                <EmptyDataTemplate>
                    No data was returned.
                </EmptyDataTemplate>
                <InsertItemTemplate>
                    <li style="">HotelID:
                    <asp:TextBox ID="HotelIDTextBox" runat="server" Text='<%# Bind("HotelID") %>' />
                        <br />
                        HotelName:
                    <asp:TextBox ID="HotelNameTextBox" runat="server" Text='<%# Bind("HotelName") %>' />
                        <br />
                        Country:
                    <asp:TextBox ID="CountryTextBox" runat="server" Text='<%# Bind("Country") %>' />
                        <br />
                        Town:
                    <asp:TextBox ID="TownTextBox" runat="server" Text='<%# Bind("Town") %>' />
                        <br />
                        Image:
                    <asp:TextBox ID="ImageTextBox" runat="server" Text='<%# Bind("Image") %>' />
                        <br />
                        City:
                    <asp:TextBox ID="CityTextBox" runat="server" Text='<%# Bind("City") %>' />
                        <br />
                        Country1:
                    <asp:TextBox ID="Country1TextBox" runat="server" Text='<%# Bind("Country1") %>' />
                        <br />
                        Rooms:
                    <asp:TextBox ID="RoomsTextBox" runat="server" Text='<%# Bind("Rooms") %>' />
                        <br />
                        <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="Insert" />
                        <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Clear" />
                    </li>
                </InsertItemTemplate>
                <ItemSeparatorTemplate>
                    <br />
                </ItemSeparatorTemplate>
                <ItemTemplate>
                    <li style="">
                        <table style="width: 100%;">
                            <tr style="width: auto; background-color: white;">
                                <td align="center">
                                    <div id="pageone" data-role="main" class="ui-content">

                                        <a href="#myPopup" data-rel="popup" data-position-to="window">
                                            <img src='<%# Eval("Image")%>' alt="Skaret View" style="height: 116px; width: 311px"></a>

                                        <div data-role="popup" id="myPopup" data-transition="flip" data-overlay-theme="b">
                                            <p>This is my picture!</p>
                                            <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src='<%# Eval("Image")%>' style="width: 800px; height: 400px;" alt="Skaret View">
                                        </div>
                                    </div>

                                <td>
                                    <asp:Label ID="HotelNameLabel" runat="server" Text='<%# Eval("HotelName")%>' Font-Underline="true" />
                                    <br />

                                    <asp:Label ID="TownLabel" runat="server" Text='<%# Eval("Town")%>' />
                                    ,
                               <asp:Label ID="CountryLabel" runat="server" Text='<%# Eval("Country")%>' />

                                    <br />
                                    <asp:Label ID="HotelIDLabel" runat="server" Text='<%# Eval("HotelID")%>' Visible="false" />
                                </td>
                                <br />
                                <br />
                                <td align="right">
                                    <asp:Button ID="Button1" runat="server" CssClass="styled-button-2" Text="Book Now" PostBackUrl='<%#"~/BookHotel.aspx?HotelID=" + Eval("HotelID")%>' />
                                </td>
                            </tr>

                        </table>
                    </li>
                </ItemTemplate>
                <LayoutTemplate>
                    <ul id="itemPlaceholderContainer" runat="server" style="list-style: none">
                        <li runat="server" id="itemPlaceholder" />
                    </ul>
                    <div style="">
                    </div>
                </LayoutTemplate>
                <SelectedItemTemplate>
                    <li style="">HotelID:
                    <asp:Label ID="HotelIDLabel" runat="server" Text='<%# Eval("HotelID")%>' />
                        <br />
                        HotelName:
                    <asp:Label ID="HotelNameLabel" runat="server" Text='<%# Eval("HotelName")%>' />
                        <br />
                        Country:
                    <asp:Label ID="CountryLabel" runat="server" Text='<%# Eval("Country")%>' />
                        <br />
                        Town:
                    <asp:Label ID="TownLabel" runat="server" Text='<%# Eval("Town")%>' />
                        <br />
                        Image:
                    <asp:Label ID="ImageLabel" runat="server" Text='<%# Eval("Image")%>' />
                        <br />
                        City:
                    <asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City")%>' />
                        <br />
                        Country1:
                    <asp:Label ID="Country1Label" runat="server" Text='<%# Eval("Country1")%>' />
                        <br />
                        Rooms:
                    <asp:Label ID="RoomsLabel" runat="server" Text='<%# Eval("Rooms") %>' />
                        <br />
                    </li>
                </SelectedItemTemplate>
            </asp:ListView>

谢谢（如果有做图片按钮和onclick出现弹窗的解决方案也很好。）

非常感谢

Answer 1

您遇到的问题是您引用了 ID 为 myPopup 的控件并将弹出窗口添加到同一个 itemTemplate 中。对于每个项目，您要添加另一个具有相同 ID myPopup 的 div。因此，单击第三张图片将查找 id myPopup，它会找到第一个元素。无法知道需要第二个或第三个弹出窗口。

您可以做的是确保您的 ID 是唯一的，这样点击第三张图片就会查找第三个弹出窗口。要做到这一点，您不应该自己设置 id，但是您可以使用 ClientID，它的 id 中将包含行索引。为此，您确实需要为弹出窗口 div 设置 runat="server"，这样您就可以使用对它的 ClientID 的引用（通过头部执行此操作，因此可以包含拼写错误）：

 <a href="#<%# Container.Item.FindControl("myPopup").ClientID %>" data-rel="popup" data-position-to="window">
     <img src='<%# Eval("Image")%>' alt="Skaret View" style="height: 116px; width: 311px">
 </a>

 <div data-role="popup" ID="myPopup" runat="server" data-transition="flip" data-overlay-theme="b">
     <p>This is my picture!</p>
     <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src='<%# Eval("Image")%>' style="width: 800px; height: 400px;" alt="Skaret View">
 </div>

我认为这不是最好的解决方案，但它确实解释了您在 ASP.Net.

中关于客户端 ID 的概念出了什么问题

另类单弹窗 如果您单击多个图像，我认为您不需要看到多个弹出窗口。如果您总是需要查看最后一次单击的图像，那么您的概念还可以，但弹出窗口的位置却不行。因此，如果您将弹出窗口移出 ListView，它只会被添加到页面一次，因此单击会找到单个弹出控件。您只需要使用相同的图像在弹出窗口中使用 jQuery.

进行设置

function SetImageInPopup() {
    //Get the imageUrl from the image inside the hyperlink
    var imageSrc = $("img", this).attr("src");
    //Now find the image in the popup
    var imgInpopup = $("mypopup > img");
    //Now adjust the image src
    imgInPopup.attr("src", imageSrc);
}

<a href="#myPopup" onclick="SetImageInPopup()"

替代jQuery对话 如果您不需要使用特定的弹出逻辑，您可以考虑使用 jQuery 的对话框并在弹出

中显示您的 link 的内容

function ShowDialog() {
    $(this).dialog(); //Specify specific dialog properties for your own dialog layout and behavior
}

asp.net 列表视图弹出图像

asp.net listview pop up image

asp.net

jquery

listview

popup