Проблема с заполнением выпадающего списка из базы данных (зависимые выпадающие списки) - PullRequest
Новая
       15

Проблема с заполнением выпадающего списка из базы данных (зависимые выпадающие списки)

0 голосов
/ 12 июня 2019

Я хочу заполнить раскрывающийся список другим раскрывающимся списком. это категория и подкатегория.

первый выпадающий список является основной категорией поля в базе данных: 1.Id 2.CatName

Второй выпадающий список подкатегории поля в базе данных: 1.Id 2.MainId 3.catName

ну это правда, сейчас: мои коды бритвы: 

@functions {
    public List<MainProduceCategory>
        CatList(int mainCatId)
    {
        ApplicationDbContext _context = new ApplicationDbContext();
        IMainProduceRepository cats = new MainProduceRepository(_context);
        return cats.GetCats(items);
    }
}

код верен и возвращает подкатегории по maincatId. 

<div class="form-group">
    <label class="control-label"></label>
    <select class="custom-select simplebox form-control" onChange="myjs(this.value);">

        <option value="1">movies</option>
        <option value="2">softwares</option>
    </select>
</div>

код основных категорий в бритве. 

<div class="form-group">
    <label class="control-label"></label>
    <select id="subcats" class="custom-select simplebox form-control">
        <option value="0">not select</option>
    </select>
</div>

код подкатегории в бритве.

сейчас: как заполнить второй выпадающий список по основному выпадающему списку?

JQuery-код: но не работает. 

<script language="javascript">
    function myjs(state) {
        with (document.getElementById('subcats')) {
            options.length = 0;

            if (state == 0) {
                options[0] = new Option('mainSelect', '0');
            }

            if (state == "1") {

                for (var i = 0; i <= @CatList(1).Count; i++) {

                     options[i] = new Option(@CatList(1).Select(c=>c.CatName)[i]);
                }
            }
        }
    }
</script>

1 Ответ

0 голосов
/ 12 июня 2019

Вот простая демонстрация каскадного раскрывающегося списка между страной и городом. Вы можете обратиться и внести изменения в соответствии с вашими потребностями

1.Model 

public class Country
{
    public int Id { get; set; }
    public string CountryName { get; set; }
    public List<City> Cities { get; set; }
}

public class City
{
    public int Id { get; set; }
    public string CityName { get; set; }
    public Country Country { get; set; }
}

2.Связать раскрывающийся список CityList с jQuery AJAX 

<div>
    <select asp-items="@ViewBag.Country" id="countrylist">
        <option>Select</option>
    </select>
</div>

<div>
    <select id="citylist"></select>
</div>

@section Scripts
{
<script type="text/javascript">
    //Insert default item "Select" in dropdownlist on load
    $(document).ready(function () {
        var items = "<option value='0'>Select</option>";
        $("#citylist").html(items);
    });

    //Bind City dropdownlist
    $("#countrylist").change(function () {
        var countryId = $("#countrylist").val();
        var url = "/Countries/GetCityList";

        $.getJSON(url, { CountryId: countryId }, function (data) {  
            var item = "";
            $("#citylist").empty();
            $.each(data, function (i, city) {
                item += '<option value="' + city.value + '">' + city.text + '</option>'
            });
            $("#citylist").html(item);
        });
    });
</script>
}

3.Добавить метод GetCityList в CountryController 

public async Task<IActionResult> CountryList()
{
      ViewBag.Country = new SelectList(_context.Country, "Id", "CountryName");
      return View();
}

[HttpGet]
public JsonResult GetCityList(int CountryId)
{
      var citylist= new SelectList(_context.City.Where(c => c.Country.Id == CountryId),"Id","CityName");
      return Json(citylist);

}
...