C# 级联下拉列表-ASP.NET MVC

我使用ASP.NET MVC，我有一个数据库的ODBC连接，并从控制器中检索了两个下拉列表，以便使用查询查看

这两个下拉列表是：

 @Html.DropDownListFor(model => model.storageLocation, new SelectList(Model.locationGroupDD, "storageLocation", "storageLocation"), "Choose Location Group", new { @id = "storageLocation", @class = "dropdown1" })

@Html.DropDownListFor(model => model.storageLocationList, new SelectList(Model.locationDD,"storageLocationList","storageLocationList"), "Choose Location", new { @id = "storageLocationListDropDown", @class = "dropdown1" })

我是JQuery新手，不知道如何编写脚本。但是，我在网上找到了这个脚本，并尝试使用以下内容进行必要的更改，但我确实不知道如何修改/继续。感谢您的帮助！多谢各位

以下是我用于从数据库检索数据的查询：

 For drop downlist 1: select abc from xyz;
For drop downlist 2: select pqr from lmn where abc = "some value";

我想将下拉列表1中的选定值传递给控制器，以执行第二个下拉列表的查询。

请按照以下步骤在ASP.NET MVC中创建级联下拉列表： 1。在控制器中：

public class YourControlleNameController : Controller
{
   public ActionResult Create()
   {
        var LocationGroupDDList = _dbContext.LocationGroupDD.Select(lgdd => 
                                             new { lgdd.LocationGroupDDId, lgdd.LocationGroupDDName }).ToList();

        ViewBag.LocationGroupDDSelectList = new SelectList(LocationGroupDDList, "LocationGroupDDId", "LocationGroupDDName");

        ViewBag.LocationDDListSelectList = new SelectList(new List<LocationDD>(), "LocationDDId", "LocationDDName");

        return View();
   }

  [HttpPost]
  public ActionResult Create(YourModel model, string LocationGroupDDId)
  {
        if (ModelState.IsValid)
        {
            // Do necessary staff here
        }
        var LocationGroupDDList = _dbContext.LocationGroupDD.Select(lgdd => 
                                             new { lgdd.LocationGroupDDId, lgdd.LocationGroupDDName }).ToList();

        ViewBag.LocationGroupDDSelectList = new SelectList(LocationGroupDDList, "LocationGroupDDId", "LocationGroupDDName",LocationGroupDDId);

        var LocationDDList = _dbContext.LocationDD.Where(ldd => ldd.LocationGroupDDId == LocationGroupDDId).Select(ldd => new {ldd.LocationDDId, ldd.LocationDDName}).ToList();

        ViewBag.LocationDDListSelectList = new SelectList(LocationDDList, "LocationDDId", "LocationDDName",model.LocationDDId);

        return View();
  }



   public JsonResult GetLocationDDByLocationGroupDD(string LocationGroupDDId)
   {
        var LocationDDList = _dbContext.LocationDD.Where(ldd => ldd.LocationGroupDDId == LocationGroupDDId)
                                                  .Select(ldd => new {ldd.LocationDDId, ldd.LocationDDName}).ToList();

        return Json(LocationDDList, JsonRequestBehavior.AllowGet);
   }

}

<div class="form-group">
    @Html.Label("LocationGroupDD", "Location GroupDD Name", htmlAttributes: new { @class = "control-label" })
    @Html.DropDownList("LocationGroupDDId", ViewBag.LocationGroupDDSelectList as SelectList, "Select Location GroupDD", htmlAttributes: new { @class = "form-control",  @id = "LocationGroupDD" })

</div>
<div class="form-group">
    @Html.Label("LocationDD", "LocationDD Name", htmlAttributes: new { @class = "control-label" })
    @Html.DropDownList("LocationDDId", ViewBag.LocationDDListSelectList as SelectList, "Select LocationDD", htmlAttributes: new { @class = "form-control", @disabled = "disabled", @id = "LocationDD" })                   
</div>

