Blazor - 使用 INT ID 的级联下拉列表不填充数据

Question

我填写了以下内容，国家代码是从国家表中填充的，作为基于从InputSelect 列“国家名称”中选择的国家的查找，用蓝色圈起来。但是，当我填写表单的其余部分并单击提交时，它抛出了如下所示的错误。

但是，如果我在 inputText 列“国家/地区代码”中手动输入相同的代码，则它会提交表单。

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

表结构

            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，这让事情变得相当混乱。同样在您的“国家代码”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 来更新。