MVC 4基于DropDownListFor选择更改字段

本文关键字：字段 选择 DropDownListFor 基于 MVC | 更新日期: 2023-09-27 18:00:44

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

：：：编辑：：：：

@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")
}

MVC 4基于DropDownListFor选择更改字段

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

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

@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

您可以通过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" })
相关文章：