ASP.NET AJAX Advance Tips & Tricks (2) 动态创建Rating控件不能保存ViewState的解决方案

前言：

Rating控件用来标识分级，目前已经有广泛应用。AJAX Control Toolkit中的Rating也做的相当成熟，也算是ASP.NET AJAX扩展中做的最像传统服务端控件的一个了。然而，最近很多朋友抱怨说如果在后台代码中动态创建Rating控件，那么在PostBack发生后，Rating的状态将会丢失（未存入ViewState）。本文介绍两种方法来解决此问题。

问题重现：

如果按以下代码动态创建Rating控件，则点击Button后，Rating选取的值将会丢失：

ASP.NET AJAX Advance Tips & Tricks (2) 动态创建Rating控件不能保存ViewState的解决方案

<%@ 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>

原因：

这个问题是由于动态创建的Rating控件不同于在Page_Load动态创建的其它服务端控件（如TextBox等），不会保存ViewState，要想为其创建ViewState，必须在Page_Init中进行创建。

解决方案1：

在Page_Init中创建控件，如下代码所示：

    protected void Page_Init(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>

解决方案2：

使用Hidden Field来保存Rating控件的状态：

注意：要设置Rating控件的BehaviorID，以便在JavaScript中调用Rating控件的js方法

    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxControlToolkit.Rating rt = new Rating();
        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>

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

    <script type="text/javascript">

        function save_rate() {
            var state = $find("hichange").get_Rating();
            $get("Hidden1").value = state;
            alert(state);
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </cc1:ToolkitScriptManager>
    <asp:Panel ID="Panel1" runat="server" onclick="save_rate();">
    </asp:Panel>
    <asp:Button ID="Button1" runat="server" Text="Button" />
    <input id="Hidden1" runat="server" type="hidden" value="1" />
    <p>
         </p>
    </form>
    </body>
</html>