Каскадный выпадающий список в Blazor

Question

Я использую серверную часть Blazor - у меня есть список стран в таблице стран с двумя столбцами - CountryCode и CountryName. Как отобразить данные с помощью InputSelect, чтобы выбрать название страны и заполнить countryCode Вот моя страница бритвы:

<EditForm Model="@DisplayCountry" OnValidSubmit="@InsertCountry">
<DataAnnotationsValidator />
<ValidationSummary />

<div class="col-12 row">
    <label class="col-2 font-weight-bold">CountryCode:</label>
    <InputSelect id="CountryCode" @bind-Value="DisplayCountry.CountryCode" />
    &nbsp;<ValidationMessage For="@(() => DisplayCountry.CountryCode)" />
</div>

<div class="col-12 row">
    <label class="col-2 font-weight-bold">CountryName:</label>
    <InputText id="CountryName" @bind-Value="DisplayCountry.CountryName" placeholder="CountryName" />
    &nbsp;<ValidationMessage For="@(() => DisplayCountry.CountryName)" />
</div>


<br />
<div class="col-12 row">
    <span class="col-2"></span>
    <input type="submit" class="form-control col-1 btn btn-primary" value="Save" />
</div>

Answer 1

Вот простая демонстрация, как показано ниже:

Модель:

namespace BlazorApp1.Models
{
    public class Country
    {
        public string CountryCode { get; set; }
        public string CountryName { get; set; }
    }
}

Бритва:

@page "/counter"
@using BlazorApp1.Models
@using BlazorApp1.Data
@inject CountryService countryService

    <EditForm Model="@DisplayCountry">
        <DataAnnotationsValidator />
        <ValidationSummary />

        <div class="col-12 row">
            <label class="col-2 font-weight-bold">CountryCode:</label>
            <InputSelect @bind-Value="@coutryName" class="form-control">
                    @foreach (var cnt in DisplayCountry)
                    {
                        <option value="@cnt.CountryName">@cnt.CountryCode</option>
                    }

            </InputSelect>
            &nbsp;<ValidationMessage For="@(() => DisplayCountry[0].CountryCode)" />
        </div>

        <div class="col-12 row">
            <label class="col-2 font-weight-bold">CountryName:</label>
            <InputText id="CountryName" @bind-Value="@coutryName" placeholder="CountryName" class="form-control"/>
            &nbsp;<ValidationMessage For="@(() => DisplayCountry[0].CountryName)" />
        </div>


        <br />
        <div class="col-12 row">
            <span class="col-2"></span>
            <input type="submit" class="form-control col-1 btn btn-primary" value="Save" />
        </div>
   </EditForm>
@code
{    
    string coutryName;
    List<Country> DisplayCountry = new List<Country>();
    protected override void OnInitialized()
    {
        DisplayCountry = countryService.GetCountry();
    }
}

Сервис:

namespace BlazorApp1.Data
{
    public class CountryService
    {
        public List<Country> GetCountry()
        {
            //for easy testing,I just hard-coded assignment
            //you could get the data from database like
            //_context.Country.ToList()
            var data = new List<Country>()
            {
                new Country() { CountryCode="1011", CountryName="USA"},
                new Country() { CountryCode="1021", CountryName="Africa"},
                new Country() { CountryCode="1031", CountryName="China"},
                new Country() { CountryCode="1041", CountryName="UK"},

            };
            return  data;
        }
    }
}

Startup.cs:

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    //register the service
    services.AddSingleton<CountryService>();
}

Результаты:

Если вы не хотите получать данные из сервиса, вы можете заполнить данные, например, здесь .