CODEWITHSUNDEEP
blazorblazor-server-side
AnotherDeveloper
AnotherDeveloper

Reputation: 1272

Blazor: Get values from multiple inputs on change event

Is there a way to get the values from multiple selects in the same event? I want to have two selects as filters and allow either to filter the jobs that are returned. What I don't know how to do is have the code check for the other select's value.

 <select name="JobLocation" id="JobLocation" @onchange="SelectJobLocation">
        <option selected hidden>Select a Location</option>
        @foreach (var location in JobLocation.OrderBy(x => x.Name))
        {
            <option [email protected]>@location.Name</option>
        }
    </select>

    <br />

    <select name="JobType" id="JobType" @onchange="SelectJobType">
            <option selected hidden>Select a Job Family</option>
            @foreach (var jtype in JobType.OrderBy(x => x.Name))
            {
                <option [email protected]>@jtype.Name</option>
            }
    </select>    

    <table id="JobsTable">
    <!-- Jobs go here.... -->
    </table>

@code {

    async void SelectJobLocation(ChangeEventArgs e)
    {
        if(!string.IsNullOrWhiteSpace(e.Value.ToString()))
        {
        var JobType =  //Pull Value from JobType Select Here
            Locations = await GetJobLocations(e.Value.ToString(),JobType);
            StateHasChanged();
        }
    }
}

Upvotes: 0

Views: 1037

Answers (2)

thebignoobwantstolearn
thebignoobwantstolearn

Reputation: 41

You can use the blazor data binding to save the currently selected value from the select in a variable.

To do this simply add the @bind attribute on your select like this: 

<select name="JobLocation" id="JobLocation" @onchange="SelectJobLocation">
    <option selected hidden>Select a Location</option>
    @foreach (var location in JobLocation.OrderBy(x => x.Name))
    {
        <option [email protected]>@location.Name</option>
    }
</select>

<br />

// add @bind here
<select name="JobType" id="JobType" @bind="JobType">
        <option selected hidden>Select a Job Family</option>
        @foreach (var jtype in JobType.OrderBy(x => x.Name))
        {
            <option [email protected]>@jtype.Name</option>
        }
</select>    

<table id="JobsTable">
<!-- Jobs go here.... -->
</table>

@code {
    // the variable used for the data binding
    private string JobType { get; set; }

    async void SelectJobLocation(ChangeEventArgs e)
    {
        if(!string.IsNullOrWhiteSpace(e.Value.ToString()))
        {
            // JobType will contain currently selected value
            Locations = await GetJobLocations(e.Value.ToString(),JobType);
            StateHasChanged();
        }
    }
}

For more information about data binding in blazor: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-6.0

Upvotes: 2

AnotherDeveloper
AnotherDeveloper

Reputation: 1272

Instead of trying to retrieve the select values during a single select onChange event, I logged the selected values of all of the dropdowns anytime they changed:

@code {
    private string SelectedJobLocation;
    private string SelectedJobType;

    async void SelectLocation(ChangeEventArgs e)
    {
        SelectLocation= "";
        if(!string.IsNullOrWhiteSpace(e.Value.ToString()))
        {
            SelectLocation= e.Value.ToString();
            JobLocations = await LocationData.GetLocations(e.Value.ToString());
            GetJobs();
    }
    StateHasChanged();
}

Upvotes: 0

Related Questions