Каскадный выпадающий список - ASP.NET MVC

Question

Я работаю с 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 в контроллер, чтобы выполнить запрос для второго раскрывающегося списка.

Answer 1

Выполните следующие шаги для создания каскадного DropdownList в 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);
   }

}

2. В представлении:

<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>

3. JQuery в представлении:

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

Надеюсь, это решит вашу проблему!