Question 402765 in ASP.NET Question posted in
The official documentation can be found here.

Asp.net – Dynamically binding list to InputSelect in Blazor C#

In Blazor / C# / ASP.NET Core 8.0, I am trying to load the InputSelect with the list when it is clicked, but I am not able to do it.

Actually I want to make something like multiple InputSelects. Let’s say venues.

And if one item is selected in one InputSelect, I want it not to appear in other InputSelects – is this even possible?

I am using .NET 8.0 and it is a Blazor Server project.

@rendermode InteractiveServer

<div>
    <InputSelect @bind-Value=SelectedVenue style="width:100px" @onfocus="LoadVenuesOnClick">
        @foreach (var venue in venueNames)
        {
            <option value="@venue">@venue</option>
        }
    </InputSelect>
</div>


     private void LoadVenuesOnClick()
     {
            List<string> venueNames = venueDL_GLOBAL.GetAvailableVenues(Hour, Day, MainHall);

            if (venueNames!=null)
                this.venueNames.AddRange(venueNames);
      }

private List<string> venueNames = new() { "None" };
private string SelectedVenue = "None";

I have tried to do with @onselect, but it is not working:

<InputSelect @bind-Value=SelectedVenue style="width:100px" @onselect="LoadVenuesOnClick">

Also I did tried to add StateHasChanged(); to notify Blazor to re-render the component, in the LoadVenuesOnClick() function.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    @rendermode InteractiveServer

    In my parent component, this was missing that is why it was not working. Otherwise it is working fine.


  2. 0

    I don’t exactly understand what you’re trying to do. Maybe the following will give you some ideas. Probably seeing how I used Linq to filter the available venues with .Where() and .Contains() might help. I use those constantly on almost every page involving data.

    @page "/"

<h3>Scheduler</h3>
<table>
    @foreach (var timeinfo in Infos)
    {
        <tr>
            <td style="border:1px solid black;">@timeinfo.ScheduleTime.ToShortTimeString()</td>

            <td>
                @{
                     if (!timeinfo.CurrentlySelecting)
                    {
                        <select @onclick="()=>LoadOptions(timeinfo)">
                        <option style="font-style:italic" selected disabled >
                            Load. . .
                        </option>
                        </select>
                    }
                    else
                    {
                        var availableVenues = timeinfo.AvailableVenues.Where(av => !timeinfo.SelectedVenues.Contains(av));
                        var numAvailable = availableVenues.Count();
                        if (numAvailable > 0 && timeinfo.CurrentlySelecting)
                        {
                            <select @onchange="(val)=>SelectVenue(timeinfo, val.Value.ToString())">
                                <option selected disabled>Select a venue. . . </option>
                                @foreach (var venue in availableVenues)
                                {
                                    <option value=@venue>@venue</option>
                                }
                            </select>
                        }
                        else
                        {
                            <span>Finished.</span>
                        }
                    }
                }
            </td>
            <td>
                @foreach (var venue in timeinfo.SelectedVenues)
                {
                    <span style="border:1px solid black; border-radius:3px;padding:2px;margin:3px;">@(venue.ToString() + " ")</span>
                }
            </td>
        </tr>
    }
</table>
@code {
    List<string> AllVenues = new();
    List<SchedTimeInfo> Infos = new();

    List<TimeOnly> ScheduleTimes = new()
    {
        new TimeOnly(12, 30),
        new TimeOnly(2, 00),
        new TimeOnly(4, 30),
        new TimeOnly(6, 00)
    };
    public class SchedTimeInfo
    {
        public SchedTimeInfo(TimeOnly time)
        {
            ScheduleTime = time;
        }
        public TimeOnly ScheduleTime { get; set; }
        public List<string> AvailableVenues { get; set; } = new();
        public List<string> SelectedVenues { get; set; } = new();
        public bool CurrentlySelecting;
    }
    async Task LoadOptions(SchedTimeInfo info)
    {

        List<string> AvailableVenuesForTime = // GetAvailableVenues(time) method.
         new() { "Paris", "Vancouver", "Seattle", "Tokyo" };
        info.AvailableVenues = AvailableVenuesForTime;
        info.CurrentlySelecting = true;
    }
    async Task SelectVenue(SchedTimeInfo info, string venue)
    {
        info.SelectedVenues.Add(venue);
        info.CurrentlySelecting = false;
    }
    protected override void OnInitialized()
    {
        foreach (var time in ScheduleTimes) Infos.Add(new SchedTimeInfo(time));
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search