Blazor - 带有 INT ID 的级联下拉列表未填充数据

Question

我填写了以下内容，国家代码是从 table 国家/地区填充的，作为根据从 InputSelect 列 "Country Name" 中选择的国家/地区进行查找，以蓝色圈出.然而，当我填写表格的其余部分并点击提交时，它抛出了如下所示的错误。

但是，如果我在 inputText 列中手动输入相同的代码 "Country Code"，那么它会提交表单。

            @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>

Table结构

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


            }

学校列表

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

Answer 1

现在您同时拥有 newPerson 和 newPerson2，这让事情变得非常混乱。同样在您的 "Country Code" Input 元素中，您实际上没有将它绑定到 CountryCode 属性，这意味着 InsertSchool() 中的 newPerson2.CountryCode 总是会为空。

我建议您删除 newPerson2 并更改国家名称下拉列表和国家代码输入，如下所示：

<InputSelect @bind-Value="@newPerson.CountryCode">
    <option value="0">Select</option>

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

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

然后在 InsertSchool() 你当然应该使用 newPerson: CountryCode = newPerson.CountryCode.

我还没有测试过上面的内容，但我希望它能工作。这意味着您的下拉菜单 (InputSelect) 将根据您的选择设置 newPerson.CountryCode 的值。发生这种情况时，国家代码 Input 将通过显示 newPerson.CountryCode 进行更新，并确保在将其保存到数据库时填写 CountryCode。

Blazor - 带有 INT ID 的级联下拉列表未填充数据

Blazor - Cascading dropdown with INT ID not populatiing data

.net

c#

sql-server

razor-pages

blazor-server-side