mvc4 : cascading dropdown

Question

I can’t seem to get my head around ajax and json

I want to do a cascading dropdown and I am trying to get the data to a div to start off with. Here is the script

<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
<script>

    $(function () {
        $('#funtiontype').change(function () {
            var selectedValue = $(this).val();

            $.ajax(
                {
                  // url: $(this).data('url'),
                  // source: "/EmployeeReps/GetDescription",
                url: "~/EmployeeReps/GetDescription",
                type: 'GET',
                cache: false,
                data: {value: selectedValue },
                success: function (result) {
                      $('#description').html(result.employeelist);
                     }
                });

            });

        });

</script>

And the controller

[AcceptVerbs(HttpVerbs.Get)]
        public ActionResult GetDescription(string value)
        {

            //get the data from DB
            var employeelist =(from s in db.tble_employeeReps where s.em_function==value 
                             select s);


            return Json(employeelist.ToList(), JsonRequestBehavior.AllowGet);
        }

the HTML @using (Html.BeginForm()) {

    <fieldset>

        <div class="editor-label">Function*</div>
        <div class="editor-field">

          <select id = "funtiontype">
               <option value = "">Please Select</option>
               <option value = "Finance">Finance</option>
               <option value = "Non-Finance">Non-Finance</option>
          </select>
        </div>

        <p></p>
        <p>
            <input type="submit" value="Vote" />
        </p>
    </fieldset>
    <div id="description"></div>
}

But I am struggling to get any data. Please can anyone help

Many thanks in advance Hesh

http://stackoverflow.com/questions/4458970/cascading-drop-downs-in-mvc-3-razor-view — Ravi Gadag, Mar 27 '13 at 17:40

scott.korin · Accepted Answer · 2013-03-28T12:44:24.070

This line in your controller:

        return Json(employeelist.ToList(), JsonRequestBehavior.AllowGet);

is changing your list of employees into a JSON string. The string is an array of objects.

In your ajax call:

        $.ajax(
            {
              // url: $(this).data('url'),
              // source: "/EmployeeReps/GetDescription",
            url: "~/EmployeeReps/GetDescription",
            type: 'GET',
            cache: false,
            data: {value: selectedValue },
            success: function (result) {
                  $('#description').html(result.employeelist);
                 }
            });

        });

result is that same array of objects. result will not have a property called employeelist. It will actually be an array of the employees.

You will need to loop on that array and create HTML to display the employees:

        $.ajax({
            url: "~/EmployeeReps/GetDescription",
            type: 'GET',
            cache: false,
            data: {value: selectedValue },
            success: function (result) {
                var employeeHTML = "";
                for(count = 0; count < result.length; count++) {
                    employeeHTML += "<p>" + result[count].EmployeeName + "</p>"; //your fields here
                }
                $('#description').html(employeeHTML);
            });
        });

Scott Many thanks for your help and explanation. It works nicely thanks again Hesh — hesh, Mar 28 '13 at 09:49

mvc4 : cascading dropdown

1 Answers1