如何基于Enum下拉选择框动态切换表单中的input类型

你当前的代码存在几个核心问题：多个下拉框绑定了同一个UnitType属性，后端无法区分不同输入组的选择；onchange事件绑定方式错误，后端渲染的静态值无法响应前端动态切换。要实现需求，需要结合后端枚举定义和前端JavaScript处理动态交互。

1. 后端枚举与Model调整 #

首先明确枚举与输入类型的映射，并为每个输入组设置独立的属性，避免绑定冲突：

// 定义枚举，关联对应的输入类型
public enum UnitTypes
{
    [Display(Name = "文本输入")]
    TextInput,
    [Display(Name = "滑块输入")]
    RangeInput,
    [Display(Name = "多行文本")]
    TextAreaInput
}

// 调整PageModel，为每个输入组设置独立的类型和值属性
public class IndexModel : PageModel
{
    [BindProperty]
    public UnitTypes UnitOneType { get; set; }
    [BindProperty]
    public string UnitOneValue { get; set; }

    [BindProperty]
    public UnitTypes UnitTwoType { get; set; }
    [BindProperty]
    public string UnitTwoValue { get; set; }

    public void OnGet()
    {
        // 默认选中文本输入类型
        UnitOneType = UnitTypes.TextInput;
        UnitTwoType = UnitTypes.TextInput;
    }

    public IActionResult OnPost()
    {
        // 处理表单提交逻辑
        return Page();
    }
}

2. 前端HTML与JavaScript实现 #

修正表单结构，通过JS监听下拉框变化，动态替换对应的输入控件（兼容textarea与input的差异）：

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
</div>

<form method="post" asp-page="Index">
    <!-- 第一个输入组 -->
    <div class="form-group">
        <label>输入类型1</label>
        <select asp-items="@Html.GetEnumSelectList<UnitTypes>()" asp-for="UnitOneType" 
                class="form-control unit-type-select" data-target="unit-one-container"></select>
        <div id="unit-one-container" class="mt-2" data-input-name="UnitOneValue">
            @await RenderInputForType(Model.UnitOneType, Model.UnitOneValue, "UnitOneValue")
        </div>
    </div>

    <!-- 第二个输入组 -->
    <div class="form-group mt-3">
        <label>输入类型2</label>
        <select asp-items="@Html.GetEnumSelectList<UnitTypes>()" asp-for="UnitTwoType" 
                class="form-control unit-type-select" data-target="unit-two-container"></select>
        <div id="unit-two-container" class="mt-2" data-input-name="UnitTwoValue">
            @await RenderInputForType(Model.UnitTwoType, Model.UnitTwoValue, "UnitTwoValue")
        </div>
    </div>

    <button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>

@section Scripts {
    <script>
        // 监听所有类型选择下拉框的变化
        document.querySelectorAll('.unit-type-select').forEach(select => {
            select.addEventListener('change', function() {
                const targetContainer = document.getElementById(this.dataset.target);
                const selectedType = this.value;
                const inputName = targetContainer.dataset.inputName;
                const currentValue = getCurrentInputValue(targetContainer);

                // 根据选中类型生成对应输入控件的HTML
                let newInputHtml = '';
                switch(selectedType) {
                    case 'TextInput':
                        newInputHtml = `<input type="text" name="${inputName}" value="${currentValue}" class="form-control" />`;
                        break;
                    case 'RangeInput':
                        newInputHtml = `<input type="range" name="${inputName}" value="${currentValue || 50}" min="0" max="100" class="form-control" />`;
                        break;
                    case 'TextAreaInput':
                        newInputHtml = `<textarea name="${inputName}" class="form-control">${currentValue}</textarea>`;
                        break;
                }

                // 替换容器内的输入控件
                targetContainer.innerHTML = newInputHtml;
            });
        });

        // 获取当前输入控件的值，用于切换时保留内容
        function getCurrentInputValue(container) {
            const input = container.querySelector('input, textarea');
            return input ? input.value : '';
        }
    </script>
}

@functions {
    // 后端渲染初始输入控件的辅助方法
    public async Task<IHtmlContent> RenderInputForType(UnitTypes type, string value, string inputName)
    {
        switch(type)
        {
            case UnitTypes.TextInput:
                return Html.TextBox(inputName, value, new { @class = "form-control" });
            case UnitTypes.RangeInput:
                return Html.TextBox(inputName, value ?? "50", new { @type = "range", @min = "0", @max = "100", @class = "form-control" });
            case UnitTypes.TextAreaInput:
                return Html.TextArea(inputName, value, new { @class = "form-control" });
            default:
                return Html.TextBox(inputName, value, new { @class = "form-control" });
        }
    }
}

关键说明 #

• 独立属性绑定：每个输入组使用独立的Type和Value属性，确保提交时能正确获取每个输入的类型与对应值。
• 动态控件替换：由于textarea不属于input标签，通过直接替换容器HTML的方式实现切换，避免浏览器兼容性问题。
• 值保留逻辑：切换前获取当前输入值，确保用户已输入的内容不会丢失。

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