Как заполнить каскадный выпадающий список друг с другом, используя jquery в mvc 3?

Как загрузить каскадный выпадающий список друг друга asp.net mvc3? Как я могу сделать? Я использовал с http://geekswithblogs.net/ranganh/archive/2011/06/14/cascading-dropdownlist-in-asp.net-mvc-3-using-jquery.aspx

но я не могу. что такое mymistake? я добавил отладочную красную точку на метод LoadJobByCustomerId. Но не работает.Pleqase не говорит, что поискать в Google, я делаю это в течение 48 часов... Просмотр:


<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ChildSite.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript" src="../../Scripts/jquery-1.4.4.js">


    $(document).ready(function () {
        $("#ddlCustomers").change(function () {
            var idColour = $(this).val();
            $.getJSON("/Job/LoadJobByCustomerId", { customerId: idColour },
function (modelData) {
    var select = $("#ddlJobs");
    select.empty();
    select.append($('<option/>', {
        value: 0,
        text: "Select a Colour"
    }));
    $.each(modelData, function (index, itemData) {

        select.append($('<option/>', {
            value: itemData.Value,
            text: itemData.Text
        }));
    });
});
        }); 


</script>
  <% 
   using (Html.BeginForm())
      { %>

       <table style="padding:25px; margin:10px 10px 10px 10px;" id="sample">
                <tr><td>Customer Name: </td><td>
               <%= Html.DropDownList("Customers", null, "** Please Select **", new { id="ddlCustomers"})%>
                </td></tr>
                 <tr><td>Job Name:</td><td>
              <%= Html.DropDownList("Jobs", null, "** Please Select **", new { id = "ddlJobs" })%>
                </td></tr>
                </table>
                <br />
                <div>

                </div>
         <%}%>

</asp:Content>

контроллер:


 public class JobController : Controller
    {
     public ActionResult Index()
        {
            ViewData["Customers"] = new SelectList(CustomerOperation.GetCustomers().Items, "Id", "Name", null);
            ViewData["Jobs"] = new SelectList(JobOperation.GetCustomersAssemblyList().Items, "scheduleId", "name", null);
            return View();
        }


        [AcceptVerbs(HttpVerbs.Get)]
        public JsonResult LoadJobByCustomerId(int customerId)
        {
            var jobs = JobOperation.GetCustomersAssemblyList(customerId).Items;

            var jobItems = jobs.Select(c => new SelectListItem()
            {
                Text = c.name,
                Value = c.scheduleId.ToString()

            });

            return Json(jobItems, JsonRequestBehavior.AllowGet);
        }
Источник

2 ответа

Решение

Для начала, <script> тег, в который вы загружаете jquery, закрывается некорректно:

<script type="text/javascript" src="../../Scripts/jquery-1.4.4.js">

Должно быть так:

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.4.js") %>"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#ddlCustomers').change(function () {
            var idColour = $(this).val();
            var url = '<%= Url.Action("LoadJobByCustomerId", "Job") %>';
            $.getJSON(url, { customerId: idColour }, function (modelData) {
                var select = $("#ddlJobs");
                select.empty();
                select.append($('<option/>', {
                    value: 0,
                    text: "Select a Colour"
                }));
                $.each(modelData, function (index, itemData) {
                    select.append($('<option/>', {
                        value: itemData.Value,
                        text: itemData.Text
                    }));
                });
            });
        }); 
    });
</script>

<% using (Html.BeginForm()) { %>
    <table style="padding:25px; margin:10px 10px 10px 10px;" id="sample">
        <tr>
            <td>Customer Name: </td>
            <td>
                <%= Html.DropDownList(
                    "Customers", 
                    null, 
                    "** Please Select **", 
                    new { id = "ddlCustomers" }
                )%>
            </td>
        </tr>
        <tr>
            <td>Job Name:</td>
            <td>
                <%= Html.DropDownList(
                    "Jobs", 
                    null, 
                    "** Please Select **", 
                    new { id = "ddlJobs" }
                )%>
            </td>
        </tr>
    </table>
<% } %>

Также jQuery 1.4.4 довольно старый. Может быть, вы хотите перейти на более свежую версию.

Еще одна вещь, которую я исправил в вашем коде, - это использование помощников по URL вместо жесткого кодирования, пропуски закрытия }); для document.ready обработчик, неправильная разметка с непоследовательным открытием и закрытием <tr> а также <td> теги,...

Я не знаю, как вы, ребята, пишете / делаете отступы в своем коде, но я действительно рекомендую вам уделить немного больше внимания.

И в следующий раз, когда вы разрабатываете веб-приложение с интенсивным использованием javascript, и что-то не работает, ваш немедленный рефлекс должен выглядеть в консоли FireBug или на панели инструментов разработчика Chrome (в зависимости от используемого вами веб-браузера) вместо публикации в Stack Overflow без расследование. FireBug предупредил бы вас по крайней мере о 50% ошибок, которые вы допустили в своем коде.

Дальнейшее улучшение этого кода состоит в том, чтобы избавиться от ViewData путем представления моделей представления и использования строго типизированных помощников, как я проиллюстрировал в этом посте: /questions/32405548/kaskadnyie-vyipadayuschie-spiski-v-mvc-3-razor-view/32405561#32405561

Источник

Я бы предложил использовать Knockout http://knockoutjs.com/ и создать с его помощью каскадный выпадающий список. Вы можете создать более понятный и понятный код, если создадите ViewModel, который управляет поведением страницы.

Посмотрите на эту статью http://weblogs.asp.net/raduenuca/archive/2011/03/06/asp-net-mvc-cascading-dropdown-lists-tutorial-part-1-defining-the-problem-and-the-context.aspx

Мы постоянно используем похожие методы для Континента, Региона, Нации, и код очень прост в обслуживании и расширении.

Источник
Другие вопросы по тегам