Dynamically binding list to InputSelect in Blazor C#

Question

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.

What's the use case for loading the select on focus rather than when the form loads, or a filter select changes? — MrC aka Shaun Curtis
– MrC aka Shaun Curtis, Commented Aug 17, 2024 at 22:41
Well, we have it in like sql server. When we are making a relationship or adding an index. When an entity is selected, It no longer appears.. But I want to design a system like for selecting items... like it can be considered like making a timetable of some sort.. Where we have a grid, and if we select and add a venue/teacher , it doesnt appear at the same time at any other place. — user24437316
– user24437316, Commented Aug 17, 2024 at 22:45
A little more experience with reference types and Linq should make this simple enough. I'll add an answer soon. — Bennyboy1973
– Bennyboy1973, Commented Aug 18, 2024 at 11:56

user24437316 · Accepted Answer · 2024-08-18 15:37:49Z

1

@rendermode InteractiveServer

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

answered Aug 18, 2024 at 15:37

user24437316

176 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bennyboy1973 · Accepted Answer · 2024-08-18 14:09:05Z

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));
    }
}

Collectives™ on Stack Overflow

Dynamically binding list to InputSelect in Blazor C#

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related