WebHU - Programozási kérdések és válaszok

Lépcsőzetes legördülő lista az asp.net MVC Multi Select listájának kijelölése alapján

Van egy többszörös listám

                    <div id="statusWrapper" class="row" style="left:2px">
                         @Html.LabelFor(model => model.Countries, htmlAttributes: new { @class = "col-sm-4 label-box required" })
                         <div class="col-md-6 input-group" style="left:2px; width: 47%;">
                             @Html.ListBoxFor(model => model.SelectedCountryIds, (MultiSelectList)Model.Countries, new { @class = "multiselect form-control", multiple = "multiple", id = "cbJT" })
                         </div>
                 </div>
                 <div class="row" style="padding:2px">
                     @Html.Label("City", new { @class = "col-sm-4 label-box required" })
                     <div class="col-sm-6 value-box" style="padding-left:2px; padding-top: 2px;">
                         @Html.DropDownListFor(model => model.CityId, Enumerable.Empty<SelectListItem>(), "Select", new { @class = "combobox form-control"})
                         @Html.ValidationMessageFor(x => x.CityId)
                     </div>
                 </div>

Az első egy többszörös kijelölésű legördülő menü, amely az oldal betöltésekor töltődik fel. A második legördülő menü dinamikusan feltöltődik, amikor az előző listában van kijelölés (vagy kijelölés törlése).

 $('#cbJT').on('change', function (e) {
            $('#CityId').empty();
            $.each(this.selectedOptions, function (id, opt) {
                $('<option>').val(opt.value).text(opt.text).appendTo('#CityId');
            });
 );

Ez sikeresen hozzáfűződik a kijelölő címkéhez, de a legördülő lista nem tud kibővülni, mintha üres lenne, pedig néhány kijelölés után néhány ország értéke van benne.

És a generált HTML néhány kijelölés után: ide írja be a kép leírását

c# asp.net asp.net-mvc
16.10.2017

  • jobb, ha a jquery-t használod ehhez 16.10.2017
  • Kezelnie kell az 1. legördülő lista .change() eseményét, és egy ajax hívást kell végrehajtania a 2. feltöltéséhez. Megjegyzés: nem kell a (MultiSelectList) - csak a Model.Contries 16.10.2017
  • Példaként tekintse meg ezt a választ. Az Ön esetében az ajax hívást végrehajtó metódusnak csak egy paraméterre van szüksége, amely egy IEnumerable<int> a kiválasztott országokhoz 16.10.2017

Válaszok:


1

Meg kell hallgatnia az első legördülő menü változási eseményét, és ki kell olvasnia a kiválasztott értékeket. A többszörös kijelölésnél ez egy értéktömb lesz, amely a kiválasztott opció érték attribútumértékeivel rendelkezik, és elküldheti a szerverére ajaxon keresztül, ahol egy műveleti metódus használhatja ezt az azonosítót, hogy megadja a városok listáját, amelyekhez tartozik. azok az országazonosítók.

$(document).ready(function() {

    $("#cbJT").change(function() {

        var v = $(this).val();
        $.post("@Url.Action("GetCities", "Home")",{ countryIds: v },function (result) {

                $("#CityId").html("");
                $.each(result,function(a, b) {                        
                       $('<option>').val(b.Value).text(b.Text).appendTo('#CityId');
                });    
        });
    });

});

Itt a @Url.Action metódust használom a javascripten belül, hogy létrehozzam a műveleti metódus helyes relatív elérési útját. Működni fog, ha a szkript borotvanézeten belül van. Ha egy külső javascript fájlban van. kövesse az ebben a bejegyzésben< említett megközelítést. /a>.

Feltéve, hogy van egy GetCities műveleti metódusa, amely elfogadja ezt az azonosítók tömbjét, és SelectListItem objektumok listáját adja vissza. Az alábbi mintakód feltételezi, hogy az Entity keretrendszert használja adathozzáférési technológiaként, és a db.Cities DbSet<Citiy> gyűjteményt ad.

[HttpPost]
public ActionResult GetCities(int[] countryIds)
{    
    var cities = db.Cities
                   .Where(f => countryIds.Contains(f.CountryId))
                   .Select(f => new SelectListItem() { Value = f.Id.ToString(),
                                                       Text = f.Name })
                   .ToList();

    return Json(cities);

}

Ezenkívül, hacsak nincs nyomós ok, nem adnék meg más azonosítót a legördülő menüben. A helper metódus a helyes (és a környezet szempontjából értelmes) Id értéket generálja a tulajdonság nevéből (SelectedCountriesIds)

16.10.2017
  • Én az általad javasolt utat választottam. A #CityId legördülő lista azonban mindig üres marad (és nem bővíthető), még akkor is, ha az elemek változó rendben van. @Html.DropDownListFor(modell =› model.CityId, Enumerable.Empty‹SelectListItem›(), Select, new { @class = combobox form-control}) 16.10.2017
  • sikeres az ajax hívásod? Megkapod tőle a várt eredményeket? Ellenőrizze a böngésző konzolját 16.10.2017
  • Igen, a válaszom jó, minden információt tartalmaz, és a html karakterlánc jól néz ki. Az utolsó rész, a legördülő menühöz való hozzáfűzés azonban nem működik, ahogy korábban is mondtuk 16.10.2017
  • Feltételezem, akkor valószínűleg hiányzik egy idézőjel a kiválasztási opció összeállításakor. meg tudod csinálni egy console.log(items) és ellenőrizni? 16.10.2017
  • valahogy így néz ki: ‹opció érték=1›New York‹/opció›‹opció érték=5›Chicago‹/opció›‹opció érték=6›Los Angeles‹/opció› 16.10.2017
  • Ez helyesnek tűnik. A második legördülő menü Id CityId? BTW, frissítettem a választ, hogy elkerüljem a karakterlánc-összefűzést. 16.10.2017
  • Vessen egy pillantást erre a hegedűre, és hasonlítsa össze a kódjával, és nézze meg, mi hiányzik jsbin.com /supovawaxe/edit?html,js,output 16.10.2017
  • Minden helyes. Valószínűleg az asp.net-nek köszönhető, és annak, hogy hogyan generálja a HTML-t. Ahogy mondtam, így néz ki a borotvám: @Html.DropDownListFor(modell =› modell.CityId, Enumerable.Empty‹SelectListItem›(), Select, new { @class = combobox form-control}) Szóval nem vagyok benne biztos ha ez a Felsorolható.Üres valahogy összezavarja 16.10.2017
  • Ennek üres SELECT elemet kell generálnia, amikor a borotva végrehajtja a kódot. Ellenőrizze az oldal nézetforrását, hogy megbizonyosodjon arról, hogy a SELECT elem neve CityId, továbbá ellenőrizze, hogy az oldalon vannak-e szkripthibák. 16.10.2017
  • Mindkét ellenőrzés rendben van - van egy kiválasztott elem azonos azonosítóval, és nincs szkript hiba az oldalon. 16.10.2017
  • Egynél több eleme van azonos azonosító értékkel? Ez érvénytelen HTML 16.10.2017
  • Az automatikusan generált HTML ellenőrzése után az opciós címkék a select-hez kerülnek, azonban ezek mind üresek, öt ország kiválasztása után ennek ötszörösét kapom: ‹option value=›‹/option› 16.10.2017
  • Vizsgálja meg az ajax hívásból kapott json-választ. Meg kell egyeznie azzal, amit a korábban megosztott filmben lát. Minden elemnek rendelkeznie kell egy Value és Text tulajdonsággal 16.10.2017
  • Sajnos azt hiszem, ez egyszerűen nem működik az ASP.NET-nél. A kétszeri ellenőrzés után helyesen tölti fel a kijelölést több opcióval és azok értékeivel. Az ASP.NET azonban ehhez generál még egy bemeneti elemet, ennek nincs azonosítója, de a neve CityId. Tehát annak ellenére, hogy a select címke megfelelően van kitöltve, nem tudja kibontani a legördülő listát, mintha üres lenne. 16.10.2017
  • Hogy érted, hogy ez egyszerűen nem működik az ASP.NET-nél. ??? A kérdésben megosztott kód szerint a helper metódus csak egy SELECT elemet generál azonosítóval és név tulajdonsággal CityId. Az Asp.NET egyszerűen nem generál véletlenszerű vezérlést az oldalon. 16.10.2017
  • Azt hiszem, a legegyszerűbb az, ha szerkesztem a kérdésemet a kóddal és a generált HTML-lel. 16.10.2017
  • látom a problémádat. 2 HTML-eleme van, amelyek azonosítója a CityId. Ez érvénytelen HTML. Az elemek azonosítóinak egyedinek kell lenniük a dokumentumban. Miért van a CityId rejtett bemenete? Csak távolítsa el. 16.10.2017
  • Igen, de az összes razor-html kódomat közzétettem, a többit az asp.net generálta. Szóval hogyan/hol tudom eltávolítani a felesleges html-t? 16.10.2017
  • Az asp.net nem véletlenszerűen generál bemeneti elemeket az Ön számára. A nézetfájlban található néhány kód, amely létrehozza a jelölést. keresse meg a következőt: CityId. Valószínűleg van valami, mint a @Html.Hiddenfor(x=>x.CityId) vagy <input type="hidden" id="CityId" />. 16.10.2017

    • 2

    Az űrlapot elküldheti a szerverre, és az új oldalon lévő értékeket használhatja:

    //psuedo c#
class Controller {
  IView Page2(List<string> selectedOptions){
     return View("Page2", selectedOptions)
  }
}

//razor
@foreach(var item in Model){
   <option>@item</option
}

    Ellenkező esetben, ha közvetlen visszajelzést szeretne, sokkal könnyebb ezt megtenni java-scripttel (és sokkal kedvesebb a felhasználó számára az oldal frissítése helyett).

    16.10.2017
    Új anyagok
    A rádiógomb ellenőrzött eseményének használata a jQueryben
    Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...
    Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
    Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..
    Miért érdemes elkezdeni a kódolást 2023-ban?
    01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..
    🎙 Random Noise #2  – Örökbefogadás és hit
    az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..
    A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
    A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..
    5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
    Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..
    Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
    A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..