Developing custom asp.net server control rendering scripting code

Question

I have a server control as below:

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

        protected override void RenderContents(HtmlTextWriter output)
        {
            StringBuilder builder = new StringBuilder(@"<div id=""divContentRating"">
    <div id=""divAskForRating"">
        #Question
        <br />
        <a id=""likeIcon""><img src=""~/Content/Images/like.jpg""/></a>
        <a id=""neutralIcon""><img src=""~/Content/Images/neutral.jpg""/></a>
        <a id=""unlikeIcon""><img src=""~/Content/Images/unlike.jpg""/></a>
    </div>
    <div id=""divPositiveRating"">
        <div>
            <img src=""~/Content/Images/like.jpg""/> #PositiveAnswerMessage <br />
            <a href=""javascript:void(0)"" class=""updateRate"">Güncelle</a>
        </div>
    </div>
    <div id=""divNegativeRating"">
        <div>
            <img src=""~/Content/Images/unlike.jpg""/> #NegativeAnswerMessage <br />
            <a href=""javascript:void(0)"" class=""updateRate"">Güncelle</a>
        </div>
    </div>
    <div id=""divNeutralRating"">
        <div>
            <img src=""~/Content/Images/neutral.jpg""/> #NeutralAnswerMessage <br />
            <a href=""javascript:void(0)"" class=""updateRate"">Güncelle</a>
        </div>
    </div>

    <input type=""hidden"" id=""HasRated"" value=""False"">
    <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();
        });

//        $('.clsStl').click(function () {
//            ratePage(-1, """");
//            $('.mkMPop').fadeOut();
//        });
//
//        $('#ShareComment').click(function () {
//            ratePage(-1, $(""#Comment"").val());
//            $('.mkMPop').fadeOut();
//        });

        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();

            $.getJSON(protocol + '//' + host + '/tr/Rating/RatePage?contentKey=' + contentKey + '&rating=' + rating + '&ratingUpdate=' + hasRated + '&ratingId=' + ratingId + '&comment=' + comment, function (data) {
                $(""#HasRated"").val(data.HasRated);
                $(""#Rate"").val(data.Rate);
                $(""#ContentKey"").val(data.ContentKey);
                $(""#RatingId"").val(data.RatingId);
                $(""#Comment"").val(data.Comment);
            });
        }
    });
</script>
</div>");

            builder.Replace("#ContentKey", this.ContentKey);

            output.Write(builder);
        }
    }

When I add my control to my web page, I see that control is rendering as I am expecting but the jquery scripts doesn't work. Is it wrong to keep scripting code in a server control? What can I do to solve this problem?

There is a potential problem with your control : $(document).ready(function (){...}). Its best if you can use PreRender event of your control and register the JS using Page.RegisterClientScript. — avani gadhai
– avani gadhai, Commented Feb 28, 2013 at 6:18

nicemd · Accepted Answer · 2013-02-26 12:09:33Z

2

if ($(""#HasRated"").val() == """"True"")

I think you have too many quote characters there...

answered Feb 26, 2013 at 12:09

nicemd

545 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Developing custom asp.net server control rendering scripting code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related