MVC controller序列化下拉框给view

在开发中遇到的小问题，一个下拉框，一个文本域 ，文本域根据下拉框变化；

由于是一次全部取出的值，下拉框变化不想再去取值；

在后台把值先序列化给前台用

controller：

            List<LessonGrade> lstLessonGrade = new List<LessonGrade>();
            lstLessonGrade = _lessonGradeBLL.GetList();
            ViewBag.LessGrade = Newtonsoft.Json.JsonConvert.SerializeObject(lstLessonGrade);

View：

<select id="ddlLessonGrade">
      <option value="">请选择教案评价等级</option>
</select>
<textarea id="txtAppraiseContent" rows="" cols="" maxlength=""></textarea></p>

$(document).ready(function () {
        var strLessGrade = eval(@Html.Raw(ViewBag.LessGrade));
        if (strLessGrade != "") {
            $.each(strLessGrade, function (i, item) {
                $("#ddlLessonGrade").append("<option value=\"" + item.Id + "\">" + item.GradeName + "</option>");
            })
        }
    });

    $("#ddlLessonGrade").on("change", function () {
        var selLessonGrade = $(this).val();
        var strLessGrade = eval(@Html.Raw(ViewBag.LessGrade));
        if (strLessGrade != "") {
            $.each(strLessGrade, function (i, item) {
                console.log(selLessonGrade);
                if (selLessonGrade == item.Id) {
                    $("#txtAppraiseContent").val(item.GradeContent);
                    return false;
                }
            })
        }
    });