在ASP.NET MVC 2中实现以下条目表单的想法(Ideas in implenting the following entry form in ASP.NET MVC 2)

在ASP.NET MVC 2中实现以下条目表单的想法(Ideas in implenting the following entry form in ASP.NET MVC 2)

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

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

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

输入一个名字并点击历史记录会弹出一个指向url'/ student / viewhistory / {name}'的链接 名称和年龄是必填字段 具有Class（包含数字1 - > 10的下拉列表）和Subject（包含A - > D）的子表单（在模型中）构成一个唯一需要评分的值对。 因此，选择课程和科目，输入分数并单击添加应该为该学生添加该记录。 然后，用户应该能够点击保存（将该条目保存到数据库）或者能够添加更多（类，主题，分数）对到条目。

任何想法如何巧妙地实现这一点？ （我来自DWH领域......所以以无状态的方式思考对我来说略显陌生。）任何帮助都是值得赞赏的。

我会想象一个聪明的使用jQuery会给出一个简单的解决方案。

问候，卡兰

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

alt text 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}' 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.

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.

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

Regards, Karan

最满意答案

好吧，在这种情况下，我会告诉你我是如何在几个机会上完成这项工作的：首先，我在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中的Classes列表。 当然，您可以使用萤火虫来准确查看发布到服务器的内容。

希望这给了一些方向。

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:

$("#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.

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

$("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.

Hope this gives some direction.