Handling events in asp.net server control

Question

I have a custom asp.net server component that is rendered as below:

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

Is it possible to handle the click on the images in my web control? I mean, I want to do some operations when user clicks on the images, but I want to code these in my web control.

Here is my web control:

[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);
    }
}

Thanks in advance,

Answer 1

If you want to attach events to controls, overriding CompositeControl will be a lot easier than WebControl.

CreateChildControl can route the event to its child but WebControl can't.

Please keep it mind that it is an alternative approach to your question because it requires some of changes (from your original code).

Answer 2

Depending on what you want to do, the quickest option will be to add runat="server" tag to the image control along with an on click event handler than points to a function.

This will perform a postback to the asp page whenever the image is clicked.

If the post back is not desired then you will need to wire up javascript to do an ajax based postback and appropriate client/server handlers.