Обработка событий в серверном элементе управления asp.net

Question

У меня есть серверный компонент пользовательского asp.net, который визуализируется, как показано ниже:

<div id="divContentRating"> 
<div id="divAskForRating"> 
    #Question 
    <br /> 
    <a id="likeIcon"><img src="#PositiveRateIconPath"/></a> 
    <a id="neutralIcon"><img src="#NeutralRateIconPath"/></a> 
    <a id="unlikeIcon"><img src="#NegativeRateIconPath"/></a> 
</div> 
<div id="divPositiveRating"> 
    <div> 
     <img src="#PositiveRateIconPath"/> #PositiveAnswerMessage <br /> 
     <a href="javascript:void(0)" class="updateRate">Güncelle</a> 
    </div> 
</div> 
<div id="divNegativeRating"> 
    <div> 
     <img src="#NegativeRateIconPath"/> #NegativeAnswerMessage <br /> 
     <a href="javascript:void(0)" class="updateRate">Güncelle</a> 
    </div> 
</div> 
<div id="divNeutralRating"> 
    <div> 
     <img src="#NeutralRateIconPath"/> #NeutralAnswerMessage <br /> 
     <a href="javascript:void(0)" class="updateRate">Güncelle</a> 
    </div> 
</div> 

<input type="hidden" id="HasRated" value="#HasRated"> 
<input type="hidden" id="Rate" value="#Rate"> 
<input type="hidden" id="ContentKey" value="#ContentKey"> 
<input type="hidden" id="RatingId" value="#RatingId"> 
</div> 

Можно обрабатывать Нажмите на изображение, в моем веб-контроля? Я хочу сказать, что я хочу сделать некоторые операции, когда пользователь нажимает на изображения, но я хочу их закодировать в своем веб-элементе управления.

Вот мой веб-контроль:

[DefaultProperty("ContentKey")] 
[ToolboxData("<{0}:ContentRating runat=server></{0}:ContentRating>")] 
public class ContentRating : WebControl 
{ 
    [Bindable(true)] 
    [Category("Appearance")] 
    [DefaultValue("")] 
    [Localizable(true)] 
    public string ContentKey 
    { 
     get 
     { 
      String s = (String)ViewState["ContentKey"]; 
      return ((s == null) ? "[" + this.ID + "]" : s); 
     } 

     set 
     { 
      ViewState["ContentKey"] = value; 
     } 
    } 

    [Bindable(true)] 
    [Category("Appearance")] 
    [DefaultValue("")] 
    [Localizable(true)] 
    public string PositiveRateIconPath 
    { 
     get 
     { 
      String s = (String)ViewState["PositiveRateIconPath"]; 
      return ((s == null) ? "[" + this.ID + "]" : s); 
     } 

     set 
     { 
      ViewState["PositiveRateIconPath"] = value; 
     } 
    } 

    [Bindable(true)] 
    [Category("Appearance")] 
    [DefaultValue("")] 
    [Localizable(true)] 
    public string NegativeRateIconPath 
    { 
     get 
     { 
      String s = (String)ViewState["NegativeRateIconPath"]; 
      return ((s == null) ? "[" + this.ID + "]" : s); 
     } 

     set 
     { 
      ViewState["NegativeRateIconPath"] = value; 
     } 
    } 

    [Bindable(true)] 
    [Category("Appearance")] 
    [DefaultValue("")] 
    [Localizable(true)] 
    public string NeutralRateIconPath 
    { 
     get 
     { 
      String s = (String)ViewState["NeutralRateIconPath"]; 
      return ((s == null) ? "[" + this.ID + "]" : s); 
     } 

     set 
     { 
      ViewState["NeutralRateIconPath"] = value; 
     } 
    } 

