asp.net listview弹出图像

我试图在对象数据源的列表视图中弹出图像。asp.net listview弹出图像

我希望当我们点击图像的行，因为这个图像弹出显示。

在我的代码

它总是在弹出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方面也很好的弹出窗口。）

非常感谢

来源

2015-06-21 Elisheva Ceylon

您遇到的问题是您使用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 
}

来源

2015-06-21 12:34:33 Dacker

asp.net listview弹出图像

回答

相关问题