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

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