Lista rozwijalna z zawężaniem wyników

Cześć,

Chciałbym utworzyć w widoku użytkownika dwie listy rozwijalne:

• województwo
• miasto
  Przy czym miasta zostałyby prefiltrowane jeżeli użytkownik wybrał już województwo.

Moje pytanie brzmi w jaki sposób zrobić to w miarę efektywnie i efektownie :) tzn. zakładam, że w bazie będę miał tabele: dbo.Wojewodztwa z kolumnami Id oraz NazwaWojewodztwa, do tego drugą tabelę dbo.Miasta, w której przechowywałbym Id, IdWojewodztwa, NazwaMiasta.

Listę z województwami będę ładował natychmiast, a po wybraniu województwa, każdorazowo powinienem odpytywać bazę?

Masz dwie możliwości wg mnie.

1. Może korzystniejsza zapytanie Ajax`owe do kontrolera z wybranym id województwa i wtedy przeładowujesz dropdown
2. Wysłać wszystko od razu na widok i js'em przefiltrować miasta.

Listę z województwami będę ładował natychmiast, a po wybraniu województwa, każdorazowo powinienem odpytywać bazę?

Zależy od ilości, ale bardziej prawdopodobne chcesz to mieć wczytane niż strzelać cały czas do bazy / cache.

Mając taki kod, jak odwołać się w js do Html.DropdownList?

    <label asp-for="Voivodeship" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-6">
            @Html.DropDownList("Wojewodztwa", new SelectList(Model.Voivodeship.Distinct().ToList(), "Id", "Voivodeship", "Id"), "--Wybierz województwo--", new { @class = "form-control"})
    </div>
    <label asp-for="City" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-6">
        @Html.DropDownList("Miasta", new SelectList(Model.City.Distinct().ToList(), "Id", "City", "Id"), "--Wybierz miasto--", new { @class = "form-control" })
    </div>

W @class dodaj swoją nazwę elementu i w js, document.getElementByClassName

@Phoryn: dzięki, a w jaki sposób przekazać wybraną przez użytkownika wartość do modelu? Korzystam z asp helperów, zmieniłem typ na dropdownlistfor, ale do modelu nadal trafia null zamiast Id.

    <label asp-for="Voivodeship" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-6">
        @Html.DropDownListFor(a => a.Voivodeship, new SelectList(Model.Voivodeship.Distinct().ToList(), "Id", "Voivodeship", "Id"), "--Wybierz województwo--", new { @class = "form-control" })
    </div>
    <label asp-for="City" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-6">
        @Html.DropDownListFor(a =>a.City, new SelectList(Model.City.Distinct().ToList(), "Id", "City", "Id"), "--Wybierz miasto--", new { @class = "form-control" })"
    </div>

Wszystko masz zamknięte form?

Ok, okazało się, że brakowało mi właściwości do przechowywania Id. Zamiast

@Html.DropDownListFor(a => a.Voivodeship, new SelectList(Model.Voivodeship.Distinct().ToList(), "Id", "Voivodeship", "Id"), "--Wybierz województwo--", new { @class = "form-control" })

Powinno być

@Html.DropDownListFor(a => a.VoivodeshipId, new SelectList(Model.Voivodeship.Distinct().ToList(), "Id", "Voivodeship", "Id"), "--Wybierz województwo--", new { @class = "form-control" })

Gdzie VoivodeshipId jest int, który przechowuje wybraną wartość i jest później mapowany do encji.

Do zamknięcia.

To chyba nie te forum by temat był do zamknięcia :D