c# - Show dropdown list based on the selected dropdown

Question

In my controller, I have this list of categories to be displayed in my view. This is for reporting section of my application.

public SelectList getFields()
    {
        List<SelectListItem> field = new List<SelectListItem>();

        field.Add(new SelectListItem { Text = "Department", Value = "dept" });
        field.Add(new SelectListItem { Text = "Referrer", Value = "ref" });
        field.Add(new SelectListItem { Text = "Monthly", Value = "cd_key" });

        return  new SelectList(field, "Value", "Text");

    }

    public ActionResult HR_RecRep()
    {
        ViewBag.fields = getFields();
        return View();
    }

Then in my View:

<script type="text/javascript">
$(document).ready(function () {
    //this function will call the views with id=category
    $('#fields').change(function () {
        //Get the selected value from the dropdownlist 
        var rep = $(this).val();
        //alert(cat);
        if (rep.toUpperCase() == "DEPT") {
            var text = document.getElementById("dept");
            text.style.display = "inline";

            $.getJSON('/Reports/getDepartment/', function (data) {
                var items = '<option>Select Department...</option>';
                $.each(data, function (i, department) {
                    items += "<option value='" + department.Value + "'>" + department.Text + "</option>";
                });
                $('#department').html(items);
            });

            var textValue = document.getElementById("ref");
            textValue.style.display = "none";
        } 
    });
});

</script>
<div style="border:0px solid black;width:950px;">
Reports By: @Html.DropDownList("fields", String.Empty)
<span id="dept" style="display:none;"><select id="department" name="department"></select></span>
<span id="ref" style="display:none;"><select id="referrer" name="referrer"></select></span>

In my view, it successfully displays the fields for the Reports By Section. I want that whenever I choose "dept" in the dropdownlist which refers to the Department in the Category, it should show the dropdownlist for all the departments in the database.

Here's my controller for getting the list of department.

public SelectList getDepartment()
    {
        ViewBag.department = new SelectList(db.rms_departments, "dept_id", "dept_shortname");
        return ViewBag;
    }

When I tried to use the code, it doesn't show the dropdownlist for the department when I choose department in the Reports. And also with the Referrer, when I will choose it from the dropdown, it should show the dropdown for all the employees in the database.

Can you please assist me ? Thanks a lot.

Maybe there's something to do with my script?

Answer 1

Your problem is that you are not returning JSON from your action method, modify your action to return JSON:

public ActionResult getDepartment()
{
   var departments = db.rms_departments.Select(x=> 
                                     new 
                                     { 
                                       dept_id=dept_id,
                                       dept_shortname=dept_shortname
                                     });
   return JSON(departments,JsonRequestBehavior.AllowGet);
}

and in script modify line:

items += "<option value='" + department.Value + "'>" + department.Text + "</option>";

to:

items += "<option value='" + department.dept_id+ "'>" + department.dept_shortname+ "</option>";