Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4232

Create an InputSelect component that accepts lists with Blazor

$
0
0

With Blazor InputSelect you have iterate over list items in the component ChildContent but
I want to create a custom Blazor (WebAssembly version 5) InputSelect that could accept a list of any object to render in the select, the code could be like the followings :

<CustomInputSelect @bind-Value="@myEntity.CountryId" For="@(()=> myEntity.CountryId)" List="countries" ValueField="@(a => a.Id)" DisplayField="@(a => a.CountryName)" ></CustomInputSelect>

or even this :

<CustomInputSelect @bind-Value="@myEntity.Country" For="@(()=> myEntity.Country)" List="countries" ValueField="Id" DisplayField="CountryName" ></CustomInputSelect>

(Note: I used the For property to help compiler to infer the type of CountryId and also for validation. This is @typeparam of the component.)

I tried so many approaches but none of the worked so I explain them below:

  • I tried using dynamic type for the list but it seems that Blazor does not supports dynamic types because there was error in razor generated code.

  • I tried to use multiple @typeparam for the component, one for the value and one for the list items. And it seems that it does not support it either.

    @inherits InputSelect//or add another typeparam @typeparam TListItem

And

<select>                @foreach (var item in List)                {< option value="???">???</option >                }</select>     @code{     [Parameter] public Expression<Func<TValue>>? For { get; set; }     [Parameter] public List<dynamic> List { get; set; }// or List<TListItem>      [Parameter] public Expression<Func<TListItem>>? ValueField { get; set; }     [Parameter] public Expression<Func<string>>? DisplayField { get; set; }    }

My goal is to send a list of any type to InputSelect while @typeparam is used for binding.


Viewing all articles
Browse latest Browse all 4232

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>