ASP.NET MVC 5 使用 3 DropDownList 查询数据库答案

【问题标题】：ASP.NET MVC 5 querying database with 3 DropDownListASP.NET MVC 5 使用 3 DropDownList 查询数据库
【发布时间】：2015-07-22 19:58:49
【问题描述】：

大家好，这是我在这里的第一篇文章，所以如果我说什么或做一些愚蠢的事情，请保持温和：P 这也是我在 ASP.NET 中的第一个真实项目，我确信我在代码中犯了一些错误。

我正在开发一个 ASP.NET MVC 5 Web 应用程序，该应用程序具有 3 个 DropDownLists，其中填充了来自数据库的字符串。这 3 个列表是学期、课程和顾问名称。我希望能够根据所做的选择动态更改 DropDownLists。

我目前所做的假设是首先选择学期，然后是课程，然后是顾问姓名。选择学期后，代码不会填充顾问姓名。

在我理解了我的错误之后，我还希望能够以任何顺序选择 3 个选项中的任何一个。

这是我的控制器

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

这是我的看法

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

【问题讨论】：

要填充您的级联下拉菜单，请参阅this answer。有关工作示例，请参阅this DotNetFiddle

标签： c# asp.net asp.net-mvc asp.net-mvc-4 asp.net-mvc-5

【解决方案1】：

您可以使用 jQuery，例如对于 2 选项我们可以使用以下代码：

$('#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);
                   });
               });
           });

对于像您的示例这样的 3 个选项，我们可以使用如下内容：

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

【讨论】：

如果我想先提供选择课程或学期的选项，然后让该选项更改其他两个下拉列表，怎么样？我看过的所有级联下拉列表示例都从一个特定的列表开始，然后移至下一个。
@robertguy 在这种情况下（我的回答），如果您更改学期，其他下拉列表将被选中。

【解决方案2】：

您正在寻找的是构建一个级联下拉列表。在选择下拉菜单时，您需要实现一些东西以通过 ajax 加载数据，或者您需要执行回发（不推荐）。

查看this answer，或查看this post on codeproject 的教程。

【讨论】：