ASP.NET MVC 5 querying database with 3 DropDownList

Question

Hello everyone this is my 1st post on here so be gentle if I say something or do something dumb :P Also this is my 1st real project in ASP.NET and I am sure that I made some mistake in my codes.

I am working on an ASP.NET MVC 5 web app that has 3 DropDownLists that are populated with strings from a database. The 3 lists are Semester, Course, and Consultant name. I want to be able to dynamically change the DropDownLists based on the selections made.

What I currently have done assumes that the semester is picked 1st followed by course then consultant name. The code doesn't populate the consultants name's when after picking semester.

After I understand my mistakes I will also want to have it where any of the 3 options can be chosen in what ever order.

this is my controller

 public ActionResult Index(string Semester1, string Course1, string Consultant1)
    {


        ViewBag.semester = new SelectList(db.StudentInfos.Select(x => x.semester).Distinct().OrderBy(x => x));
        ViewBag.course = new SelectList(db.StudentInfos.Select(x => x.WCOnlineCourse) .Distinct().OrderBy(x => x));
        ViewBag.consultant = new SelectList(db.StudentInfos.Select(x => x.consultant).Distinct().OrderBy(x => x));

        if (Semester1 != null)
        {

            ViewBag.course = new SelectList(db.StudentInfos.Where(x => x.semester == Semester1).Select(x => x.WCOnlineCourse).Distinct().OrderBy(x => x));

            ViewBag.consultant = new SelectList(db.StudentInfos.Where(x => x.semester == Semester1).Select(x => x.consultant).Distinct().OrderBy(x => x));


            if (Course1 != null)
            {
                ViewBag.consultant = new SelectList(db.StudentInfos.Where(x => x.semester == Semester1).Where(x => x.WCOnlineCourse == Course1).Select(x => x.consultant).Distinct().OrderBy(x => x));
            }

        }



        return View();
    }

this is my view

@model IEnumerable<StudentSurvey.Models.StudentInfo>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


<table class="table">
    <tr>

        <th>
            Semester
        </th>

        <th>
            Course
        </th>

        <th>
            Consultant
        </th>

    </tr>
    <tr>

        @using (Html.BeginForm("Index", "StudentInfos", FormMethod.Post))
        {
            <td>
                @Html.DropDownList("Semester1", (SelectList)ViewBag.semester, "Select Semester", new { onchange = "this.form.submit();" })
            </td>

            <td>
                @Html.DropDownList("Course1", (SelectList)ViewBag.course, "Select Course", new { onchange = "this.form.submit();" })
            </td>

            <td>
                @Html.DropDownList("Consultant1", (SelectList)ViewBag.consultant, "Select Consultant", new { onchange = "this.form.submit();" })
            </td>
        }


    </tr>

</table>

For populating your cascading dropdowns, refer [this answer](http://stackoverflow.com/questions/28627421/better-way-to-load-2-dropdown-in-mvc/28640420#28640420). For a working example refer [this DotNetFiddle](https://dotnetfiddle.net/GTYuJV) — , Jul 23 '15 at 00:15

score 1 · Answer 1 · edited May 23 '17 at 10:30

1

What you are looking for is building a cascading drop down list. You will need to either implement something to load data via ajax as a drop down is selected or you will need to do a postback (not recommended).

See this answer, or for a tutorial look at this post on codeproject.

edited May 23 '17 at 10:30

Community

1
1

answered Jul 22 '15 at 20:07

Kevin Harker

406
2
7

Sirwan Afifi · Accepted Answer · 2015-07-22T20:16:21.167

You can use jQuery, For example for 2 option we can use this code:

$('#Cities').change(function () {                
               jQuery.getJSON('@Url.Action("SelectTown")', { id: $(this).val() }, function (data) {
                   $('#Towns').empty();
                   jQuery.each(data, function (i) {
                       var option = $('<option></option>').val(data[i].ID).text(data[i].Name);
                       $("#Towns").append(option);
                   });
               });
           });

And for 3 options like your example we can use something like this:

$(function (){
  $('#semester').change(function () {
    jQuery.getJSON('/Semester/GetCourse/', { id: $(this).attr('value') }, function (data) {
        jQuery.each(data, function (i) {
            var option = $('<option></option>').attr("value", data[i].Id).text(data[i].Title);
            $("#course").append(option);
        });
    });
    jQuery.getJSON('/Consultant/GetConsultant/', { id: $("#course").attr('value') }, function (man) {
        jQuery.each(man, function (i) {
            var option = $('<option></option>').attr("value", man[i].Id).text(man[i].Title);
            $("#mantaqeh").append(option);
        });
    });
  });
});

How about if I want to give the option to select Course or Semester first then have that choice change the other two drop down list? all the examples of cascading drop down lists I've looked at start with a specific one then moves to the next. — robertguy, Jul 23 '15 at 18:22
@robertguy in this case (my answer), If you change Semester, other drop down lists get selected. — Sirwan Afifi, Jul 23 '15 at 18:36

ASP.NET MVC 5 querying database with 3 DropDownList

2 Answers2