0

我有一个自定义的 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>

是否可以在我的 Web 控件中处理对图像的点击？我的意思是，当用户单击图像时，我想执行一些操作，但我想在我的 Web 控件中编写这些代码。

这是我的网络控件：

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

提前致谢，

4

2 回答 2

1

如果您想将事件附加到控件，覆盖CompositeControl将比WebControl.

CreateChildControl 可以将事件路由到其子级，但 WebControl 不能。

请记住，这是您问题的另一种方法，因为它需要一些更改（来自您的原始代码）。

于 2013-03-01T14:55:18.817 回答
0

根据您要执行的操作，最快的选择是将runat="server"标记与单击事件处理程序一起添加到图像控件，而不是指向函数。

每当单击图像时，这将执行回发到 asp 页面。

如果不需要回发，那么您将需要连接 javascript 来执行基于 ajax 的回发和适当的客户端/服务器处理程序。

于 2013-03-01T14:54:44.423 回答