Blazor动态创建文本输入列表并绑定值的实现问题

问题根源 #

你碰到的错误是因为foreach循环里的迭代变量（也就是这里的qitem）是只读状态，而Blazor的双向绑定（@bind）需要可赋值的变量，直接绑定迭代变量自然会报错。

解决方案 #

要实现国家与对应城市的绑定，你得创建一个关联国家名和城市名的模型类，用这个类的实例来存储每组数据，替代原来单纯的字符串列表。

步骤1：定义数据模型

在组件类里添加一个简单的模型类，用来关联国家和城市：

public class CountryCityPair
{
    public string CountryName { get; set; }
    public string CityName { get; set; }
}

步骤2：替换原列表为模型列表

把原来的List<string> CountryNames换成List<CountryCityPair>，并初始化数据（可以从你的原国家列表转换）：

private List<CountryCityPair> CountryCityList = new List<CountryCityPair>();

protected override void OnInitialized()
{
    // 替换成你实际的国家数据源
    var originalCountries = new List<string> { "中国", "美国", "日本", "德国" };
    CountryCityList = originalCountries.Select(c => new CountryCityPair { CountryName = c }).ToList();
}

步骤3：生成可绑定的动态输入框

在Razor部分遍历CountryCityList，绑定每个实例的CityName属性，同时用CountryName作为输入框标签：

@foreach (var item in CountryCityList)
{
    <div class="mb-3">
        <label>@item.CountryName：</label>
        <input type="text" @bind="@item.CityName" class="ms-2" />
    </div>
}

<!-- 可选：添加按钮测试获取输入数据 -->
<button class="btn btn-primary" @onclick="ShowInputCities">查看已输入城市</button>

@code {
    // 上述模型定义和初始化代码放这里
    private void ShowInputCities()
    {
        foreach (var pair in CountryCityList)
        {
            Console.WriteLine($"{pair.CountryName}对应的城市：{pair.CityName ?? "未输入"}");
        }
    }
}

为什么这个方案可行？ #

现在绑定的是CountryCityPair实例的CityName属性，这个属性是可读写的，完全满足Blazor双向绑定的要求。你可以随时遍历CountryCityList，直接获取每个国家对应的用户输入城市值。

内容的提问来源于stack exchange，提问作者Arun Singh