【发布时间】：2020-04-23 09:56:35
【问题描述】：
我正在尝试加载下表，但是学校的下拉菜单未加载。在我看来它是空的。而且我认为 InputSelect 在 Blazor 中还不能与 INT ID 一起使用。
我填写了下面的内容，国家代码是从国家表中填充的，作为基于从 InputSelect 列中选择的国家的查找，“国家名称”，以蓝色圈出。当我选择国家时，我希望它加载相应的国家代码，但不是这样。
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]
【问题讨论】：
-
检查您的列表是否有任何条目。如果没有条目，则不会显示任何内容。只需输出长度即可。
-
是的，列表中有条目。
-
能否向我展示从浏览器中选择创建的 html 以查看究竟创建了什么？
-
在我看来，有几种可能性可能是犯了这个罪。 A）列表为空或没有元素（使用简单的
CountryList.Count()
检查）B）列表不可见（检查生成的 html 代码）C）列表的更改是未正确处理。为此，您必须使用 StateHasChanged()。不幸的是，您的示例代码没有显示列表的分配或加载。 -
@Taladan，html 已添加。
标签： javascript c# asp.net-mvc blazor blazor-server-side