.net - Setting an option to selected in a drop down in Blazor - Stack Overflow

admin管理员组

文章数量:1296921

I have a Telerik grid and am using inline editing. On edit, I have a select dropdown list for the user to select the option that he needs. In my view model if the user is in edit mode I would like for the drop down to have the selected value. It doesn't seem to work properly. Here is the column in my grid:

                <GridColumn Field=@nameof(JobAssignmentListViewModel.Trade) Title="Trade" FieldType="@typeof(string)">
                    <EditorTemplate>
                        <select id="tradeList" class="form-select" value="@(context as JobAssignmentListViewModel).TradeId" @onchange="@(e => UpdateTradeAsync((JobAssignmentListViewModel)context, e))">
                            @foreach (var trade in trades)
                            {
                                var isSelected = trade.Id == (context as JobAssignmentListViewModel)?.TradeId;
                                <option value="@trade.Id" selected="@isSelected">@trade.Name</option>
                                
                            }
                        </select>
                    </EditorTemplate>
                </GridColumn>

This just renders selected="" in the HTML when inspected. Is there a way to select the default option in Blazor for a dropdown?

I have a Telerik grid and am using inline editing. On edit, I have a select dropdown list for the user to select the option that he needs. In my view model if the user is in edit mode I would like for the drop down to have the selected value. It doesn't seem to work properly. Here is the column in my grid:

                <GridColumn Field=@nameof(JobAssignmentListViewModel.Trade) Title="Trade" FieldType="@typeof(string)">
                    <EditorTemplate>
                        <select id="tradeList" class="form-select" value="@(context as JobAssignmentListViewModel).TradeId" @onchange="@(e => UpdateTradeAsync((JobAssignmentListViewModel)context, e))">
                            @foreach (var trade in trades)
                            {
                                var isSelected = trade.Id == (context as JobAssignmentListViewModel)?.TradeId;
                                <option value="@trade.Id" selected="@isSelected">@trade.Name</option>
                                
                            }
                        </select>
                    </EditorTemplate>
                </GridColumn>

This just renders selected="" in the HTML when inspected. Is there a way to select the default option in Blazor for a dropdown?

• asp-core
• blazor
• html-select

Share Follow edited Feb 12 at 2:59 Qiang Fu 8,93611 gold badge66 silver badges1616 bronze badges asked Feb 11 at 23:58 NseNse 30744 silver badges2424 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You could try following sample:

@page "/"
<TelerikGrid Data=@JobAssignments EditMode="@GridEditMode.Inline" Pageable="true"
             Height="500px" @ref="GridRef"
             OnUpdate="@UpdateItem"
             OnEdit="@EditHandler">
    <GridColumns>
        <GridColumn Field="Id" Title="ID" FieldType="@typeof(int)" Editable="false" />

        <GridColumn Field="@nameof(JobAssignmentListViewModel.Trade)" Title="Trade" FieldType="@typeof(string)" Editable="true">
            <EditorTemplate>
                @if (context is JobAssignmentListViewModel model)
                {
                    <select class="form-select" value="@model.Trade" @onchange="@(e => UpdateTradeAsync(model, e))">
                        @foreach (var trade in Trades)
                        {
                            <option value="@trade.Name">@trade.Name</option>
                        }
                    </select>
                }
            </EditorTemplate>
        </GridColumn>

        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>

    </GridColumns>
</TelerikGrid>

@code {

    private async Task UpdateTradeAsync(JobAssignmentListViewModel model, ChangeEventArgs e)
    {
            var selectedTrade = e.Value?.ToString();
            model.Trade = selectedTrade;      
            await Task.CompletedTask; 
    }
    private TelerikGrid<JobAssignmentListViewModel> GridRef { get; set; }

    // Sample Trades list
    private List<Trade> Trades = new()
    {
        new Trade { Id = 1, Name = "Plumber" },
        new Trade { Id = 2, Name = "Electrician" },
        new Trade { Id = 3, Name = "Carpenter" }
    };

    // Sample Job Assignments
    private List<JobAssignmentListViewModel> JobAssignments = new()
    {
        new JobAssignmentListViewModel { Id = 1, Trade = "Electrician" },
        new JobAssignmentListViewModel { Id = 2, Trade = "Carpenter" }
    };

    // Called when an item is edited
    private void EditHandler(GridCommandEventArgs args)
    {
        var editedItem = args.Item as JobAssignmentListViewModel;
    }

    // Called when an item is updated (saved)
    private void UpdateItem(GridCommandEventArgs args)
    {
        var updatedItem = args.Item as JobAssignmentListViewModel;
        if (updatedItem != null)
        {
            var item = JobAssignments.FirstOrDefault(j => j.Id == updatedItem.Id);
            if (item != null)
            {
                item.Trade = updatedItem.Trade;
            }
        }
    }

    // Model for the grid
    public class JobAssignmentListViewModel
    {
        public int Id { get; set; }
        public string Trade { get; set; }
    }

    // Model for trades
    public class Trade
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

本文标签： netSetting an option to selected in a drop down in BlazorStack Overflow