Question

我终于得到了一对正常工作的级联下拉菜单。不幸的是，在第一个中选择一个项目时，第二个项目加载并立即丢弃空值＆＃34;请选择＆＃34;。我已经找到了如何插入一个SelectListItem与Text =＆＃34;请选择＆＃34;，Value =＆＃34; 0＆＃34;但我犹豫不决。如果可能，我想使用内置的空值。

我在自动生成的Controller＆amp; amp;已设置视图，我目前正在使用“创建”页面。

控制器：

// GET: Books/Create
    public ActionResult Create()
    {
        ViewBag.AuthorID = new SelectList(db.Authors, "AuthorID", "AuthorName");
        //ViewBag.SeriesID = new SelectList(db.Series, "SeriesID", "SeriesName");
        ViewBag.SeriesID = new SelectList(db.Series.Where(v => v.SeriesID == 0), "SeriesID", "SeriesName");
        return View();
    }

    // POST: Books/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "BookID,BookName,AuthorID,SeriesID")] Book book)
    {
        if (ModelState.IsValid)
        {
            db.Books.Add(book);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        ViewBag.AuthorID = new SelectList(db.Authors, "AuthorID", "AuthorName", book.AuthorID);
        ViewBag.SeriesID = new SelectList(db.Series, "SeriesID", "SeriesName", book.SeriesID);
        return View(book);
    }

    public JsonResult GetSeries(int id)
    {
        SelectList list = new SelectList(db.Series.Where(v => v.AuthorID == id), "SeriesID", "SeriesName");

        return Json(new SelectList(db.Series.Where(v => v.AuthorID == id), "SeriesID", "SeriesName"));
    }

查看：

    <script type="text/javascript">
    $(document).ready(function () {
        //Dropdownlist Selectedchange event
        $("#AuthorID").change(function () {
            $("#SeriesID").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetSeries")', // calling json method
                dataType: 'json',
                data: { id: $("#AuthorID").val() },
                success: function (series) {
                    // contains the JSON formatted list passed from the controller
                    $.each(series, function (i, ser) {
                        $("#SeriesID").append('<option value="' + ser.Value + '">' + ser.Text + '</option>');
                    }); // adding option
                },
                error: function (ex) {
                    alert('Failed to retrieve series.' + ex);
                }
            });
            return false;
        })
    });
    </script>
    @using (Html.BeginForm())
    {
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Book</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.BookName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.BookName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.BookName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AuthorID, "Author", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("AuthorID", null, "Please Select", htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.AuthorID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SeriesID, "Series", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("SeriesID", null, "Please Select", htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.SeriesID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
    }

无论它有什么价值，我还试图通过以下方式找出级联下拉列表，但从未使它工作。我想也许是通过遵循公共ActionResult Create（）＆＃39;中使用的格式。方法我可以绕过空值的丢失。

我还想过尝试穿越两者;通过Json＆amp; amp;调用控制器方法通过ViewBag加载，但我对这些方法的理解显然不够先进（如果可能的话）。

失败控制器：

[HttpPost]
[ActionName("GetSeries")]
public ActionResult GetSeries(int id)
{
    ViewBag.SeriesID = new SelectList(db.Series.Where(v => v.AuthorID == id), "SeriesID", "SeriesName");
    return View();
}

观看次数失败：

@using (Html.BeginForm("GetSeries", "Books", FormMethod.Post, new { id = "0" })) 
{
    <div class="form-group">
        @Html.LabelFor(model => model.AuthorID, "Author", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("AuthorID", null, "Please Select",
              htmlAttributes: new
              {
                  @class = "form-control",
                  onchange = "$('#AuthorID').submit()", 
                  name = "action:GetSeries" })
            @Html.ValidationMessageFor(model => model.AuthorID, "", new { @class = "text-danger" })
        </div>
    </div>
}

@using (Html.BeginForm()
{
     // All the other stuff from the view here.
}

Answer 1

您需要在ajax函数中创建它（调用empty清除所有选项，因此您需要将其添加回来）。另请注意，没有内置空值！＆＃34;请选择＆＃34;当您使用接受optionLabel的重载并使用ajax重新填充下拉列表而不是html帮助程序时，由html帮助程序添加的选项。

$("#AuthorID").change(function () {
  $("#SeriesID").empty().append($('<option></option>').text('Please select'));
  ...

注意，您不需要在GetSeries()方法中创建一个选择列表（它只是不必要的开销）

public JsonResult GetSeries(int id)
{
  var data = db.Series.Where(v => v.AuthorID == id).Select(s => new
  {
    Value = s.SeriesID,
    Text = s.SeriesName
  }
    return Json(data));
}

级联下拉正在丢弃＆＃34;请选择＆＃34;

1 个答案: