Javascript MVC 4基于DropDownList更改字段以供选择

我有一个表单，它有一个由不同课程名称组成的下拉列表和一个文本框，其中包含基于下拉选择的下一个课程部分的编号及其在数据库中的最高现有部分编号。做出选择后，javascript将被调用，然后调用my 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>

当我进行更改时，将调用控制器中的方法并传回一个值并设置文本框，但所选项目的值将变为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")
}

---

您可以通过onchange事件传递dropdownlist的引用：

onchange = "CourseChange"

在js函数中：

function CourseChange(element) {

    var selected = element.Value;
    // or
    var selected = $(element).val();

另外，您不需要在视图上再次构建SelectList，只需从ViewBag中投射它即可：

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

---

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

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

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

使用前面提到的另一个好建议，您可以将脚本改为在上使用

---

下面是一个dotnetfiddle示例

这总是隐式传递的。这里的问题是，用户正在将onchange处理程序设置为对CourseChange的实际调用，这不允许JavaScript传递任何内容。在不延迟函数的情况下，将onchange设置为just-CourseChange，或者更好的是，使用一个非结构化的事件处理程序，如$'Whather'。在'change'上，使用CourseChange；。因此，当我尝试这样做时，以及下面的答案，javascript函数似乎没有被调用，或者我的控制器方法没有被调用。它没有命中控制器中的断点，也没有将字段更改为默认参数。函数CourseChangeelement{var CourseTile=$element.val；$.getJSONNextClassNumber，CourseTile，函数数据{$'ClassNumber'.valdata；}；}；onchange=CourseChange我也尝试过使用on，但是当选择正确时它不会调用javascript，所以我让它替换文本框中的文本。但是表单上的提交按钮没有响应。所有字段都像以前一样填写，但是单击它，它什么也不做。最初我有下拉列表，然后用户会指定类号和用于此操作的按钮。请确保该按钮为submit或submit类型，并且它位于添加到postIt的整个视图中看起来很好。。可能是您看不到的验证错误。将validationsummary更改为@Html.ValidationSummaryfalse如果不是这样，那么您可能需要安装类似Fiddler的东西来查看数据试图发布到的位置。

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