アクセスASP内のimgタグ：分離コード

Question

でFormViewコントロールは、私は、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"; 
     } 

質問は画像h2 = sessionDetail.FindControl（ "bookmarkimage"）as Image;リターンは私が画像を確認したい

は、コードビハインド内の要素にアクセスするにはハートchecked.pngか

Answer 1

で、それはrunat="server"性質を持っている必要がありますヌル：

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

それImageコントロールとしてではなく、HtmlImage要素として認識されます。 ImageUrlではなくSrcプロパティを使用します。

代替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"); 
    } 
} 

、要素は次のように取得されます。私は静止画H2 = sessionDetail.FindControl（ "ブックにrunat = "server" を追加しようとした

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