How to fill cascading dropdownlist each other by using jquery in mvc 3?

Question

how to load cascading dropdownlist each other asp.net mvc3? how can i do? i have been utilizing from http://geekswithblogs.net/ranganh/archive/2011/06/14/cascading-dropdownlist-in-asp.net-mvc-3-using-jquery.aspx

but i can not. what is mymistake? i added debug red point on LoadJobByCustomerId method. But not working.Pleqase dont say make googling i do it in 48 hours... View:

<%@ 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>

Controller:

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

Answer 1

I'd suggest using Knockout http://knockoutjs.com/ and creating a cascading dropdown list using that. You can create cleaner more maintainable code if you make a ViewModel that the drives the page behaviour.

Have a look at this article 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

We use similar techniques for Continent, Region, Nation all time and the code is very easy to maintain and extend.

Answer 2

For starters, the <script> tag in which you are loading jquery is not properly closed:

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

It should be like this:

<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>
<% } %>

Also jQuery 1.4.4's kinda old. Maybe you wanna switch to a more recent version.

Another things that I have fixed in your code is the usage of Url helpers instead of hardcoding urls, missing closing }); for the document.ready handler, broken markup with inconsistent opening and closing <tr> and <td> tags, ...

I don't know how are you guys writing/indenting your code, but I would really recommend you putting a little more attention.

And next time when developing a javascript intensive web application and something doesn't work, your immediate reflex should be to look in the FireBug console or Chrome developer toolbar (depending on the web browser you are using) instead of posting on Stack Overflow without any investigation. FireBug would have alerted you on at least 50% of the errors you committed in your code.

Further improvement of this code is to get rid of ViewData by introducing view models and the usage of strongly typed helpers, as I have exemplified in this post: https://stackoverflow.com/a/4459084/29407