@section Scripts {
    <script type="text/javascript">
      $(document).on('change','#LocationGroupDD', function(){
          var LocationGroupDDId = $(this).val();
          $('#LocationDD').empty();
          if (LocationGroupDDId) {
            $.ajax({
                type: "GET",
                url: '@Url.Action("GetLocationDDByLocationGroupDD", "YourControlleName")',
                data: { LocationGroupDDId: LocationGroupDDId},
                success: function(data) {
                    if (data.length > 0) {
                        $('#LocationDD').prop("disabled", false);
                        $('#LocationDD').append($("<option>").val("").text("Select LocationDD"));
                        $(data).each(function(index, item) {
                            $('#LocationDD').append($("<option>").val(item.LocationDDId).text(item.LocationDDName));
                        });
                    } else {
                      $('#LocationDD').append($("<option>").val("").text("LocationDD List Is Empty"));
                    }
                }
            });
        } else {
            $('#LocationDD').prop("disabled", true);
            $('#LocationDD').append($("<option>").val("").text("Select Location GroupDD First"));
        }
      });
    </script>
}

public类yourcontrollenmacontroller:Controller
{
公共操作结果创建（）
{
var LocationGroupDDList=\u dbContext.LocationGroupDD.Select（lgdd=>
新的{lgdd.LocationGroupDDId，lgdd.LocationGroupDDName}）.ToList（）；
ViewBag.LocationGroupDDSelectList=新的SelectList（LocationGroupDDList，“LocationGroupDDId”，“LocationGroupDDName”）；
ViewBag.LocationDDListSelectList=新选择列表（新列表（），“LocationDDId”，“LocationDDName”）；
返回视图（）；
}
[HttpPost]
公共操作结果创建（YourModel模型，字符串位置GroupDDID）
{
if（ModelState.IsValid）
{
//这里有必要的工作人员吗
}
var LocationGroupDDList=\u dbContext.LocationGroupDD.Select（lgdd=>
新的{lgdd.LocationGroupDDId，lgdd.LocationGroupDDName}）.ToList（）；
ViewBag.LocationGroupDDSelectList=新的SelectList（LocationGroupDDList，“LocationGroupDDId”，“LocationGroupDDName”，LocationGroupDDId）；
var LocationDDList=_dbContext.LocationDD.Where（ldd=>ldd.LocationGroupDDId==LocationGroupDDId）。选择（ldd=>new{ldd.LocationDDId，ldd.LocationDDName}）。ToList（）；
ViewBag.LocationDDListSelectList=新的选择列表（LocationDDList，“LocationDDId”，“LocationDDName”，model.LocationDDId）；
返回视图（）；
}
公共JsonResult GetLocationDDByLocationGroupDD（字符串LocationGroupDDId）
{
var LocationDDList=\u dbContext.LocationDD.Where（ldd=>ldd.LocationGroupDDId==LocationGroupDDId）
.Select（ldd=>new{ldd.LocationDDId，ldd.LocationDDName}）.ToList（）；
返回Json（LocationDDList，JsonRequestBehavior.AllowGet）；
}
}

2。在视图中：

public class YourControlleNameController : Controller
{
   public ActionResult Create()
   {
        var LocationGroupDDList = _dbContext.LocationGroupDD.Select(lgdd => 
                                             new { lgdd.LocationGroupDDId, lgdd.LocationGroupDDName }).ToList();

        ViewBag.LocationGroupDDSelectList = new SelectList(LocationGroupDDList, "LocationGroupDDId", "LocationGroupDDName");

        ViewBag.LocationDDListSelectList = new SelectList(new List<LocationDD>(), "LocationDDId", "LocationDDName");

        return View();
   }

  [HttpPost]
  public ActionResult Create(YourModel model, string LocationGroupDDId)
  {
        if (ModelState.IsValid)
        {
            // Do necessary staff here
        }
        var LocationGroupDDList = _dbContext.LocationGroupDD.Select(lgdd => 
                                             new { lgdd.LocationGroupDDId, lgdd.LocationGroupDDName }).ToList();

        ViewBag.LocationGroupDDSelectList = new SelectList(LocationGroupDDList, "LocationGroupDDId", "LocationGroupDDName",LocationGroupDDId);

        var LocationDDList = _dbContext.LocationDD.Where(ldd => ldd.LocationGroupDDId == LocationGroupDDId).Select(ldd => new {ldd.LocationDDId, ldd.LocationDDName}).ToList();

        ViewBag.LocationDDListSelectList = new SelectList(LocationDDList, "LocationDDId", "LocationDDName",model.LocationDDId);

        return View();
  }



   public JsonResult GetLocationDDByLocationGroupDD(string LocationGroupDDId)
   {
        var LocationDDList = _dbContext.LocationDD.Where(ldd => ldd.LocationGroupDDId == LocationGroupDDId)
                                                  .Select(ldd => new {ldd.LocationDDId, ldd.LocationDDName}).ToList();

        return Json(LocationDDList, JsonRequestBehavior.AllowGet);
   }

}

