accès balise img à l'intérieur asp: FormView à codebehind

Question

J'ai une forme .net asp et besoin de vérifier une image actuelle de balises d'image spécifique et aller de l'avant, consultez le balisage ci-dessous

<%@ 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> 

dans le code derrière

La question est: Image h2 = sessionDetail.FindControl ("bookmarkimage") en tant qu'image;

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"; 
     } 

renvoie la valeur null

Je veux vérifier l'image est le cœur checked.png ou non

Answer 1

Pour accéder à l'élément dans le code-behind, il doit avoir la propriété runat="server":

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

Il sera vu comme un élément HtmlImage, pas comme un contrôle Image. Vous utiliseriez sa propriété Src au lieu de ImageUrl.

Une alternative serait d'utiliser un contrôle d'image, qui expose la ImageUrl propriété:

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

Avec des commandes de serveur, l'ID de l'élément sera mutilée (en particulier avec l'image dans un contrôle lié aux données), de sorte que document.getElementById('bookmarkimage') ne trouve pas l'élément. Vous pouvez résoudre ce problème en passant l'image comme argument à changeImage, en utilisant le mot-clé this: Avec l'élément comme premier paramètre

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

, la fonction Javascript n'a pas besoin de le trouver dans le document 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"); 
    } 
} 

Dans le code derrière, l'élément est récupéré comme:

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