如何从C#中的代码隐藏创建AjaxToolKit控件(评级)?
问题描述:
我正在创建从代码隐藏,如文本框,复选框列表,radiobuttonlist等等dinamically控制,并将它们添加到中继器内的占位符,以创建一个动态的调查,从模板 - 用户 - 我想从代码隐藏创建调查的问题,但是如果有任何其他方式来动态创建控件,您可以指导我一个特定的主题或向我展示一个代码示例吗?如何从C#中的代码隐藏创建AjaxToolKit控件(评级)?
我的想法是这样..
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);
,但它并未使...
P.D.我已经添加了例如需要在CSS创建控件的明星图像,试图阅读评级MS与this rating ajaxtoolkit stuff,并没有成功EDITED其他的东西:(
:从来没有想通了,所以我选择一个单选按钮列表用于创建隐藏代码控制,然后使用CSS和JS/JQuery的用于创建等级的真正pseudocontrol
指南10您可以使用此作为代码隐藏
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
答
我会释放我的代码,所以你可以使用它作为您的自定义评级 呵呵呵
对于基地代码隐藏尝试使用一个占位符,并使用此:
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);
}