在代码隐藏处访问 asp:FormView 内的 img 标签

Question

我有一个 asp .net 表单，需要检查特定图像标记当前图像并继续，请参考下面的标记

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="SessionDetails.aspx.cs" Inherits="CodeCamper.UIWebLayer.WebUI.SessionDetails" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
     <script>         
         var changeState = false;
         var counter = 0;
         function changeImage(elementaccess) {
             if (elementaccess == false && changeState == false && document.getElementById("bookmarkimage").getAttribute("src") === "/Images/blue-bookmark.png") {
                 document.getElementById("bookmarkimage").setAttribute("src", "/Images/heart-black.png");
                 document.getElementById("bookmarkimage").setAttribute("title", "Add To Favorite"); 
             }
             else if (elementaccess == false && changeState == false && document.getElementById("bookmarkimage").getAttribute("src") === "/Images/heart-black.png") {
                 document.getElementById("bookmarkimage").setAttribute("src", "/Images/blue-bookmark.png");
                 document.getElementById("bookmarkimage").setAttribute("title", "Add To Favorite");
             }
             else if (counter == 0 && elementaccess == true && (document.getElementById("bookmarkimage").getAttribute("src") === "/Images/heart-black.png" || document.getElementById("bookmarkimage").getAttribute("src") === "/Images/blue-bookmark.png")) {
                 counter = 1;
                 document.getElementById("bookmarkimage").setAttribute("src", "/Images/heart-checked.png");
                 document.getElementById("bookmarkimage").setAttribute("title", "Remove Favorite");
             }
             else if (counter == 1 && elementaccess == true && document.getElementById("bookmarkimage").getAttribute("src") === "/Images/heart-checked.png") {
                 counter = 0;
                 document.getElementById("bookmarkimage").setAttribute("src", "/Images/blue-bookmark.png");
                 document.getElementById("bookmarkimage").setAttribute("title", "Add To Favorite");
             }
         }
    </script>

    <div class="generalmargin" style="margin-top: 160px">
        <%--<asp:Button ID="Buttonback" runat="server" Text="" class="button-back"/>--%>

    </div>
    <div id="labelinfo" style="text-align: center;" runat="server">
        <span id="spanlabelinfo" class="text-danger" style="align-content: center" runat="server">Error
        </span>
    </div>
    <div style="margin-top: 160px">
        <asp:LinkButton ID="ButtonBack" runat="server" class="btn btn-default btn-md glyphicon glyphicon-backward" Text="" OnClientClick="JavaScript:window.history.back(1);return false;">
        </asp:LinkButton>
         <asp:LinkButton ID="ButtonCancel" runat="server" class="btn btn-default btn-md glyphicon glyphicon glyphicon-remove-sign" Text="" OnClick="ButtonCancel_Click">
        </asp:LinkButton>
        <asp:LinkButton ID="ButtonSave" runat="server" class="btn btn-default btn-md glyphicon glyphicon-floppy-disk" Text="" OnClick="ButtonSave_Click">
        </asp:LinkButton>        
    </div>
     <asp:FormView ID="sessionDetail" runat="server" ItemType="CodeCamper.EntityLayer.Transaction.SessionVO" SelectMethod="GetDetails"  RenderOuterTable="false">
        <ItemTemplate>
            <div>
                <h3><%#: Item.SessionTitle %></h3>
            </div>
            <br />
            <table>
                <tr>
                    <td style="width:25%">                      
                        <label>Track</label>&nbsp;&nbsp;&nbsp;<%#: Item.SessionTrack %><br /><label>Time Slot</label>&nbsp;&nbsp;&nbsp;<%#:Item.SessionTimeSlot %><br /><label>Room</label>&nbsp;&nbsp;&nbsp;<%#:Item.SessionRoom %><br /><label>Level</label>&nbsp;&nbsp;&nbsp;<%#:Item.SessionLevel %><br /><label>Tags</label>&nbsp;&nbsp;&nbsp;<%#:Item.SessionTags %><br /><image src='/Images/photos/<%#:Item.ImagePath%>' />                        
                    </td>
                    <td style="width:75%"><label>Description</label><br />
                        <div class="pre-scrollable"><%#:Item.SessionBio %></div>                       
                    </td>                  
                </tr>
                <tr>
                    <td style="width:25%">                      
                         &nbsp;              
                    </td>
                    <td style="width:75%">
                    <img src='/Images/blue-bookmark.png' ID="bookmarkimage"  onmouseover="changeImage(false);" onmouseout="changeImage(false);" onclick="changeImage(true);" /><br />
                        <br />
                       <%-- <cc1:Rating ID="SeesionRating"  runat="server"
                            StarCssClass="Star" WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star"
                            FilledStarCssClass="FilledStar" ReadOnly="True" CurrentRating=<%#: int.Parse(Item.SessionRating.ToString()) %>> 
                        </cc1:Rating>--%>
                         <cc1:Rating ID="SeesionRating"  runat="server"
                            StarCssClass="Star" WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star"
                            FilledStarCssClass="FilledStar" ReadOnly="True" CurrentRating=<%# Item.SessionRating %>> 
                        </cc1:Rating>
                    </td>                  
                </tr>
            </table>
                <asp:HiddenField runat="server" ID="isAddedFav" Value="0"></asp:HiddenField>
        </ItemTemplate>
    </asp:FormView>
