如何在Razor Page中展示多列数据到单个下拉菜单？

一、数据结构优化（优先推荐） #

当前用AssocAgencies1到AssocAgencies5多列存储关联机构的方式扩展性差（最多仅支持5个机构）、查询维护不便，更合理的方案是新建关联表实现标准化关系型设计：

1. 创建MunicipalityAgency表/实体，存储市政当局与机构的一对多关系：

public class MunicipalityAgency
{
    public int Id { get; set; }
    public int MunicipalityId { get; set; } // 关联市政当局ID
    public string AgencyName { get; set; } // 机构名称
    public Municipality Municipality { get; set; } // 导航属性
}

2. 更新Municipality模型，添加导航属性：

public class Municipality
{
    // 原有属性：Id, Name, Address, Phone...
    public ICollection<MunicipalityAgency> AssociatedAgencies { get; set; } = new List<MunicipalityAgency>();
}

这种设计支持无限数量的关联机构，后续维护、查询都更灵活，完全符合关系型数据库的设计规范。

二、联动下拉菜单实现（分两种场景） #

场景1：暂时保留现有多列结构 #

如果无法立即修改数据库结构，可以通过计算属性整合多列数据，再实现前端联动：

1. 在Municipality模型中添加计算属性，收集非空的机构名称：

public class Municipality
{
    // 原有属性：AssocAgencies1, AssocAgencies2, AssocAgencies3, AssocAgencies4, AssocAgencies5...
    
    public IEnumerable<string> GetAssociatedAgencies()
    {
        var agencies = new List<string>();
        if (!string.IsNullOrWhiteSpace(AssocAgencies1)) agencies.Add(AssocAgencies1);
        if (!string.IsNullOrWhiteSpace(AssocAgencies2)) agencies.Add(AssocAgencies2);
        if (!string.IsNullOrWhiteSpace(AssocAgencies3)) agencies.Add(AssocAgencies3);
        if (!string.IsNullOrWhiteSpace(AssocAgencies4)) agencies.Add(AssocAgencies4);
        if (!string.IsNullOrWhiteSpace(AssocAgencies5)) agencies.Add(AssocAgencies5);
        return agencies;
    }
}

2. 在Referral的CreateModel中添加异步接口，返回选中市政当局的机构列表：

public class CreateModel : PageModel
{
    private readonly YourDbContext _context;

    public CreateModel(YourDbContext context) => _context = context;

    // 原有代码...

    public IActionResult OnGetAgencies(int municipalityId)
    {
        var municipality = _context.Municipalities.Find(municipalityId);
        if (municipality == null) return NotFound();
        
        var agencies = municipality.GetAssociatedAgencies()
            .Select(a => new { Text = a, Value = a });
        return new JsonResult(agencies);
    }
}

3. 前端视图实现联动（以ASP.NET Core Razor视图为例）：

<!-- 市政当局下拉框 -->
<select id="municipalityId" asp-for="Referral.MunicipalityId" asp-items="ViewBag.Municipalities">
    <option value="">请选择市政当局</option>
</select>

<!-- 机构下拉框 -->
<select id="agency" asp-for="Referral.AgencyName">
    <option value="">请先选择市政当局</option>
</select>

<script>
    // 监听市政当局选择变化
    document.getElementById('municipalityId').addEventListener('change', async function() {
        const municipalityId = this.value;
        const agencySelect = document.getElementById('agency');
        
        if (!municipalityId) {
            agencySelect.innerHTML = '<option value="">请先选择市政当局</option>';
            return;
        }
        
        // 请求机构列表
        const response = await fetch(`/Referrals/Create?handler=Agencies&municipalityId=${municipalityId}`);
        const agencies = await response.json();
        
        // 更新机构下拉框
        agencySelect.innerHTML = '<option value="">请选择机构</option>';
        agencies.forEach(agency => {
            const option = document.createElement('option');
            option.value = agency.Value;
            option.textContent = agency.Text;
            agencySelect.appendChild(option);
        });
    });
</script>

场景2：使用优化后的关联表结构 #

如果已经采用了MunicipalityAgency关联表，实现会更简洁：

1. 修改CreateModel中的接口：

public IActionResult OnGetAgencies(int municipalityId)
{
    var agencies = _context.Municipalities
        .Include(m => m.AssociatedAgencies)
        .FirstOrDefault(m => m.Id == municipalityId)?
        .AssociatedAgencies
        .Select(a => new { Text = a.AgencyName, Value = a.Id.ToString() });
    
    return new JsonResult(agencies ?? Enumerable.Empty<object>());
}

2. 前端逻辑与场景1一致，只是Referral表中可以存储AgencyId（而非名称），数据一致性更好：

<select id="agency" asp-for="Referral.AgencyId">
    <option value="">请先选择市政当局</option>
</select>

三、关于数组列的说明 #

不建议将机构合并为数组存储在单列中（比如用JSON数组），原因包括：

• 无法利用数据库索引进行查询，性能差
• 数据校验、更新不便（比如修改单个机构需要解析整个数组）
• 不符合关系型数据库的设计范式，长期维护成本高

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