Blazor - InputSelect 上的级联下拉菜单未加载

Question

我正在尝试加载下表，但是学校的下拉菜单未加载。 在我看来它是 null。 而且我认为 InputSelect 在 Blazor 中还不能使用 INT ID。

我填写了以下内容，国家代码是从国家表中填充的，作为基于从 InputSelect 列中选择的国家的查找，“国家名称”，以蓝色圈出。 当我 select 国家时，我希望它加载相应的国家代码但不是这样。

      Razor Page

        @using ITSM.Data
        @using ITSM.Services

        @inject ISchoolService service
        @inject IJSRuntime jsRuntime



        <div class="modal" tabindex="-1" role="dialog" id="schoolmodal">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title">School Detail</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
        </button>
        </div>
        <div class="modal-body">


        @if (CountryList is null)
        {
        <p><em>Loading...</em></p>
        }
        else
        {

        <h4>Schools</h4>
        <EditForm Model="@SchoolObject" OnValidSubmit="@HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />

        <div class="form-group">
        <label for="Location" CountryCode">Country Code:</label>
        <InputSelect @bind-Value="@SchoolObject.CountryCode" class="form-control">
        <option value="0">Select</option>

        @foreach (var item in CountryList)
        {
        <option value="@item.CountryCode">@item.CountryName</option>

        }
        </InputSelect>
        &nbsp;<ValidationMessage For="@(() => @CountryObject.CountryCode)" />
        }
        </div>
        <br />



        <div class="form-group">
        <label class="col-2 font-weight-bold">Country Code:</label>
        <InputText id="CountryCode" @bind-Value="@SchoolObject.CountryCode" class="form-control"    placeholder="CountryCode" />
        &nbsp;<ValidationMessage For="@(() => SchoolObject.CountryCode)" />
        </div>



          Tables Structure

                CREATE TABLE [dbo].[Country](
                    [CountryID] [int] IDENTITY(1,1) NOT NULL,
                    [CountryCode] [char](3) NOT NULL,
                    [CountryName] [varchar](255) NOT NULL
                ) ON [PRIMARY]


            CREATE TABLE [dbo].[School](
            [SchoolID] [int] IDENTITY(1,1) NOT NULL,
            [Name] [nvarchar](50) NOT NULL,
            [Location] [nvarchar](50) NOT NULL,
            [Address] [nvarchar](50) NULL,
            [PostCode] [nvarchar](10) NULL,
            [CountryCode] [char](3) NOT NULL,
            [SchoolAdminPersonID] [int] NOT NULL,
         CONSTRAINT [PK_School] PRIMARY KEY CLUSTERED 
        (
            [SchoolID] ASC
        )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
        ) ON [PRIMARY]





        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>


        </EditForm>
        }

        </div>
        </div>

        </div>

        </div>





        @code {
        private List<CountryModel> CountryList;
        //private List<SchoolModel> SchoolList;
        [Parameter]
        public SchoolModel CountryObject { get; set; }
        [Parameter]
        public SchoolModel SchoolObject { get; set; }
        protected string schoold = string.Empty;

        [Parameter]
        public Action DataChanged { get; set; }



        private async Task Closeschoolmodal()
        {
        await jsRuntime.InvokeAsync<object>("CloseModal", "schoolmodal");
        }


        private async void HandleValidSubmit()
        {
        if (SchoolObject.SchoolID == 0)
        {
        await service.Add(SchoolObject);
        }
        else
        {
        await service.Update(SchoolObject);
        }
        await Closeschoolmodal();
        DataChanged?.Invoke();
        }


        }





      SchoolList

        @page "/SchoolList"

        @using ITSM.Shared
        @using ITSM
        @using ITSM.Data
        @using ITSM.Services
        @inject ISchoolService service
        @inject IJSRuntime jsRuntime

        <h1>School</h1>

        <p>Countries List.</p>

        @if (SchoolLists == null)
        {
        <p><em>Loading...</em></p>
        }
        else
        {
        <br>
        <div>
        <input type="button" data-toggle="modal" data-target="#schoolmodal" class="btn btn-primary" value="Add School" @onclick="(() => InitializeTaskObject())" />
        </div>
        <br/>

        <table class="table">
        <thead>
        <tr>
        <th>SchoolID</th>
        <th>Name</th>
        <th>Location</th>
        <th>Address</th>
        <th>PostCode</th>
        <th>CountryCode</th>
        <th>Edit</th>
        <th>Delete</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var SchoolItem in SchoolLists)
        {
        <tr>
        <td>@SchoolItem.SchoolID</td>
        <td>@SchoolItem.Name</td>
        <td>@SchoolItem.Location</td>
        <td>@SchoolItem.Address</td>
        <td>@SchoolItem.PostCode</td>
        <td>@SchoolItem.CountryCode</td>
        <td><input type="button" class="btn btn-primary" @onclick="(() => PrepareForEdit(SchoolItem))" data-toggle="modal" data-target="#schoolmodal" value="Edit"></td>
        <td><input type="button" class="btn btn-danger" @onclick="(() => PrepareForDelete(SchoolItem))" data-toggle="modal" data-target="#confirmDeleteModal" value="Delete" /></td>
        </tr>
        }
        </tbody>
        </table>
        }


        <ConfirmDialog OnClick="@Delete" />
        <SchoolDetail SchoolObject=SchoolObject DataChanged="@DataChanged"></SchoolDetail>




        @code {
        List<SchoolModel> SchoolLists;
        SchoolModel SchoolObject = new SchoolModel();

        private void PrepareForEdit(SchoolModel School)
        {
        SchoolObject = School;
        }

        private void PrepareForDelete(SchoolModel School)
        {
        SchoolObject = School;
        }

        private async void Delete()
        {
        var School = await service.Delete(SchoolObject.SchoolID);
        await jsRuntime.InvokeAsync<object>("Closemodal", "confirmDeletemodal");
        SchoolLists = await service.Get();
        SchoolObject = new SchoolModel();
        StateHasChanged();
        }

        protected override async Task OnInitializedAsync()
        {
        SchoolLists = await service.Get();

        }
        private void InitializeTaskObject()
        {
        SchoolObject = new SchoolModel();
        }
        private async void DataChanged()
        {
        SchoolLists = await service.Get();
        StateHasChanged();
        }
        }


     [![Snapshot of the dropdown menu][1]][1]

Answer 1

我看到了问题。 在您的 SchoolDetail 中，您的 CountryList 是 null。 您不会通过参数或来自父 object 的 SchoolDetail 中的其他位置分配 CountryList。 您必须在 SchoolDetail 中加载/创建一个，或者通过参数从 SchoolList 中注入一个加载/创建的列表。 在 JavaScript 中（有时）在可见的子代码中创建变量。 在 Blazor/C# 中，您必须将其从一个传输到另一个。

这里有一个例子。 学校变化详情

//private List<SchoolModel> SchoolList;
[Parameter] public List<CountryModel> CountryList { get; set; } = null;

并更改 SchoolList。

<SchoolDetail SchoolObject="@SchoolObject" CountryList="@YourCountryList" DataChanged="@DataChanged"></SchoolDetail>

我在那里看不到你的 CountryList。 您必须在那里加载或创建一个。

我建议以这种方式编写对象，然后您稍后会在代码中发现它们更好。

SchoolObject="@SchoolObject"