Question

我正在尝试按照本教程创建一组新的级联下拉列表： http://blogs.msdn.com/b/rickandy/archive/2012/01/09/cascasding-dropdownlist-in-asp-net-mvc.aspx

问题是它不起作用我基本上是javascript的文盲（目前我没有时间坐下来学习它），不知何故下拉列表不起作用，只有第一个显示第一个层次结构信息。

这就是我所做的：

首先是控制器：

这是索引方法：

public ActionResult Index()
    {
        var list = repo.GetParentEstablishments();

         ViewBag.Parent = (new SelectList(list.ToArray(),"EstablishmentId","Name"));
        return View();

    }

这是应该返回所选父亲的子项列表的方法：

 [HttpPost]
    public ActionResult Children(int parentId)
    {
        var parents = repo.GetChildrenEstablishments(parentId);
        return Json(new SelectList(parents, "EstablishmentId", "Name"));
    }

以下是索引方法的视图：

@using (Html.BeginForm("Index", "Ticket", FormMethod.Post, new { id =     "ParentChildrenFormID", data_childrenListAction = @Url.Action("ChildrenList") }))
{
<fieldset>
    <legend> Parent/Children</legend>
    @Html.DropDownList("Parents", ViewBag.Parent as SelectList, "Select a Parent", new {id="ParentsID"})
    <div id="ChildrenDivId">
        <label for="Children">Children </label>
        <select id="ChildrenID" name="Children"></select>
    </div>
    <p>
        <input type ="submit" value="Submit" id="SubmitID" />
    </p>
 </fieldset>
}
<script src ="@Url.Content("~/Scripts/parentChildren.js")"></script>

最后这是脚本文件：

$(function () {

$('#ChildrenDivId').hide();
$('#SubmitID').hide();

$('#ParentsID').change(function () {
    var URL = $('#ParentChildrenFormID').data('childrenListAction');
    $.getJSON(URL + '/' + $('#ParentsID').val(), function (data) {
        var items = '<option>Select a Children</option>';
        $.each(data, function (i, child) {
            items += "<option value='" + child.value+ "'>" + child.Name + "</option>";
            // state.Value cannot contain ' character. We are OK because state.Value = cnt++;
        });
        $('#ChildrenID').html(items);
        $('#StatesDivID').show();

    });
});

$('#ChildrenID').change(function () {
    $('#SubmitID').show();
});
});

对于我从javascript函数中设法理解的内容，具有子项标签和下拉列表的div应该在页面加载后显示为隐藏，并在用户从第一个列表中选择父项时显示没有发生，而是一旦页面加载，一切都会显示出来。另外，一旦我选择了父级，第二个列表上没有任何内容，我可以从中推断出javascrip文件没有在用户浏览器上执行，为什么不执行？我做错了什么？

提前感谢，我们将不胜感激。

Answer 1

您在以下行中出现错误

items += "<option value='" + child.value + "'>" + child.Name + "</option>";

应该是：

items += "<option value='" + child.Value + "'>" + child.Text + "</option>";

由于您的控制器操作返回SelectList，此类为IEnumerable<SelectListItem>，其中SelectListItem有2个属性Value和Text。

您的代码还有另一个问题。您已经使用以下内容构建控制器操作的URL：

URL + '/' + $('#ParentsID').val()

将生成以下格式的网址：

/SomeController/Children/123

但Children行动的行动论点称为parentId。如果您使用默认路由设置，则只会将{id}参数作为uri路径的一部分发送（这是默认路由模式：{controller}/{action}/{id}而不是{controller}/{action}/{parentid}）。因此，您应该更改路由设置或传递parentId参数，如下所示：

$.getJSON(URL, { parentId: $('#ParentsID').val() }, function (data) {
    ...
});

您的代码的另一个问题是您的Children conrtoller操作使用[HttpPost]属性修饰，但$.getJSON方法发送GET请求。所以它不会起作用。您可以改为使用$.post方法：

$.post(URL, { parentId: $('#ParentsID').val() }, function (data) {
    ...
});

另一个问题是，您显示的是StatesDivID，但您隐藏的实际div是ChildrenDivId。确保显示正确的元素：

$('#ChildrenDivId').show();

还要确保在parentChildren.js脚本之前引用了jQuery脚本。现在，您已将脚本包含在视图中，但无法看到包含的jQuery。也许你在_Layout中有它。

我建议您使用javascript调试工具（如FireBug或Chrome开发人员工具栏）来分析您的javascript代码。

mvc4上的级联下拉列表没有更新也没有加载javascript文件

1 个答案: