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

I have a very simple data entry form to implement. It looks like this:

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

alt text http://i40.tinypic.com/2a9pojq.gif

替代文字http://i40.tinypic.com/2a9pojq.gif

Obviously I have mocked out the actual requirements but the essence is similar.

显然我已经嘲笑了实际的要求，但实质是相似的。

Entering a name and clicking history should bring up a pop up pointing to the url '/student/viewhistory/{name}'
输入名称并点击历史记录会弹出一个指向网址'/ student / viewhistory / {name}'的弹出窗口
Name and age are required fields
姓名和年龄是必填字段
The sub form (in the mockup) with Class (a drop down, containing the numbers 1 -> 10) and Subject (containing A -> D, say) form a unique pair of values for which a score is required. So, selecting the Class and Subject, entering a score and clicking on Add should 'add' this record for the student. Then the user should be able to click Save (to persist the entry to the database) or be able to add further (class, subject, score) pairs to the entry.
具有Class（下拉列表，包含数字1 - > 10）和Subject（包含A - > D，例如）的子表单（在模型中）形成一个唯一的值，需要得分。因此，选择课程和主题，输入分数并单击添加应该为学生“添加”此记录。然后，用户应该能够单击“保存”（以将条目保留到数据库中），或者能够向条目添加更多（类，主题，分数）对。

Any ideas how to smartly implement this? (I am coming from a DWH field... so thinking in a stateless manner is slightly foreign to me.) Any help is appreciated.

任何想法如何巧妙地实现这一点？（我来自DWH领域......所以以无国籍的方式思考对我来说有点陌生。）任何帮助都表示赞赏。

I would imagine a smart use of jQuery would give a easy solution.

我认为聪明地使用jQuery会提供一个简单的解决方案。

Regards, Karan

此致，Karan

2 个解决方案

#1

OK, in that case I'll show you how I've done this on several opportunities: First I place a div inside the jquery with empty fields like this:

好的，在这种情况下，我会告诉你我是如何在几个机会上完成的：首先我在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>"
    )
);});

This div will added to the list of classes when something with the id #add is clicked.

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

Next I catch the form before the submit and give each entity (Student.Classes in this case) an index starting from 0. Like this:

接下来，我在提交之前捕获表单，并为每个实体（在这种情况下为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 + "]"));
            });
        });
    });

If your are using a ModelBinder that supports sub entities this should end up on the server with a list of Classes within the Student. Of course you can use firebug to see exactly what is being posted to the server.

如果您正在使用支持子实体的ModelBinder，那么最终应该在服务器上包含Student中的Classes列表。当然，您可以使用firebug来查看发布到服务器的确切内容。

Hope this gives some direction.

希望这能给出一些指导。

#2

This may be a bit overkill but you'd most probably benefit from learning about application foundations and scaffolding. I would start here http://sharparchitecture.net/ . Once you have the basic app set up you could use jquery along with the plugins like

这可能有点矫枉过正，但您最有可能从学习应用程序基础和脚手架中受益。我会从这里开始http://sharparchitecture.net/。一旦你设置了基本的应用程序，你就可以使用jquery和插件一样

jquery forms

jquery形式
jquery Validation

jquery验证

to handle the form up to the submit. There a quite a few plugins to help with popup window.

处理表单直到提交。有一些插件可以帮助弹出窗口。

How to submit an arbitrary number of sub entities (like the classes of a student in your example) is really a question of your specific server side implementation. This can be done quite elegantly with s#arp architecture but requires some tweaking of the form before submit.

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

Welcome to the stateless world of web forms! and good luck, David

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

#1