каскадные раскрывающийся список на mvc4 не обновляется ни загрузка файл JavaScript

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

За то, что я сумел понять из яваскрипта функции, в 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.

Есть еще одна проблема с вашим кодом. Вы использовали folllowing построить URL для вашего действия контроллера:

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

, который приведет к URL вида:

/SomeController/Children/123 

Но действие аргумент вашего Children действия называется parentId. Если вы используете настройку маршрута по умолчанию, только параметр {id} будет отправлен как часть og пути uri (это шаблон маршрута по умолчанию: {controller}/{action}/{id}, а не {controller}/{action}/{parentid}).Таким образом, вы должны либо изменить настройки маршрута или передать параметр ParentID так:

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

Еще одна проблема с вашим кодом, что ваши дети conrtoller действие украшен атрибутом [HttpPost] но метод $.getJSON посылает запрос GET. Так что это не сработает. Вы можете использовать метод $.post вместо:

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

Другая проблема заключается в том, что вы показываете StatesDivID но ваш фактический ДИВ, который был скрыт в ChildrenDivId. Убедитесь, что вы показываете правильный элемент:

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

Кроме того, убедитесь вы скрипт JQuery ссылки до вашего parentChildren.js сценария. Прямо сейчас вы включили свой скрипт внутри представления, но не можете видеть включенный jQuery. Возможно, у вас это есть в вашем _Layout.

Я бы порекомендовал вам использовать инструмент отладки javascript, такой как панель инструментов разработчика FireBug или Chrome, для анализа кода javascript.