首页 > 解决方案 > Blazor 应用程序 InputSelect 未从数据库中提取

问题描述

我正在尝试从数据库表中提取国家/地区列表,但没有显示结果集,并且表中有数据。以下是我所做的。虽然,我是第一次使用 InputSelect 字段,所以我还没有完全理解它。我能够使用输入文本来提取数据。所以看起来我的数据库连接字符串很好。

            //Razor Page     

            @inject ICountryData _db            
            <h1>Choose a Country</h1>            
            <h4>Countries</h4>
            @if (Countries is null)
            {
            <p><em>Loading...</em></p>
            }
            else
            {
            <div class="col-6">
            <EditForm Model="@DisplayCountry">
            <div class="form-group">
            <label class="col-2 font-weight-bold">CountryName:</label>
            <InputSelect  @bind-Value="DisplayCountry.CountryName" class="form-control">
            <option value="">Select</option>
            @foreach (var person in Countries)
            {
            <option value="@DisplayCountry.CountryName">     @DisplayCountry.CountryCode </option>
            }

            </InputSelect>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
            </EditForm>
            </div>
            }
            @code {
            private List<CountryModel> Countries;
            private DisplayCountryModel DisplayCountry = new DisplayCountryModel();

            protected override async Task OnInitializedAsync()
            {
            Countries = await _db.GetCountry();
            }

            private async Task InsertCountry()
            {
            CountryModel C = new CountryModel
            {
            CountryCode = DisplayCountry.CountryCode,
            CountryName = DisplayCountry.CountryName,

            };

            await _db.InsertCountry(C);

            Countries.Add(C);

            DisplayCountry = new DisplayCountryModel();
            }
            }       


            using DataAccessLibrary.Models;
            using System;
            using System.Collections.Generic;
            using System.Text;
            using System.Threading.Tasks;

            namespace DataAccessLibrary
            {
            public class CountryData : ICountryData
            {
            private readonly ISqlDataAccess _db;

            public CountryData(ISqlDataAccess db)
            {
            _db = db;
            }

            public Task<List<CountryModel>> GetCountry()
            {
            string sql = "select * from dbo.Country";

            return _db.LoadData<CountryModel, dynamic>(sql, new { });
            }

            public Task InsertCountry(CountryModel Country)
            {
            string sql = @"insert into dbo.Country (CountryCode, CountryName)
            values (@CountryCode, @CountryName);";

            return _db.SaveData(sql, Country);
            }
            }
            }

标签: asp.net-mvcasp.net-coreblazorblazor-server-sideblazor-client-side

解决方案


@foreach变量是错误的。我将其重写为以下内容,并且有效。

<InputSelect @bind-Value="DisplayCountry.CountryName" class="form-control">
    <option value="">Select</option>
    @foreach (var item in Countries)
    {
        <option value="@item.CountryCode"> @item.CountryName </option>
    }
</InputSelect>

推荐阅读