Problem to fill dropdownlist from database (Dependency Dropdownlists)

Question

i want to fill dropdownlist by another dropdownlist. this is category and sub category.

first dropdownlist is main category fields in database: 1.Id 2.CatName

Second dropdownlist is subCategory fields in database: 1.Id 2.MainId 3.catName

well it is true, now: my razor codes:

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

the code is true and return subcategories by 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>

the code is Main Categories in razor.

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

the code is sub Categories in razor.

now: how to fill Second dropdownlist by main dropdownlist?

jquery code:but not work.

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

Your `CatList()` expects an `int mainCatId` but you are passing `@CatList("1")`. Shouldn't it be `@CatList(1)`? I have not used razor-pages, but I assume this should have given some compiler errors? — prinkpan, Jun 12 '19 at 07:07
it is @CatList(1) but options[i] = new Option(@CatList(1).Select(c=>c.CatName)[i]); notwork inline jquery! — AliRam, Jun 12 '19 at 07:13
pay attention to below link : [click here](https://stackoverflow.com/a/17016286/5871154) — Atabai Fekri, Jun 12 '19 at 07:29

score 0 · Answer 1 · answered Jun 12 '19 at 08:28

Here is the simple demo about the cascade dropdownlist between Country and City . You could refer to and make the modification as per your need

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.Bind CityList dropdownlist with 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.Add the GetCityList method in CountriesController

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

}

Problem to fill dropdownlist from database (Dependency Dropdownlists)

1 Answers1