</asp:Content>

在后面的代码中

protected void ButtonSave_Click(object sender, EventArgs e)
        {
             labelinfo.Visible = true;
             //HiddenField h1 = sessionDetail.FindControl("isAddedFav") as HiddenField;
             //labelinfo.InnerHtml = h1.Value;
             Image h2 = sessionDetail.FindControl("bookmarkimage") as Image;
             labelinfo.InnerHtml = h2.ImageUrl;
             labelinfo.Attributes["class"] = "centering text-center text-info";
        }

问题是Image h2 = sessionDetail.FindControl("bookmarkimage") as Image; returns空

我想看看图片是不是心-checked.png是不是

Answer 1

要在代码隐藏中访问元素，它必须具有 runat="server" 属性:

<img ID="bookmarkimage" runat="server" ... />

它将被视为一个 HtmlImage 元素，而不是一个 Image 控件。您将使用其 Src 属性而不是 ImageUrl.

另一种方法是使用 Image 控件，它公开 ImageUrl 属性:

<asp:Image ID="bookmarkimage" runat="server" ... />

对于服务器控件，元素的 ID 将被破坏（尤其是数据绑定控件中的图像），因此 document.getElementById('bookmarkimage') 将找不到该元素。您可以通过使用 this 关键字将图像作为参数传递给 changeImage 来解决该问题：

<img ID="bookmarkimage" runat="server" src='/Images/blue-bookmark.png'  onmouseover="changeImage(this, false);" onmouseout="changeImage(this, false);" onclick="changeImage(this, true);" />

将元素作为其第一个参数，Javascript 函数不需要在 HTML 文档中找到它：

function changeImage(bookmarkImage, elementaccess) {
    if (elementaccess == false && changeState == false && bookmarkImage.getAttribute("src") === "/Images/blue-bookmark.png") {
        bookmarkImage.setAttribute("src", "/Images/heart-black.png");
        bookmarkImage.setAttribute("title", "Add To Favorite");
    }
    else if (elementaccess == false && changeState == false && bookmarkImage.getAttribute("src") === "/Images/heart-black.png") {
        bookmarkImage.setAttribute("src", "/Images/blue-bookmark.png");
        bookmarkImage.setAttribute("title", "Add To Favorite");
    }
    else if (counter == 0 && elementaccess == true && (bookmarkImage.getAttribute("src") === "/Images/heart-black.png" || bookmarkImage.getAttribute("src") === "/Images/blue-bookmark.png")) {
        counter = 1;
        bookmarkImage.setAttribute("src", "/Images/heart-checked.png");
        bookmarkImage.setAttribute("title", "Remove Favorite");
    }
    else if (counter == 1 && elementaccess == true && bookmarkImage.getAttribute("src") === "/Images/heart-checked.png") {
        counter = 0;
        bookmarkImage.setAttribute("src", "/Images/blue-bookmark.png");
        bookmarkImage.setAttribute("title", "Add To Favorite");
    }
}

在后面的代码中，元素被检索为：

System.Web.UI.HtmlControls.HtmlImage h2 = sessionDetail.FindControl("bookmarkimage") as System.Web.UI.HtmlControls.HtmlImage;
labelinfo.InnerHtml = h2.Src;

在代码隐藏处访问 asp:FormView 内的 img 标签

access img tag inside asp:FormView at codebehind

asp.net

formview

image