如何從C＃中的代碼隱藏創建AjaxToolKit控件（評級）？

Question

我正在從代碼隱藏式 （如文本框，復選框列表，單選按鈕列表等）中創建動態控件，並將其添加到中繼器中的占位符中，以便根據用戶制作的模板創建動態調查我希望從代碼隱藏中創建調查問卷，但是如果還有其他方法可以動態創建控件，那么你們可以為我提供特定主題的指導還是給我看一個代碼示例？

我在想像..

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

但它不會渲染...

PD我已經在css中添加了示例所需的圖像以創建控件的星標，並嘗試使用此評級ajaxtoolkit內容和其他內容成功讀取MS中的評級 ：(

編輯 ：從來沒有弄清楚，所以我選擇了一個RadioButtonList用於在代碼隱藏中創建控件，然后使用CSS和JS / JQuery創建評級的真實偽控件

您可以將其用作后面代碼的指南

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

在前面使用此鏈接作為參考： https : //codepen.io/anon/pen/PKxQYY

Answer 1

我將釋放我的代碼，以便您可以將其用作自定義評分的基礎hehehe

對於CodeBehind，請嘗試使用PlaceHolder並使用以下代碼：

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

對於CSS，請使用以下命令：

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

對於JS / Jquery，我添加了以下內容：

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