如何使用ASP.NET Core在网页中动态添加不同类型的控件？

首先明确：ASP.NET Core 不再兼容 WebForm 时代的服务器控件树、Page 生命周期机制，因此原 .NET Framework 中Controls.Add动态添加控件的写法确实无法直接沿用，但有更符合现代开发规范的替代实现，完全支持服务端处理，和你的预期一致，带数据查询的下拉框这类场景服务端实现效率更高、逻辑更安全，并非必须使用客户端实现。

服务端实现（Razor Pages 为例，MVC 逻辑完全一致） #

核心思路是将控件抽象为数据模型，后台根据选中的选项生成对应控件的配置集合，前端通过模板循环渲染即可，逻辑完全可以写在对应页面的 PageModel （即你理解的 code behind）中。

1. 定义动态控件模型 #

// 控件类型枚举
public enum ControlType
{
    TextBox,
    DropDownList,
    CheckBox
}

// 动态控件配置模型
public class DynamicControl
{
    public ControlType Type { get; set; }
    public string Id { get; set; }
    public string Label { get; set; }
    public bool IsRequired { get; set; }
    // 下拉框选项集合，可从数据库查询赋值
    public List<SelectListItem> Options { get; set; }
    public object DefaultValue { get; set; }
}

2. 后台 PageModel 逻辑 #

public class DynamicFormModel : PageModel
{
    // 绑定前端选中的分类（即你所说的A/B选项）
    [BindProperty]
    public string SelectedCategory { get; set; }
    // 生成的动态控件集合，传递到前端渲染
    public List<DynamicControl> DynamicControls { get; set; } = new();

    // 分类选择提交后触发的处理逻辑
    public IActionResult OnPostLoadControls()
    {
        DynamicControls.Clear();
        // 根据选中分类生成对应控件
        if (SelectedCategory == "A")
        {
            // 示例：添加文本框
            DynamicControls.Add(new DynamicControl
            {
                Type = ControlType.TextBox,
                Id = "UserName",
                Label = "用户名",
                IsRequired = true
            });
            // 示例：添加带查询数据的下拉框
            var deptOptions = _dbContext.Departments
                .Select(d => new SelectListItem { Text = d.DeptName, Value = d.DeptId.ToString() })
                .ToList();
            DynamicControls.Add(new DynamicControl
            {
                Type = ControlType.DropDownList,
                Id = "Department",
                Label = "所属部门",
                Options = deptOptions
            });
            // 剩余8个控件按需求补充即可
        }
        else if (SelectedCategory == "B")
        {
            // 按需生成8个对应控件即可
        }
        return Page();
    }
}

3. 前端 Razor 页面渲染 #

@page
@model DynamicFormModel

<!-- 分类选择表单 -->
<form method="post">
    <select asp-for="SelectedCategory" asp-items="new List<SelectListItem>
    {
        new SelectListItem{Text = "选项A", Value = "A"},
        new SelectListItem{Text = "选项B", Value = "B"}
    }" onchange="this.form.submit()"></select>
    <button type="submit" asp-page-handler="LoadControls" hidden></button>
</form>

<!-- 动态控件渲染区域 -->
@if (Model.DynamicControls.Any())
{
    <div id="dynamic-container">
        @foreach (var control in Model.DynamicControls)
        {
            <div class="form-item">
                <label for="@control.Id">@control.Label @(control.IsRequired ? "*" : "")</label>
                @switch (control.Type)
                {
                    case ControlType.TextBox:
                        <input type="text" id="@control.Id" name="@control.Id" value="@control.DefaultValue" @(control.IsRequired ? "required" : "")>
                        break;
                    case ControlType.DropDownList:
                        <select id="@control.Id" name="@control.Id" asp-items="@control.Options"></select>
                        break;
                    case ControlType.CheckBox:
                        <input type="checkbox" id="@control.Id" name="@control.Id" @(Convert.ToBoolean(control.DefaultValue) ? "checked" : "")>
                        break;
                }
            </div>
        }
    </div>
}

如果需要无刷新体验，只需要把动态渲染部分封装为分部视图，通过 AJAX 请求后端返回分部视图结果替换容器内容即可。

可选客户端实现 #

如果需要更流畅的交互体验，也可以选择客户端渲染，下拉框选项可通过接口请求后端获取：

// 控件模板映射
const controlTpl = {
  TextBox: cfg => `<div class="form-item"><label>${cfg.label}</label><input type="text" id="${cfg.id}" ${cfg.required ? 'required' : ''}></div>`,
  DropDownList: cfg => `<div class="form-item"><label>${cfg.label}</label><select id="${cfg.id}">${cfg.options.map(o => `<option value="${o.value}">${o.text}</option>`).join('')}</select></div>`,
  CheckBox: cfg => `<div class="form-item"><label><input type="checkbox" id="${cfg.id}"> ${cfg.label}</label></div>`
}

// 分类选择变化时触发
document.querySelector('#categorySelect').addEventListener('change', async e => {
  const config = await fetch(`/api/control-config?category=${e.target.value}`).then(res => res.json())
  document.querySelector('#dynamic-container').innerHTML = config.map(item => controlTpl[item.type](item)).join('')
})

两种方案均可根据项目需求选择，涉及大量数据查询的控件优先用服务端实现，无需额外暴露数据接口，逻辑更易维护。

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