Blazor-InputSelect上的级联下拉菜单未加载 [英] Blazor - Cascading Dropdown menu on InputSelect not loading
问题描述
我正在尝试加载下表，但是，学校的下拉菜单未加载.在我看来，它为空.而且我发现在Blazor中，InputSelect尚不能使用INT ID.
I'm trying to load the below table, however, the drop-down menu for the school is not loading. It looks to me like it's null. And I figured that the InputSelect doesn't work with an INT ID yet in Blazor.
我填写了以下内容，并且根据从InputSelect列国家名称"中选择的国家(以蓝色圆圈表示)从国家/地区表中填充了国家/地区代码作为查找.选择国家/地区后，我希望它会加载相应的国家/地区代码，但情况并非如此.
I filled the below for and the country code was populated from a country table as a lookup based on the country chosen from the InputSelect column, "Country Name", circled in blue. When I select the country, I expect it to load the correspionding countrycode but not the case.
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>
<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" />
<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]
推荐答案
我看到了问题.在您的SchoolDetail中，您的CountryList为空.您不会通过参数或从父对象在SchoolDetail中的其他位置来分配CountryList. 您必须在SchoolDetail中加载/创建一个列表，或通过参数从SchoolList注入已加载/创建的列表. 在JavaScript中(有时)在子代码中创建的变量是可见的.在Blazor/C#中，您必须将其从一个传输到另一个.
I see the problem yet. In your SchoolDetail your CountryList is null. You don't assign the CountryList by parameter or somewhere else in SchoolDetail from parent object. You must load/create one in SchoolDetail or in inject from SchoolList by parameter a loaded/created list. In JavaScript are (sometimes) created variables in subcode visible. In Blazor/C# you must transport it from one to another.
这里是一个例子.更改SchoolDetail
Here a Example. Change in SchoolDetail
//private List<SchoolModel> SchoolList;
[Parameter] public List<CountryModel> CountryList { get; set; } = null;
并更改SchoolList.
And change in SchoolList.
<SchoolDetail SchoolObject="@SchoolObject" CountryList="@YourCountryList" DataChanged="@DataChanged"></SchoolDetail>
我在那里没有看到您的CountryList.您必须在此处加载或创建一个.
I don't see your CountryList there. You must Load or Create one there.
我建议以这种方式编写对象，然后您将在代码中一目了然地找到它们.
I recommend to write the objects this way, then you will find them later better in the code with one look.
SchoolObject="@SchoolObject"
这篇关于Blazor-InputSelect上的级联下拉菜单未加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
