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

cascading dropdown list on mvc4 not updating nor loading javascript file

本文关键字：加载 javascript 文件 更新 mvc4 级联 下拉列表      更新时间：2023-09-26

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

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

这是我所做的:

首先是控制器:

这是index方法:

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"));
    }

这是index方法的视图:

@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应该出现隐藏一旦页面加载和出现一旦用户从第一个列表中选择一个父，目前这并没有发生，而是一切都显示一旦页面加载。此外，一旦我选择了一个父没有发生在第二个列表，我可以从中推断，javascript文件没有在用户浏览器上执行，为什么它没有被执行?我做错了什么?

提前感谢，任何帮助都将不胜感激。

下面一行出现错误

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

应该是:

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

因为你的控制器动作返回一个SelectList，这个类是一个IEnumerable<SelectListItem>，其中SelectListItem有两个属性称为Value和Text。

你的代码还有另一个问题。您已经使用以下代码构造了指向控制器动作的url:

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

将产生一个url格式为:

/SomeController/Children/123

但是您的Children动作的action参数称为parentId。如果您使用默认路由设置，则只有{id}参数将作为uri路径的一部分发送(这是默认路由模式:{controller}/{action}/{id}而不是{controller}/{action}/{parentid})。所以你应该改变你的路由设置，或者像这样传递parentId参数:

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

代码的另一个问题是，您的Children控制器动作用[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代码。

相关文章：