ASP.NET AJAX Advance Tips & Tricks (2) 动态创建Rating控件不能保存ViewState的解决方案
前言：
Rating控件用来标识分级，目前已经有广泛应用。AJAX Control Toolkit中的Rating也做的相当成熟，也算是ASP.NET AJAX扩展中做的最像传统服务端控件的一个了。然而，最近很多朋友抱怨说如果在后台代码中动态创建Rating控件，那么在PostBack发生后，Rating的状态将会丢失（未存入ViewState）。本文介绍两种方法来解决此问题。
问题重现：
如果按以下代码动态创建Rating控件，则点击Button后，Rating选取的值将会丢失：
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
AjaxControlToolkit.Rating rt = new Rating();
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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="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>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<div>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
<p>
</p>
</body>
</html>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
AjaxControlToolkit.Rating rt = new Rating();
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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="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>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<div>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
<p>
</p>
</body>
</html>
原因：
这个问题是由于动态创建的Rating控件不同于在Page_Load动态创建的其它服务端控件（如TextBox等），不会保存ViewState，要想为其创建ViewState，必须在Page_Init中进行创建。
解决方案1：
在Page_Init中创建控件，如下代码所示：
解决方案1
解决方案2：
使用Hidden Field来保存Rating控件的状态：
注意：要设置Rating控件的BehaviorID，以便在JavaScript中调用Rating控件的js方法
解决方案2