<div class="form-group">
    @Html.Label("LocationGroupDD", "Location GroupDD Name", htmlAttributes: new { @class = "control-label" })
    @Html.DropDownList("LocationGroupDDId", ViewBag.LocationGroupDDSelectList as SelectList, "Select Location GroupDD", htmlAttributes: new { @class = "form-control",  @id = "LocationGroupDD" })

</div>
<div class="form-group">
    @Html.Label("LocationDD", "LocationDD Name", htmlAttributes: new { @class = "control-label" })
    @Html.DropDownList("LocationDDId", ViewBag.LocationDDListSelectList as SelectList, "Select LocationDD", htmlAttributes: new { @class = "form-control", @disabled = "disabled", @id = "LocationDD" })                   
</div>

@section Scripts {
    <script type="text/javascript">
      $(document).on('change','#LocationGroupDD', function(){
          var LocationGroupDDId = $(this).val();
          $('#LocationDD').empty();
          if (LocationGroupDDId) {
            $.ajax({
                type: "GET",
                url: '@Url.Action("GetLocationDDByLocationGroupDD", "YourControlleName")',
                data: { LocationGroupDDId: LocationGroupDDId},
                success: function(data) {
                    if (data.length > 0) {
                        $('#LocationDD').prop("disabled", false);
                        $('#LocationDD').append($("<option>").val("").text("Select LocationDD"));
                        $(data).each(function(index, item) {
                            $('#LocationDD').append($("<option>").val(item.LocationDDId).text(item.LocationDDName));
                        });
                    } else {
                      $('#LocationDD').append($("<option>").val("").text("LocationDD List Is Empty"));
                    }
                }
            });
        } else {
            $('#LocationDD').prop("disabled", true);
            $('#LocationDD').append($("<option>").val("").text("Select Location GroupDD First"));
        }
      });
    </script>
}

@Label（“LocationGroupDD”，“Location GroupDD Name”，htmlAttributes:new{@class=“control Label”}）
@Html.DropDownList（“LocationGroupDDId”，ViewBag.LocationGroupDDSelectList作为SelectList，“Select Location GroupDD”，htmlAttributes:new{@class=“form control”，@id=“LocationGroupDD”}）
@Label（“LocationDD”，“LocationDD Name”，htmlAttributes:new{@class=“control Label”}）
@Html.DropDownList（“LocationDDId”，ViewBag.LocationDDListSelectList作为SelectList，“Select LocationDD”，htmlAttributes:new{@class=“form control”，@disabled=“disabled”，@id=“LocationDD”}）

3。视图中的jQuery:

public class YourControlleNameController : Controller
{
   public ActionResult Create()
   {
        var LocationGroupDDList = _dbContext.LocationGroupDD.Select(lgdd => 
                                             new { lgdd.LocationGroupDDId, lgdd.LocationGroupDDName }).ToList();

        ViewBag.LocationGroupDDSelectList = new SelectList(LocationGroupDDList, "LocationGroupDDId", "LocationGroupDDName");

        ViewBag.LocationDDListSelectList = new SelectList(new List<LocationDD>(), "LocationDDId", "LocationDDName");

        return View();
   }

  [HttpPost]
  public ActionResult Create(YourModel model, string LocationGroupDDId)
  {
        if (ModelState.IsValid)
        {
            // Do necessary staff here
        }
        var LocationGroupDDList = _dbContext.LocationGroupDD.Select(lgdd => 
                                             new { lgdd.LocationGroupDDId, lgdd.LocationGroupDDName }).ToList();

        ViewBag.LocationGroupDDSelectList = new SelectList(LocationGroupDDList, "LocationGroupDDId", "LocationGroupDDName",LocationGroupDDId);

        var LocationDDList = _dbContext.LocationDD.Where(ldd => ldd.LocationGroupDDId == LocationGroupDDId).Select(ldd => new {ldd.LocationDDId, ldd.LocationDDName}).ToList();

        ViewBag.LocationDDListSelectList = new SelectList(LocationDDList, "LocationDDId", "LocationDDName",model.LocationDDId);

        return View();
  }



   public JsonResult GetLocationDDByLocationGroupDD(string LocationGroupDDId)
   {
        var LocationDDList = _dbContext.LocationDD.Where(ldd => ldd.LocationGroupDDId == LocationGroupDDId)
                                                  .Select(ldd => new {ldd.LocationDDId, ldd.LocationDDName}).ToList();

        return Json(LocationDDList, JsonRequestBehavior.AllowGet);
   }

}

