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コントロールにコーディングしたいと思います。

これが私の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 に答える