asp.net listview彈出圖像

Question

我試圖在對象數據源的列表視圖中彈出圖像。

我希望當我們點擊圖像的行，因爲這個圖像彈出顯示。

在我的代碼

它總是在彈出wathever我點擊圖像的第一圖像（因爲彈出的合輯「自身建設」，並沒有在運行。

  <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出現IT方面也很好的彈出窗口。）

非常感謝

Answer 1

您遇到的問題是您使用id myPopup引用控件，並在相同的itemTemplate中添加彈出窗口。對於每個項目，您將添加具有相同ID的另一個div myPopup。所以點擊第三張圖片會查找id myPopup，它會找到第一個元素。沒有辦法知道第二個或第三個彈出窗口是必需的。

你可以做的是確保你的ID是唯一的，所以點擊第三個圖像將尋找第三個彈出窗口。 Todo這個你不應該自己設置ID，但是你可以使用ClientID來包含它的ID中的行索引。藤本，你就需要設置RUNAT =「服務器」爲你彈出DIV，這樣你就可以使用引用到它的客戶端ID（由頭部這樣做，這樣可以包含錯別字）：

<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的對話框，顯示您的鏈接的內容，在彈出的

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