    protected override void RenderContents(HtmlTextWriter output) 
    { 
     ContentRatingSettings contentRatingSettings = GetContentRatingSettings(this.ContentKey); 

     if (!contentRatingSettings.Visible) 
     { 
      output.Write(string.Empty); 
      return; 
     } 

     StringBuilder builder = new StringBuilder(@" 
<div id=""divContentRating""> 
<div id=""divAskForRating"">#Question 
    <br /> 
    <a id=""likeIcon""><img src=""#PositiveRateIconPath""/></a> 
    <a id=""neutralIcon""><img src=""#NeutralRateIconPath""/></a> 
    <a id=""unlikeIcon""><img src=""#NegativeRateIconPath""/></a> 
</div> 
<div id=""divPositiveRating""> 
    <div> 
     <img src=""#PositiveRateIconPath""/> #PositiveAnswerMessage <br /> 
     <a href=""javascript:void(0)"" class=""updateRate"">Güncelle</a> 
    </div> 
</div> 
<div id=""divNegativeRating""> 
    <div> 
     <img src=""#NegativeRateIconPath""/> #NegativeAnswerMessage <br /> 
     <a href=""javascript:void(0)"" class=""updateRate"">Güncelle</a> 
    </div> 
</div> 
<div id=""divNeutralRating""> 
    <div> 
     <img src=""#NeutralRateIconPath""/> #NeutralAnswerMessage <br /> 
     <a href=""javascript:void(0)"" class=""updateRate"">Güncelle</a> 
    </div> 
</div> 

<input type=""hidden"" id=""HasRated"" value=""#HasRated""> 
<input type=""hidden"" id=""Rate"" value=""#Rate""> 
<input type=""hidden"" id=""ContentKey"" value=""#ContentKey""> 
<input type=""hidden"" id=""RatingId"" value=""#RatingId""> 

<script type=""text/javascript""> 
$(document).ready(function() { 
    var protocol = location.protocol; 
    var host = window.location.host; 

    if ($(""#HasRated"").val() == ""True"") 
    { 
     var rate = $(""#Rate"").val(); 
     if (rate == 1) { 
      setPositiveRatedView(); 
     } 
     else if (rate == 0) { 
      setNeutralRatedView(); 
     } 
     else if (rate == -1) { 
      setNegativeRatedView(); 
     } 
     else { 
      setNotRatedView(); 
     } 
    } 
    else { 
     setNotRatedView(); 
    } 

    $(""#likeIcon"").click(function() { 
     alert(""like""); 
     setPositiveRatedView(); 
     ratePage(1, """"); 
    }); 

    $(""#neutralIcon"").click(function() { 
     alert(""neutral""); 
     setNeutralRatedView(); 
     ratePage(0, """"); 
    }); 

    $(""#unlikeIcon"").click(function() { 
     alert(""unlike""); 
     setNegativeRatedView(); 
     //mkMPopClc('NegativeRatingReason', 200, 300, 0, 0); 
    }); 

    $("".updateRate"").click(function() { 
     setNotRatedView(); 
    }); 

    function setNotRatedView() { 
     $(""#divNeutralRating"").fadeOut(); 
     $(""#divPositiveRating"").fadeOut(); 
     $(""#divAskForRating"").fadeIn(); 
     $(""#divNegativeRating"").fadeOut(); 
    } 

    function setPositiveRatedView() 
    { 
     $(""#divNegativeRating"").fadeOut(); 
     $(""#divNeutralRating"").fadeOut(); 
     $(""#divAskForRating"").fadeOut(); 
     $(""#divPositiveRating"").fadeIn(); 
    } 

    function setNegativeRatedView() { 
     $(""#divNeutralRating"").fadeOut(); 
     $(""#divPositiveRating"").fadeOut(); 
     $(""#divAskForRating"").fadeOut(); 
     $(""#divNegativeRating"").fadeIn(); 
    } 

    function setNeutralRatedView() { 
     $(""#divNegativeRating"").fadeOut(); 
     $(""#divPositiveRating"").fadeOut(); 
     $(""#divAskForRating"").fadeOut(); 
     $(""#divNeutralRating"").fadeIn(); 
    } 

    function ratePage(rating, comment) 
    { 
     //alert(rating + """" """" + comment); 
     var contentKey = $(""#ContentKey"").val(); 
     var hasRated = $(""#HasRated"").val(); 
     var ratingId = $(""#RatingId"").val(); 

     } 
     }); 
     </script> 
     </div>"); 

     SetTrackingCookie(); 

     builder.Replace("#ContentKey", this.ContentKey); 
     builder.Replace("#PositiveRateIconPath", this.PositiveRateIconPath); 
     builder.Replace("#NeutralRateIconPath", this.NeutralRateIconPath); 
     builder.Replace("#NegativeRateIconPath", this.NegativeRateIconPath); 
     builder.Replace("#Question", contentRatingSettings.Question); 
     builder.Replace("#PositiveAnswerMessage", contentRatingSettings.PositiveAnswerMessage); 
     builder.Replace("#NeutralAnswerMessage", contentRatingSettings.NeutralAnswerMessage); 
     builder.Replace("#NegativeAnswerMessage", contentRatingSettings.NegativeAnswerMessage); 

     output.Write(builder); 
    } 
} 

Спасибо заранее,

Answer 1

Если вы хотите присоединить события к элементам управления, переопределение CompositeControl будет намного проще, чем WebControl.

CreateChildControl может перенаправить событие к своему дочернему элементу, но WebControl не может.

Имейте ввиду, что это альтернативный подход к вашему вопросу, потому что он требует некоторых изменений (от вашего исходного кода).

Answer 2

В зависимости от того, что вы хотите сделать, самый быстрый вариант будет добавить runat="server" тег контроля изображения вместе с на обработчик события клика, чем указывает на функцию.

Это будет выполнять обратную передачу на страницу asp всякий раз, когда нажимается изображение.

Если пост не нужен, вам необходимо подключить javascript, чтобы сделать обратную передачу на основе ajax и соответствующих обработчиков клиент/сервер.