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.