Rating控件用来标识分级，目前已经有广泛应用。AJAX Control Toolkit中的Rating也做的相当成熟，也算是ASP.NET AJAX扩展中做的最像传统服务端控件的一个了。然而，最近很多朋友抱怨说如果在后台代码中动态创建Rating控件，那么在PostBack发生后，Rating的状态将会丢失（未存入ViewState）。本文介绍两种方法来解决此问题。
问题重现：
如果按以下代码动态创建Rating控件，则点击Button后，Rating选取的值将会丢失：
<%@PageLanguage="C#"%>
<%@RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<scriptrunat="server">
protectedvoidPage_Load(objectsender,EventArgse)
{
AjaxControlToolkit.Ratingrt=newRating();
Page.Form.Controls.Add(rt);
rt.ID="LikeRating";
rt.MaxRating=5;
rt.CurrentRating=2;
rt.StarCssClass="ratingStar";
rt.WaitingStarCssClass="savedRatingStar";
rt.FilledStarCssClass="filledRatingStar";
rt.EmptyStarCssClass="emptyRatingStar";
}
</script>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<styletype="text/css">
/*Rating*/.ratingStar
{
font-size:0pt;
width:13px;
height:12px;
margin:0px;
padding:0px;
cursor:pointer;
display:block;
background-repeat:no-repeat;
}
.filledRatingStar
{
background-image:url(Images/FilledStar.png);
}
.emptyRatingStar
{
background-image:url(Images/EmptyStar.png);
}
.savedRatingStar
{
background-image:url(Images/SavedStar.png);
}
</style>
</head>
<body>
<formid="form1"runat="server">
<cc1:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server">
</cc1:ToolkitScriptManager>
<div>
</div>
<asp:ButtonID="Button1"runat="server"Text="Button"/>
</form>
<p>
</p>
</body>
</html>
原因：
这个问题是由于动态创建的Rating控件不同于在Page_Load动态创建的其它服务端控件（如TextBox等），不会保存ViewState，要想为其创建ViewState，必须在Page_Init中进行创建。
解决方案1：
在Page_Init中创建控件，如下代码所示：
解决方案1
<%@PageLanguage="C#"%>
<%@RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<scriptrunat="server">
protectedvoidPage_Init(objectsender,EventArgse)
{
AjaxControlToolkit.Ratingrt=newRating();
Page.Form.Controls.Add(rt);
rt.ID="LikeRating";
rt.MaxRating=5;
rt.CurrentRating=2;
rt.StarCssClass="ratingStar";
rt.WaitingStarCssClass="savedRatingStar";
rt.FilledStarCssClass="filledRatingStar";
rt.EmptyStarCssClass="emptyRatingStar";
}
</script>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<styletype="text/css">
/*Rating*/.ratingStar
{
font-size:0pt;
width:13px;
height:12px;
margin:0px;
padding:0px;
cursor:pointer;
display:block;
background-repeat:no-repeat;
}
.filledRatingStar
{
background-image:url(Images/FilledStar.png);
}
.emptyRatingStar
{
background-image:url(Images/EmptyStar.png);
}
.savedRatingStar
{
background-image:url(Images/SavedStar.png);
}
</style>
</head>
<body>
<formid="form1"runat="server">
<cc1:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server">
</cc1:ToolkitScriptManager>
<div>
</div>
<asp:ButtonID="Button1"runat="server"Text="Button"/>
</form>
<p>
</p>
</body>
</html>
解决方案2：
使用Hidden Field来保存Rating控件的状态：
注意：要设置Rating控件的BehaviorID，以便在JavaScript中调用Rating控件的js方法
解决方案2
<%@PageLanguage="C#"%>
<%@RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<scriptrunat="server">
protectedvoidPage_Load(objectsender,EventArgse)
{
AjaxControlToolkit.Ratingrt=newRating();
Panel1.Controls.Add(rt);
rt.ID="LikeRating";
rt.MaxRating=5;
rt.CurrentRating=2;
rt.StarCssClass="ratingStar";
rt.WaitingStarCssClass="savedRatingStar";
rt.FilledStarCssClass="filledRatingStar";
rt.EmptyStarCssClass="emptyRatingStar";
rt.BehaviorID="hichange";
rt.CurrentRating=Convert.ToInt32(this.Hidden1.Value);
}
</script>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<styletype="text/css">
/*Rating*/.ratingStar
{
font-size:0pt;
width:13px;
height:12px;
margin:0px;
padding:0px;
cursor:pointer;
display:block;
background-repeat:no-repeat;
}
.filledRatingStar
{
background-image:url(Images/FilledStar.png);
}
.emptyRatingStar
{
background-image:url(Images/EmptyStar.png);
}
.savedRatingStar
{
background-image:url(Images/SavedStar.png);
}
</style>
<scripttype="text/javascript">
functionsave_rate(){
varstate=$find("hichange").get_Rating();
$get("Hidden1").value=state;
alert(state);
}
</script>
</head>
<body>
<formid="form1"runat="server">
<cc1:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server">
</cc1:ToolkitScriptManager>
<asp:PanelID="Panel1"runat="server"onclick="save_rate();">
</asp:Panel>
<asp:ButtonID="Button1"runat="server"Text="Button"/>
<inputid="Hidden1"runat="server"type="hidden"value="1"/>
<p>
</p>
</form>
</body>
</html>