在ASP.NET MVC 2中实现以下录入表单的想法

Question

我需要实现一个非常简单的数据输入表格，如下图所示：

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

• 输入姓名并点击历史记录应该会弹出指向网址 “/student/viewhistory/{name}” 的弹窗。
• 姓名和年龄是必填字段。
• 子表单（在模型中）包含班级（下拉菜单，包含1-10个数字）和科目（包含A-D，比如说）形成唯一的值对，需要填写分数。因此，选择班级和科目，输入分数并点击添加，就可以为学生“添加”这条记录。接着，用户应该能够点击保存（将记录持久化到数据库）或者继续添加（班级、科目、分数）对到这个记录中。

有什么聪明的方法来实现这个呢？（我来自 DWH 领域...所以在无状态情况下思考有点陌生。）任何帮助都将不胜感激。

我想一个巧妙使用 jQuery 应该会提供一个简单的解决方案。

祝好， Karan

- kidoman

---

只是为了提供一些背景...我已经设置好了域模型、存储库，并设置了IoC（使用Ninject 2.0）。只是在理解这个表单方面有一点困难。在我继续进行自己的实现之前，我想确保我正在朝着正确的方向前进。卡兰 - kidoman

图片中使用的字体+1;) - meo

嘿 :) 只是打开了 mspaint 进行快速模拟 :P :P - kidoman

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，则应该在服务器上以学生内类列表的形式结束。当然，您可以使用Firebug查看提交到服务器的内容。

希望这能给您一些方向。

- David Perlman

---

用JS字符串连接构建HTML不是我推荐的做法。肯定可以使用jQuery来拉取现有输入并根据需要进行连接。 - Brian Moeskau

我同意，但这不是主要问题。将所有输入设置按顺序放置，以便模型绑定器可以转换为子实体是棘手的部分。 - David Perlman

我将此标记为答案，因为这让我朝着正确的方向前进。我使用了部分请求从服务器中提取预构建的HTML（基于索引变量）。 - kidoman

@KiD0M4N（很难打你的用户名 :)）如果您在控制器内构建HTML，则会破坏MVC范例。不过，将下拉菜单作为部分视图发送听起来像是一个有趣的想法，下次我实现类似功能时可以尝试一下。 - David Perlman

我在控制器中没有构建它...相反，我使用了部分模板视图，并通过 Model 传递索引。 - kidoman

Answer 2

这可能有点过度，但你最好学习应用程序基础和脚手架。我建议从这里开始 http://sharparchitecture.net/。 一旦你设置了基本的应用程序，你可以使用jquery以及像

• jquery forms

• jquery Validation

这样的插件来处理表单提交。 有很多插件可以帮助弹出窗口。

如何提交任意数量的子实体（例如你的例子中的学生类）实际上是关于你特定的服务器端实现的问题。这可以通过s#arp architecture非常优雅地完成，但需要在提交之前对表单进行一些调整。

欢迎来到无状态的Web表单世界！祝你好运， David

- David Perlman

---

嗨，感谢您的回复。目前我已经设置了域模型、存储库等。然而，我在这个特定页面上遇到了一些困难。欢迎提供任何解决方案的想法。 - kidoman