向c#控制器发送动态生成的文本框值

本文关键字：文本 动态 控制器 | 更新日期: 2023-09-27 18:15:11

所以我有一个表是这样工作的:https://gfycat.com/WeakBlueIslandwhistler

生成的

: 

<table class="table table-bordered table-with-button table-condensed " id="hidTable">
                            <thead>
                            <tr>
                                <th>HID #</th>
                                <th>Lines</th>
                            </tr>
                            </thead>
                            @for (int j = 0; j < 3; j++)
                            {
                                <tr>
                                    <td>
                                        <input class="form-control table-with-button" type="number" placeholder="HID" id="hid-@j">
                                    </td>
                                    <td>
                                        <input class="form-control table-with-button" type="number" placeholder="Lines" id="lines-@j">
                                    </td>
                                </tr>
                            }
 </table>

通过调用javascript方法创建新的行和文本框。

本质上，在这个表中有未知数量的文本字段对，数据对需要传递给控制器…(我正在考虑将其存储为tempdata中的对象?)

每个文本框都有一个唯一的id(分别为hid-1, hid-2, hid-3和lines-1, lines-2, lines-3)

迭代这些文本框，保存它们的值(我可以在保存之前处理验证)，然后将其传递给后端，最好的方法是什么?

向c#控制器发送动态生成的文本框值

如果满足一些条件，MVC Modelbinder将能够直接绑定POST数据:

  • 动态添加的HTML输入的名称和id符合MVC使用的命名方案。例如，要绑定集合的第一个元素，html id属性的值应该是{collectionName}_0, name属性的值应该是{collectionName}[0]
  • ViewModel包含可以绑定输入列表的集合。

在你的例子中，定义一个ViewModel它包含了HIDs和Lines的列表

public class PostDataModel {
    public ICollection<int> Hids { get; set; }
    public ICollection<int> Lines { get; set; }
}

然后确保添加额外行的javascript代码正确设置id和name。

为第0行生成的输入应该如下所示: 
<input class="form-control table-with-button" type="number" placeholder="HID" id="Hids_0" name="Hids[0]">
<input class="form-control table-with-button" type="number" placeholder="Lines" id="Lines_0" name="Lines[0]">

如果用户可以在提交前删除任何行，注意非顺序索引!

然后使用普通POST提交表单，并使用它们的索引关联id和Lines。

相关文章：