Blazor 中的级联下拉菜单

Question

我正在使用服务器端 Blazor - 我在国家/地区表中有我的国家/地区列表，其中包含两列 - CountryCode 和 CountryName。如何使用 InputSelect 显示数据以选择国家名称并填充国家代码 这是我的剃须刀页面：

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

结果：

如果你不想从服务中获取数据，你可以像here这样播种数据。