ASP.NET MVC实现动态数据库元素录入控件的问题求助

我帮你整理了可行的实现方案，解决你之前JavaScript代码的问题，同时确保ASP.NET MVC的模型绑定能正常工作：

1. 调整View结构：提前准备隐藏的额外字段 #

首先，把需要动态显示的第5-8列控件放在一个隐藏的容器里，这样我们可以通过JavaScript控制它的显示，避免动态拼接易出错的HTML：

@model Generate_database.Models.Recipe 

@{ 
    ViewData["Title"] = "Create"; 
} 

<h1>Create</h1> 

<h4>Recipe</h4> 
<hr /> 
<div class="row"> 
    <div class="col-md-4"> 
        <form asp-action="Create"> 
            <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
            <!-- 前4列默认显示的控件 -->
            <div class="form-group"> 
                <label asp-for="RecipeName" class="control-label"></label> 
                <input asp-for="RecipeName" class="form-control" /> 
                <span asp-validation-for="RecipeName" class="text-danger"></span> 
            </div> 
            <div class="form-group"> 
                <label asp-for="RecipeTimer" class="control-label"></label> 
                <input asp-for="RecipeTimer" class="form-control" /> 
                <span asp-validation-for="RecipeTimer" class="text-danger"></span> 
            </div> 
            <div class="form-group"> 
                <label asp-for="ComponentID_1" class="control-label"></label> 
                <select asp-for="ComponentID_1" class="form-control" asp-items="ViewBag.ComponentID_1"></select> 
            </div> 
            <div class="form-group"> 
                <label asp-for="RecipeInputWeight_1" class="control-label"></label> 
                <input asp-for="RecipeInputWeight_1" class="form-control" /> 
                <span asp-validation-for="RecipeInputWeight_1" class="text-danger"></span> 
            </div> 

            <!-- 第5-8列的控件，默认隐藏 -->
            <div id="extraFields" style="display: none; margin-top: 20px;">
                <div class="form-group"> 
                    <label asp-for="ComponentID_2" class="control-label"></label> 
                    <select asp-for="ComponentID_2" class="form-control" asp-items="ViewBag.ComponentID_2"></select> 
                </div> 
                <div class="form-group"> 
                    <label asp-for="RecipeInputWeight_2" class="control-label"></label> 
                    <input asp-for="RecipeInputWeight_2" class="form-control" /> 
                    <span asp-validation-for="RecipeInputWeight_2" class="text-danger"></span> 
                </div> 
                <div class="form-group"> 
                    <label asp-for="ComponentID_3" class="control-label"></label> 
                    <select asp-for="ComponentID_3" class="form-control" asp-items="ViewBag.ComponentID_3"></select> 
                </div> 
                <div class="form-group"> 
                    <label asp-for="RecipeInputWeight_3" class="control-label"></label> 
                    <input asp-for="RecipeInputWeight_3" class="form-control" /> 
                    <span asp-validation-for="RecipeInputWeight_3" class="text-danger"></span> 
                </div> 
            </div>

            <!-- 触发显示的按钮 -->
            <button type="button" id="showExtraBtn" class="btn btn-outline-primary mt-3">显示更多字段</button>

            <div class="form-group mt-4">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

2. 编写正确的JavaScript代码 #

你的原代码有两个核心问题：

• 选择器错误：$("btnAdd") 应该是 $("#showExtraBtn")（jQuery选择ID需要加#前缀）
• 服务器端HTML与JS冲突：@Html.EditorFor会被服务器渲染成完整的HTML代码，直接放在JS字符串里会因为HTML中的引号、换行等字符破坏JS语法，导致代码无法执行

下面是修正后的JS代码，放在View底部（或单独的JS文件中）：

<script>
    $(document).ready(function() {
        // 点击按钮平滑显示隐藏的额外字段
        $("#showExtraBtn").click(function() {
            $("#extraFields").slideDown();
            // 可选：点击后隐藏按钮
            // $(this).hide();
        });
    });
</script>

3. 可选：动态生成可重复的字段 #

如果你需要支持多次添加新字段（而非仅显示一次5-8列），可以用模板的方式实现：

首先在View中添加模板容器：

<script type="text/template" id="fieldTemplate">
    <div class="form-group"> 
        <label class="control-label">Component ID</label> 
        <select name="ComponentID_{0}" class="form-control" asp-items="ViewBag.ComponentID"></select> 
    </div> 
    <div class="form-group"> 
        <label class="control-label">Input Weight</label> 
        <input name="RecipeInputWeight_{0}" class="form-control" /> 
        <span class="text-danger"></span> 
    </div>
</script>

然后修改JS代码：

<script>
    $(document).ready(function() {
        let counter = 3; // 从第3组开始，已存在1、2组字段
        $("#addFieldBtn").click(function() {
            // 读取模板并替换占位符
            let template = $("#fieldTemplate").html();
            let newFields = template.replace(/\{0\}/g, counter);
            // 插入到表单指定位置
            $("#extraFieldsContainer").append(newFields);
            counter++;
        });
    });
</script>

注意：这种动态重复添加的方式，建议把模型改成集合类型（比如List<Component>），这样ASP.NET MVC的模型绑定才能正确接收多组字段的值。

原代码失败的核心原因总结 #

1. 选择器语法错误：忘记给ID选择器加#前缀，导致无法找到按钮元素
2. 服务器端渲染与客户端JS冲突：直接在JS中拼接@Html.EditorFor生成的HTML，会因为HTML中的特殊字符（引号、换行）破坏JS字符串结构，导致脚本执行失败

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