How create an AjaxToolKit control, (rating), from code-behind in C#?

Question

I am creating dinamically controls from code-behind, such as textbox, checkboxlist, radiobuttonlist, etc etc... and adding them in a placeholder inside a repeater, in order to create a dynamic survey from a template-user-made, the questions of the survey I want 'em to be created from code-behind, but if there's any other way for creating dynamically the controls, could you guys guide me with a specific topic or show me a code-example?

I was thinking something like..

 AjaxControlToolkit.Rating rateThing = new AjaxControlToolkit.Rating();
                    rateThing.CurrentRating = 3;
                    rateThing.MaxRating = 5;
                    rateThing.StarCssClass = "ratingStar";
                    rateThing.WaitingStarCssClass = "savedRatingStar";
                    rateThing.FilledStarCssClass = "filledRatingStar";
                    rateThing.EmptyStarCssClass = "emptyRatingStar";
                    rateThing.ID = "rateThing" + IdPregunta.Value;
                    rateThing.Visible = true;

                    placeholder.Controls.Add(rateThing);

but it doesn't render ...

P.D. I already added the images the example need in the css to create the stars of the control, tried reading about rating in MS with this rating ajaxtoolkit stuff and with other stuff without success :(

EDITED: Never got figured it out so I choose for an RadioButtonList for creating the control in codebehind then using CSS and JS/JQuery for creating the real pseudocontrol of rating

You could use this as a guide for the codebehind

RadioButtonList rblEscala = new RadioButtonList();
    rblEscala.ID = "rblRes" + IdPregunta.Value;
    rblEscala.CssClass = "input-sm form-control col-sm-12 star-cb-group";
    rblEscala.Style.Add("height", "auto !important;");
    for (int i = 5; i >= 1; i--)
    {
        rblEscala.Items.Add(new ListItem("☆", i.ToString()));
    }
    rblEscala.RepeatDirection = RepeatDirection.Horizontal;

    placeholder.Controls.Add(rblEscala);

In the front use this link as reference: https://codepen.io/anon/pen/PKxQYY

Answer 1

I'll free my code so you can use it, as a base for your custom rating hehehe

For the CodeBehind try using a PlaceHolder and using this:

                    RadioButtonList rblEscala = new RadioButtonList();
                    rblEscala.ID = "rblRes";
                    rblEscala.CssClass = "star-cb-group";
                    rblEscala.Style.Add("height", "auto !important;");
                    for (int i = 5; i >= 1; i--)
                    {
                        //rblEscala.Items.Add(new ListItem(i.ToString(), i.ToString()));
                        rblEscala.Items.Add(new ListItem("☆", i.ToString()));
                    }
                    rblEscala.RepeatDirection = RepeatDirection.Horizontal;

                    placeholder.Controls.Add(rblEscala);

For CSS Use this:

    .star-cb-group {
        /* remove inline-block whitespace */
        font-size: 0;
        /* flip the order so we can use the + and ~ combinators */
        unicode-bidi: bidi-override;
        direction: rtl;
        /* the hidden clearer */
    }

        .star-cb-group tbody {
            float: left;
        }

        .star-cb-group * {
            font-size: 2.5rem;
        }

        .star-cb-group input {
            display: none;
            background: none;
        }

        .star-cb-group label {
            background: none !important;
            padding-left: 5px !important;
            height: auto !important;
        }

        .star-cb-group input + label {
            color: #888;
        }

        .star-cb-group input:checked + label {
            color: #e52;
        }

For JS/Jquery I added this:

        try {
            $(".star-cb-group input").change(function () {
                //$(this).next().text("★");
                var inputs = $(this).parent().parent().children().children("input");
                var bandera = false;
                inputs.each(function () {
                    if ($(this).is(':checked') || bandera) {
                        $(this).next().text("★");
                        $(this).next().css("color", "#e52");
                        $(this).next().css("font-weight", "Bold !important");
                        bandera = true;
                    } else {
                        $(this).next().text("☆");
                        $(this).next().css("color", "#888");
                        $(this).next().css("font-weight", "normal !important");
                    }
                });
            });
        } catch (err2) {
            console.log(err2);
        }