如何在MVC 4 ASP.NET中构造Ajax请求处理下拉更改事件

Question

我在这里有一个使用ASP.NET MVC 4的场景。我有2个下拉列表，其内容通过控制器中的ViewBags加载。 但是，我希望根据上面另一个选择的内容进行加载（在ASP.NET：D方面非常简单）。 现在我是MVC的新手，并被告知必须在不同的论坛上使用Ajax。 问题是我为自己定制的代码片段均无效。 这是应该处理下拉列表所在的cshtml视图中的Ajax请求和ajax脚本的控制器代码：首先是View代码：

<div class="editor-label">
        @Html.LabelFor(model => model.UserLevel)
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.UserLevel, (SelectList)ViewBag.ListOfUserLevels)
        @Html.ValidationMessageFor(model => model.UserLevel)
    </div>
    <script type ="text/javascript" >
        $(document).ready(function () {
            $("#UserLevel").change(function () {
                var selection = $("#UserLevel").val();
                //var dataToSend = {
                //    value: selection
                //};
                //"XSAccount/SelectedIndexChanged"
                $.get({
                    url: '@Url.Action("SelectedIndexChanged", "Home")',
                value: $(this).val(),
                            success: function (data) {
                                //$("#output").text("server returned:" + data.agent);
                                ViewBag.ListOfUserGrades = data.grade;
                                var model = $('#UserGrade');
                                model.empty();

                                $.each(data, function (register, grade) {
                                    model.append("<option value='" + grade.label + "'>" + grade.value + "</option>");
                                });

                                //var str = "";
                                //str = "<select data-val='true' data-val-required='The User Grade field is required.' id='UserGrade' name='UserGrade'>";
                                //for (j = 0; j < data.grade.length; j++) {
                                //    item = data.grade[j];
                                //    //str += "<option value = " + item + ">" + item + "</option>";
                                //    model.append("<option value='"+ item + "'>" + item + "</option>");
                                //}
                                //str += "</select>";

                                //usergrade.innerHTML = str;

                            }
                        });
                    });
                });
    </script>
    <div class="editor-label">
        @Html.LabelFor(model => model.UserGrade)
    </div>
    @{
        if (ViewBag.ListOfUserGrades == null)
        {
            ViewBag.ListOfUserGrades = new SelectList(new List<string>() { "", ""});
        }
    }
    <div id ="usergrade" class="editor-field">
        @Html.DropDownListFor(model => model.UserGrade, (SelectList)ViewBag.ListOfUserGrades)
        @Html.ValidationMessageFor(model => model.UserGrade)
    </div>

现在针对处理ajax请求的Controller Code。

    [HttpGet]
    public JsonResult SelectedIndexChanged(string value)
    {
        UserBL bl = new UserBL();
        var grades = new UserGradeBL();
        if (grades.RetrieveAll().Count == 0)
        {
            grades.CreateDefaults();
        }
        var source = grades.RetrieveAll().Where(g => g.UserLevel.Trim() == value.Trim());
        var list = new SelectList(source, "Grade", "Grade");
        ViewBag.ListOfUserGrades = list;

        //List<string> gradelist = new List<string>();
        List<myObj> gradelist = new List<myObj>();
        foreach (var item in source)
            gradelist.Add(new myObj() { label = item.Grade, value = item.Grade });

        var levels = new UserLevelBL();
        if (levels.RetrieveAll().Count == 0)
        {
            levels.CreateDefaults();
        }
        list = new SelectList(levels.RetrieveAll(), "Level", "Level");
        ViewBag.ListOfUserLevels = list;

        var types = new  UserTypeBL();
        if (types.RetrieveAll().Count == 0)
        {
            types.CreateDefaults();
        }
        list = new SelectList(types.RetrieveAll(), "Type", "Type");
        ViewBag.ListOfUserTypes = list;

        return Json(new { grade = gradelist  }, JsonRequestBehavior.AllowGet);
        //return View();
    }    

顺便说一下，它位于一个称为HomeController的控制器中。 我尝试将脚本放在MVC项目随附的Scripts文件夹中的单独文件中，并将其注册在App_Start文件夹文件bundleConfig.cs中，如下所示：

bundles.Add(new ScriptBundle("~/bundles/dropdown").Include(
                    "~/Scripts/dropdown.js"));

然后像这样在底部的此视图页面中调用脚本

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/dropdown")

一切都无济于事。 顺便说一句，我在Win 8上使用VS2012。希望我提供了所有必要的信息。 预先感谢您的帮助，

Answer 1

最后，我找到了答案。 有趣的是，这非常简单。 这是第一个脚本：

 $(document).ready(function () {
            $("#UserLevel").change(function () {
                  var model = $('#UserGrade');
                    model.empty();

                    $.getJSON('/Home/IndexChanged', { value:  $("#UserLevel").val() }, function(data) {
                        $(data.grade).each(function() {
                            $("<option value='" + this.value + "'>" + this.label + "</option>").appendTo(model);
                    });

                })
                .error(function () {
                    alert("replace operation failed");
                });
                return false;
            });
        });

这是Home控制器中的动作

   [AcceptVerbs(HttpVerbs.Get)]
    public ActionResult IndexChanged(string value)
    {

        UserBL bl = new UserBL();
        var grades = new UserGradeBL();
        if (grades.RetrieveAll().Count == 0)
        {
            grades.CreateDefaults();
        }
        var source = grades.RetrieveAll().Where(g => g.UserLevel.Trim() == value.Trim());
        var list = new SelectList(source, "Grade", "Grade");
        ViewBag.ListOfUserGrades = list;

        //List<string> gradelist = new List<string>();
        List<myObj> gradelist = new List<myObj>();
        foreach (var item in source)
            gradelist.Add(new myObj() { label = item.Grade, value = item.Grade });

        ...
        return Json(new { grade = gradelist }, JsonRequestBehavior.AllowGet); 
       //return View();
    }   

就是这样！ 这是我的信息来源： http : //www.schwammysays.net/cascading-select-lists-with-mvc-and-jquery/