Blazor select multiple, Blazor kullanmaya başlayanların select elementinde multiple seçim yaptırmak istediklerinde yaşayacakları en temel sorunlardan biri blazor’ın henüz desteklemediği multiple seçimlerin bind sorunu olacaktır.
Blazor select multiple sorunu ve çözümü
Normalde tek seçimlik select elementlerini direkt olarak string tipli bir c# nesnesine bind edebiliyoruz ama çoklu seçime sahip bir select elementini mağlesef direkt olarka bind edemiyoruz o yüzden IJSRuntime interface’ini sayfaya inject edip javascript tarafından seçili olan elemanların listesini IList<string> türünden alıyoruz böylelikle bu sorunu ortadan kaldırıyoruz.
Tek Seçimli Select Elementi Bind Etme
Öncelikle tekli seçim yapabileceğimiz bir select elementinin blazor tarafında nasıl oluşturulduğuna bakalım.
Razor
1 2 3 4 5 6 7 8 9 10 11 12 | <label>Html Single Select, Choosed Item: @ChoosedSingleItem</label> <select @bind=ChoosedSingleItem> <option>Turkey</option> <option>Azerbaijan</option> <option>Germany</option> <option>Italy</option> <option>France</option> </select> @code { public string ChoosedSingleItem { get; set; } = "Italy"; } |
Demo
👨💻 Üstteki Kodu Online Görüntüle / Düzenle
Çoklu Seçimli Select Elementini Bind Etme – Blazor Select Multiple Kullanımı
select elementine multiple attribute’ünü ekleyip çoklu seçim yaptırabiliyoruz fakat buradaki sorun çoklu seçimi javascript katmanına erişmeden direkt olarak C#’daki bir property’e bind edemiyoruz. Bu kodu .Net Core 3.0 Blazor sürümünde yazıyorum bu versiyon ve öncesinde bu şekilde bir takla atmamız gerekecek ama sonraki sürümlerde bu durumun düzeltilebileceğini düşünüyorum. Peki bu durumu nasıl aşabileceğimizi görelim.
Javascript tarafından multiple olarak işaretlediğimiz bir select elementinin seçili olan tüm elemanlarının listesini array olarak toplayıp c# tarafında IList<string> olarak aktarılmasını sağlamak için alttaki gibi bir javascript kod bloğu yazıyoruz.
Javascript
1 2 3 4 5 6 7 8 9 10 | window.getSelectedValues = function(sel) { var results = []; var i; for (i = 0; i < sel.options.length; i++) { if (sel.options[i].selected) { results[results.length] = sel.options[i].value; } } return results; }; |
Üstteki javascript kodunda göreceğiniz gibi getSelectedValues adında window nesnesi altında bir fonksiyon tanımlıyoruz ve bu fonksiyon HtmlElement türünde bir nesne beklemektedir. Bu nesneyi C# tarafından gönderiyoruz C# tarafından nasıl gönderildiğine dair örneğimiz altta yer almaktadır. Parametreden gelen HTMLElement türündeki nesnenin options’ları for döngüsü ile gezilip selected olarak işaretlenenler bir array nesnesi olarak gönderiliyor.
Razor
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | @using Microsoft.AspNetCore.Components @inject IJSRuntime Js <label>Html Multiple Select, Choosed Item: @(string.Join(',', ChoosedMultipleItem))</label> <select @ref=RefMultipleSelect multiple @onchange=ChangedMultipleSelect> <option>Turkey</option> <option>Azerbaijan</option> <option>Germany</option> <option>Italy</option> <option>France</option> </select> @code { ElementReference RefMultipleSelect; public IList<string> ChoosedMultipleItem { get; set; } = new List<string>(); async void ChangedMultipleSelect() { ChoosedMultipleItem = await Js.InvokeAsync<IList<string>>("getSelectedValues", new object[] {RefMultipleSelect}); await InvokeAsync(StateHasChanged); } } |
C#’dan javascript tarafına iletişim kurabilmek için IJSRuntime arayüzünü inject etmemiz gerekiyor böylelikle aradaki köprümüz kurulmuş oluyor. Eğer geri dönüş değeri varsa InvokeAsync yoksa InvokeVoidAsync metodlarını kullanabilirsiniz biz sonucunda IList<string> türünde değer beklediğimizden InvokeAsync adlı metodu kullandık metodun ilk parametresi çalıştırılacak method adı ikinci parametre ise çalıştırılacak metoda geçilecek parametrelerin listesidir biz sadece C# tarafında ElementReference türüne ait referans nesnesini geçiyoruz ama javascript tarafındaki fonksiyona parametre HtmlElement türünde aktarılmaktadır. Böylelikle HtmlElement türündeki nesne üzerinden işlemlerimi gerçekleştirebiliyorum. Sonuç olarak alttaki gibi multiple olarak işaretlenmiş select nesnesinin seçimlerini C# da onchange olayında javascript ile haberlerşip seçimlerin listesini elde ediyorum.
Demo
👨💻 Üstteki Kodu Online Görüntüle / Düzenle
Makalede kullanılan örneğe ve Blazor ile ilgili diğer tüm örneklere github hesabımdan erişebilirsiniz. Buraya tıklayıp github hesabıma erişebilirsiniz.
📚 Diğer makalelerimiz
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