<div class="form-group">
    @Html.Label("LocationGroupDD", "Location GroupDD Name", htmlAttributes: new { @class = "control-label" })
    @Html.DropDownList("LocationGroupDDId", ViewBag.LocationGroupDDSelectList as SelectList, "Select Location GroupDD", htmlAttributes: new { @class = "form-control",  @id = "LocationGroupDD" })

</div>
<div class="form-group">
    @Html.Label("LocationDD", "LocationDD Name", htmlAttributes: new { @class = "control-label" })
    @Html.DropDownList("LocationDDId", ViewBag.LocationDDListSelectList as SelectList, "Select LocationDD", htmlAttributes: new { @class = "form-control", @disabled = "disabled", @id = "LocationDD" })                   
</div>

@section Scripts {
    <script type="text/javascript">
      $(document).on('change','#LocationGroupDD', function(){
          var LocationGroupDDId = $(this).val();
          $('#LocationDD').empty();
          if (LocationGroupDDId) {
            $.ajax({
                type: "GET",
                url: '@Url.Action("GetLocationDDByLocationGroupDD", "YourControlleName")',
                data: { LocationGroupDDId: LocationGroupDDId},
                success: function(data) {
                    if (data.length > 0) {
                        $('#LocationDD').prop("disabled", false);
                        $('#LocationDD').append($("<option>").val("").text("Select LocationDD"));
                        $(data).each(function(index, item) {
                            $('#LocationDD').append($("<option>").val(item.LocationDDId).text(item.LocationDDName));
                        });
                    } else {
                      $('#LocationDD').append($("<option>").val("").text("LocationDD List Is Empty"));
                    }
                }
            });
        } else {
            $('#LocationDD').prop("disabled", true);
            $('#LocationDD').append($("<option>").val("").text("Select Location GroupDD First"));
        }
      });
    </script>
}

@节脚本{
$（文档）.on（'change'，'#LocationGroupDD'，function（）{
var LocationGroupDDId=$（this.val（）；
$（'#LocationDD'）.empty（）；
if（LocationGroupDDId）{
$.ajax({
键入：“获取”，
url:'@url.Action（“GetLocationDDByLocationGroupDD”，“YourControllerName”），
数据：{LocationGroupDDId:LocationGroupDDId}，
成功：功能（数据）{
如果（data.length>0）{
$（'#LocationDD'）.prop（“禁用”，false）；
$（'#LocationDD'）。追加（$（“”）val（“”）。文本（“选择LocationDD”）；
$（数据）。每个（功能）（索引，项目）{
$（'#LocationDD'）.append（$（“”）.val（item.LocationDDId）.text（item.LocationDDName））；
});
}否则{
$（'#LocationDD'）.append（$（“”）.val（“”.text（“LocationDD列表为空”）；
}
}
});
}否则{
$（'#LocationDD'）.prop（“禁用”，true）；
$（'#LocationDD'）。追加（$（“”）.val（“”.text（“先选择位置组dd”））；
}
});
}

---

希望这能解决您的问题

我建议您阅读如何使用AJAX来级联

DropDownListFor

/DDLF和。基本上，您需要在第一个DDLF上处理

change

事件，然后使用

jQuery.ajax（）

，并将查询结果放入第二个DDLF。有关工作示例，请参阅一个糟糕的示例，原因有很多。包括如果由于

ModelState

无效而在post方法中返回视图，则dropdownlists中的选择将丢失，用户需要重新选择它。而且它不能用于编辑现有数据。@StephenMuecke您搞错了<代码>包括如果由于ModelState无效而在post方法中返回视图，则DropDownList中的选择将丢失——这不是因为它也将在post方法中正确处理。我已经在许多复杂的形式中使用了这么长时间，它在没有任何问题的情况下有效地工作。@StephenMuecke此外，如果您有更好的选择，请将其作为答案发布在这里，以便我们也可以了解您的方法。谢谢，真的吗研究我在上面评论中提到的中的代码，了解如何正确执行（即使是

返回Json（LocationDDList，JsonRequestBehavior.AllowGet）

代码效率很低，因为它将数据发送到客户机时甚至没有使用（只应返回两个属性（用于选项值及其文本）@StephenMuecke在我们的实现中