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

啟動.cs：

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

結果：

如果你不想從服務中獲取數據，你可以像這里一樣播種數據。