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;

                }

            })

        }

    });