Question

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

我的下拉列表：控制器

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。关于为什么的任何想法？

:::: EDIT ::::

@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

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

onchange = "CourseChange"

并在js函数中：

function CourseChange(element) {

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

以及旁注，您不需要在View上再次构建SelectList，只需从ViewBag中投射它：

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

Answer 2

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

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

@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

MVC 4根据DropDownListFor选择更改字段

2 个答案: