javascript - MVC 4 根据 DropDownListFor 选择更改字段

Question

我有一个表单，其中有一个由不同类(class)名称组成的下拉列表和一个文本框，其中将包含基于下拉选择的下一个类(class)部分的编号及其数据库中现有的最高部分编号。选择完成后，将调用 javascript，然后调用我的 Controller 方法来确定它应该是哪个部分编号，然后填充文本框。

我的下拉列表: Controller

ViewBag.CourseList = new SelectList(db.CourseLists, "CourseTitle", "CourseTitle");

我的下拉列表:查看

@Html.DropDownListFor(model => model.CourseTitle,
                new SelectList(@ViewBag.CourseList, "Value", "Text"), " -- Select Course -- ", new { @id = "CourseTitle", onchange = "CourseChange()" })
@Html.ValidationMessageFor(model => model.CourseTitle)

文本框:

@Html.EditorFor(model => model.ClassNumber, new { @id = "ClassNumber" })
@Html.ValidationMessageFor(model => model.ClassNumber)

Javascript 函数:

<script type="text/javascript">
  function CourseChange() {
      var courseTitle = $('#CourseTitle').val(); //Is always null
      $.getJSON("NextClassNumber", courseTitle, updateClassNumber);
  };

  updateClassNumber = function (data) {
      $('#ClassNumber').val(data);
  };
</script>

当我进行更改时，我的 Controller 中的方法将被调用并传回一个值并设置我的文本框，但所选项目的值将显示为 null。关于原因有什么想法吗？

::::编辑::::

@model QIEducationWebApp.Models.Course

@{
    ViewBag.Title = "Add New Course";
}

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>   
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>


<script type="text/javascript">
    $(function () {
        $('#CourseTitle').on('change', function () {
            var courseTitle = $(this).val();
            $.ajax({
                url: '@Url.RouteUrl(new{ action="NextClassNumber", controller="Course"})',
                data: { courseTitle: courseTitle },
                type: 'get'
            }).done(function (data) {
                $('#ClassNumber').val(data);
            });
        });
    });

</script>

<h1 class="page-header">@ViewBag.Title</h1>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <table class="table">
        <tr>
            <th class="table-row">
                Course Title:
            </th>
            <td class="table-row">
                @Html.DropDownListFor(model => model.CourseTitle1,
                    @ViewBag.CourseList as SelectList, " -- Select Course -- ", new { @class="form-control", @id="CourseTitle" })
                @Html.ValidationMessageFor(model => model.CourseTitle)
            </td>
        </tr>
        <tr>
            <th class="table-row">
                Class Number:
            </th>
            <td class="table-row">
                @Html.EditorFor(model => model.ClassNumber, new { @id = "ClassNumber" })
                @Html.ValidationMessageFor(model => model.ClassNumber)
            </td>
        </tr>
        <tr>
            <th class="table-row">
                Course Type:
            </th>
            <td class="table-row">
                @Html.DropDownList("CourseType", " -- Select Type -- ")
                @Html.ValidationMessageFor(model => model.CourseType)
            </td>
        </tr>
        <tr>
            <th class="table-row">
                Start & End Date:
            </th>
            <td class="table-row">
                @Html.EditorFor(model => model.CourseStartDate)
                @Html.ValidationMessageFor(model => model.CourseStartDate)
            </td>
            <td class="table-row">
                @Html.EditorFor(model => model.CourseEndDate)
                @Html.ValidationMessageFor(model => model.CourseEndDate)
            </td>
        </tr>
        <tr><td class="table-row-blank"></td></tr>
        <tr>
            <td class="table-row-button">
                <input class="button" type="submit" value="Create" />
                <input type="button" class="button" value="Cancel" 
                    onclick="location.href='@Url.Action("Index")'" />
            </td>
        </tr>
    </table>
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 1

如果正确生成选择列表，您的代码应该可以正常工作。

我会使用上面建议的一部分并使用

@Html.DropDownListFor(model => model.CourseTitle,
            (SelectList)ViewBag.CourseList,
            " -- Select Course -- ",
            new { onchange = "CourseChange()" })

使用已经提到的另一个好建议，您可以更改脚本以使用 on

<script type="text/javascript">
    $(function () {
        $('#CourseTitle').on('change', function () {
            var courseTitle = $(this).val();
            $.getJSON("NextClassNumber", courseTitle, function (data) {
                $('#ClassNumber').val(data);
            });
        });
    });
</script>

这是一个 dotnetfiddle 示例。 DotNetFiddle