c# - 问题级联下拉列表，生成的下拉列表未将选定值发布到服务器

Question

这是我在图片中的观点

代码运行良好，但是......

当我提交表单时，它只发送第一个下拉列表的值(我检查了浏览器网络接收到的参数)，而且当我查看页面源代码时，它不显示我使用 ajax 函数生成的生成选项。

这是我的代码

生成我的第一个下拉列表的操作

public ActionResult TwoDropDownList()
{
    HotelContext H = new HotelContext();
    ViewBag.DropDownListOne = new SelectList(H.Continent.ToList(), "Id", "Name");
    return View();
}

返回第二个下拉列表数据的 json 的操作

[HttpPost]
public JsonResult UpdateCountryDropDownList(int ContinentId)
{
    HotelContext H = new HotelContext();
    List<SelectListItem> CountryNames = new List<SelectListItem>(); 
    List<Country> Co = H.Country.Where(x => x.ContinentId == ContinentId).ToList();
    Co.ForEach(x =>
    {
        CountryNames.Add(new SelectListItem { Text = x.Name, Value = x.Id.ToString() });
    });   
    return Json(CountryNames , JsonRequestBehavior.AllowGet);
}

我的 Ajax 调用

@model Hotel.Models.Continent
 <script>
      $(document).ready(function () {
          $("#Name").change(function () {
              var ContinentoId = $(this).val();
              $.ajax({
                  type: "POST",
                  dataType: "json",
                  data: { ContinentId: ContinentoId },
                  url: '@Url.Action("UpdateCountryDropDownList","Home")',
                  success: function (result) {
                      var Country = "<select id='ddlCountry'>";
                      Country = Country + '<option value="">--Select--</option>';
                      for (var i = 0; i < result.length; i++) {
                          Country = Country + '<option value=' + result[i].Value + '>' + result[i].Text + '</option>';
                      }
                      Country = Country + '</select>';
                      $('#Countries').html(Country);
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                      console.log(arguments)
                  }
              });
          });
      })
</script>

我的看法

@using(Html.BeginForm()){
    SelectList se = ViewBag.DropDownListOne;
    @Html.DropDownListFor(x=>x.Name,se,"--Select--")
    <div id ="Countries">
       @Html.DropDownList("ddlCountry",new List<SelectListItem>(),"--Select--")
    </div>
    <input type="submit" value="submit" style="margin-top:100px;" />
}

HTTPPost Action

[HttpPost]
public string TwoDropDownList(string Name, string ddlCountry)
{
    if (string.IsNullOrEmpty(Name) || string.IsNullOrEmpty(ddlCountry))
    {
        return ("you must select Both");
    }
    else
        return ("everything is working fine");
}

Answer 1

您已经有一个 <select>带有 name="ddlCountry" 的元素(由 @Html.DropDownList("ddlCountry", new List<SelectListItem>(), "--Select--") 生成，但在 ajax 调用中，您覆盖它并创建一个没有 <select> 属性的新 name 元素(因此它的值不会回发。

在成功回调中，您应该创建 <option>元素并将它们附加到现有的 <select>

success: function (result) {
    var country = $('#ddlCountry); // get the existing element
    country.empty().append($('<option></option>').val('').text('--Select--'));
    $.each(result, function(index, item) {
        country.append($('<option></option>').val(item.Value).text(item.Text));
    });
}

旁注:您的方法应该返回匿名对象的集合，而不是 SelectListItem当您不使用它们时，通过网络发送额外数据(SelectListItem 的其他属性)是没有意义的。