Blazor 'Casading ComboBoxen' Beispiel mit Platzhalter

    • (Core) Blazor WebAssembly
    • C# (ASP)

      Blazor 'Casading ComboBoxen' Beispiel mit Platzhalter

      Hi,

      ich hab ein paar Tage gebraucht, um mir geschachtelte Comboboxen in Blazor zu erarbeiten (da ich relativ neu im Blazor/Razor/Asp.net/-Business bin ohne gewähr).
      Vielleichte hilft es dem ein oder anderen etwas schneller ans Ziel zu kommen :)

      Der Code kann Kopie/Paste in das Blazor Template eingefügt werden (komplett ohne Fremdlibrarys Telerik, Syncfusion,...).
      Für mich war es nicht trivial es korrekt mit Platzhaltern hinzubekommen.

      Zum schnellen Verstehen .gif im Anhang anklicken.



      (Index.razor mir dem Code ersetzen)
      Spoiler anzeigen

      C#-Quellcode

      1. @page "/"
      2. <h4>Cascading Cmbx NAMES vs NUMMBERS</h4>
      3. <hr />
      4. <h4>First</h4>
      5. <select class="form-control" @bind="FirstCmbxSelectedGuid">
      6. <option value=@FirstCmbxSelectedGuid selected disabled="disabled">--Select--</option>
      7. @foreach (var item in FirstCmbxItemLst)
      8. {
      9. <option value="@item.Id">@item.MyString</option>
      10. }
      11. </select>
      12. @*<p>sel. Obj.-Guid:@FirstCmbxSelectedItemObj.Id ---- sel. Obj.-String:@FirstCmbxSelectedItemObj.MyString</p>*@
      13. <br />
      15. <h4>Second</h4>
      16. <select class="form-control" @bind="SecondCmbxSelecetedGuid">
      17. <option value=@(SecondCmbxSelecetedGuid) selected disabled="disabled">--Select--</option>
      18. @if (MySecondCmbxActivLst.Count > 0)
      19. {
      20. @foreach (var item in MySecondCmbxActivLst)
      21. {
      22. <option value="@item.Id">@item.MyString</option>
      23. }
      24. }
      25. </select>
      26. @*<p>sel. Obj.-Guid:@SecondCmbxSelectedItemObj?.Id ---- sel. Obj.-String:@SecondCmbxSelectedItemObj?.MyString</p>*@
      28. <hr />
      29. <h4>@FirstCmbxSelectedItemObj.MyString @SecondCmbxSelectedItemObj?.MyString</h4>
      31. @code{
      32. //---DataModel--
      33. public class MyGuidStringItem
      34. {
      35. public Guid Id { get; set; }
      36. public string MyString { get; set; }
      38. //Consturctors
      39. public MyGuidStringItem()
      40. { }
      41. public MyGuidStringItem(string myString)
      42. {
      43. Id = Guid.NewGuid();
      44. MyString = myString;
      45. }
      46. }
      48. public List<MyGuidStringItem> FirstCmbxItemLst = new()
      49. {
      50. new MyGuidStringItem("Names"),
      51. new MyGuidStringItem("Nummbers")
      52. };
      54. public List<MyGuidStringItem> SecondCmbxItemNameLst = new()
      55. {
      56. new MyGuidStringItem("Alfred"),
      57. new MyGuidStringItem("Jonny"),
      58. new MyGuidStringItem("July")
      59. };
      61. public List<MyGuidStringItem> SecondCmbxItemIntLst = new()
      62. {
      63. new MyGuidStringItem("123"),
      64. new MyGuidStringItem("456"),
      65. new MyGuidStringItem("678")
      66. };
      67. //^^^DataModel--
      69. //wegen <option value=@FirstCmbxSelectedGuid) selected disabled="disabled">--Select--</option>
      70. //Default-Werte @startup ... .FirstOrDefault();
      71. protected override void OnInitialized()
      72. {
      73. FirstCmbxSelectedGuid = default;
      74. FirstCmbxSelectedItemObj = new();
      75. }
      77. public List<MyGuidStringItem> MySecondCmbxActivLst = new();
      79. public MyGuidStringItem FirstCmbxSelectedItemObj;
      80. private Guid _firstCmbxSelectedGuid;
      81. public Guid FirstCmbxSelectedGuid
      82. {
      83. get => _firstCmbxSelectedGuid;
      84. set
      85. {
      86. _firstCmbxSelectedGuid = value;
      87. SecondCmbxSelecetedGuid = default;
      89. FirstCmbxSelectedItemObj = FirstCmbxItemLst.Where<MyGuidStringItem>(x => x.Id == FirstCmbxSelectedGuid).FirstOrDefault();
      91. //Achtung ist noch sowas wie 'MagicString'(feste ListPosition) geht nicht ganz ohne
      92. if (_firstCmbxSelectedGuid == FirstCmbxItemLst[0].Id)
      93. {
      94. MySecondCmbxActivLst = SecondCmbxItemNameLst;
      95. }
      96. if (_firstCmbxSelectedGuid == FirstCmbxItemLst[1].Id)
      97. {
      98. MySecondCmbxActivLst = SecondCmbxItemIntLst;
      99. }
      100. }
      101. }
      103. public MyGuidStringItem SecondCmbxSelectedItemObj = new();
      104. private Guid _secondCmbxSelecetedGuid;
      105. public Guid SecondCmbxSelecetedGuid
      106. {
      107. get => _secondCmbxSelecetedGuid;
      108. set
      109. {
      110. _secondCmbxSelecetedGuid = value;
      111. SecondCmbxSelectedItemObj = MySecondCmbxActivLst.Where<MyGuidStringItem>(x => x.Id == _secondCmbxSelecetedGuid).FirstOrDefault();
      112. }
      113. }
      114. }
      Bilder

      • CascadingCmbx_byNogood.gif

        328,78 kB, 946×408, 85 mal angesehen
      codewars.com Rank: 4 kyu

    Facebook
    Telefonspende