jquery - 在 ASP.NET MVC 2 中实现以下条目表单的想法

Question

我有一个非常简单的数据输入表单要实现。它看起来像这样:

显然我已经模拟了实际的需求，但本质是相似的。

• 输入姓名并点击历史记录应该会弹出一个指向网址“/student/viewhistory/{name}”的弹出窗口
• 姓名和年龄为必填字段
• 子表单(在模型中)与 Class(一个下拉列表，包含数字 1 -> 10)和主题(例如包含 A -> D)形成一对需要分数的唯一值。因此，选择类(class)和科目，输入分数并单击“添加”应该会为学生“添加”此记录。然后，用户应该能够单击“保存”(将条目保存到数据库中)或能够向条目添加更多(类(class)、主题、分数)对。

有什么想法可以巧妙地实现这一点吗？ (我来自 DWH 领域......所以以无状态的方式思考对我来说有点陌生。)感谢任何帮助。

我想巧妙地使用 jQuery 会给出一个简单的解决方案。

问候，卡兰

Answer 1

好的，在这种情况下，我将向您展示我是如何利用多个机会做到这一点的:首先，我在 jquery 中放置一个带有空字段的 div，如下所示:

$("#add").click(function() {
    $("#classes").append($(
    "<div>" 
    +"   <select name='Student.Classes[0].Class'>"
    +"     <option value='1'>Class 1</option>"
            ....
    +"  </select>"
    +"   <select name='Student.Classes[0].Subject'>"
    +"     <option value='1'>Subject 1</option>"
            ....
    +"  </select>"
    +"  <input name='Student.Classes[0].Score' value='0'/>"
    +"</div>"
    )
);});

当单击 ID 为 #add 的内容时，此 div 将添加到类列表中。

接下来，我在提交之前捕获表单，并为每个实体(本例中为 Student.Classes)提供一个从 0 开始的索引。如下所示:

 $("form").submit(function () {
        $("div", "#classes").each(function (i) {
            $(":input, :hidden", this).each(function () {
                $(this).attr("name", $(this).attr("name").replace(/\[0\]/, "[" + i + "]"));
            });
        });
    });

如果您使用的是支持子实体的 ModelBinder，那么这应该最终出现在服务器上并带有 Student 中的类列表。当然，您可以使用 firebug 来准确查看发送到服务器的内容。

希望这能提供一些指导。