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

我有一个非常简单的数据输入表单来实现。它看起来像这样：在ASP.NET MVC 2中实现以下输入表单的想法

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

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

输入一个名称，然后单击历史应该弹出一个弹出指向URL“/学生/ viewhistory/{名}”
姓名和年龄是必填字段
子表（在（包含数字1 - > 10的下拉菜单）和主题（包含A - > D，例如）构成一个独特的需要评分的值对。因此，选择课程和科目，输入分数并单击添加应该为该学生添加该记录。然后，用户应该能够点击保存（将该条目保存到数据库）或者能够添加更多（类，主题，分数）对到条目。

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

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

问候，卡兰

来源

2010-04-30 kidoman

只是为了给出一点背景......我已经设置了域模型，存储库，并设置了IoC（使用Ninject 2.0）只需要让我的头部绕过此表单即可。在我继续前进并自己实施之前，我想确保我正朝着正确的方向前进。 Karan – kidoman 2010-04-30 10:19:28

+1为您的示例图像中使用的字体;） – meo 2010-04-30 10:25:35

heh :)刚刚打开mspaint快速模拟：P：P – kidoman 2010-04-30 10:27:04

确定，在这种情况下我会告诉你我是如何做到这几个机会：首先我把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的。当然，您可以使用萤火虫来准确查看发布到服务器的内容。

希望这给了一些方向。

来源

2010-04-30 10:42:14

通过连接JS字符串构建HTML ...不是我会推荐的。当然，jQuery可以拉入现有的输入并根据需要连线它们？ – 2010-05-11 22:54:02

@bmoeskau 我同意，但这不是这里的主要问题。以模型联编程序可以转换为子实体的方式依次获取所有输入设置是棘手的部分。 – 2010-05-12 06:58:00

我已将此标记为答案，因为这将我推向了正确的方向。我使用了部分请求来从服务器中提取预先构建的HTML（基于索引变量）。 – kidoman 2010-05-31 10:08:57

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

jQuery的形式
jQuery验证

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

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

欢迎来到无形状态的网络世界！和好运气，大卫

来源

2010-04-30 10:06:10

嗨，感谢您的答复。到目前为止，我有域模型，存储库等设置。然而，在这个特定页面上有一点困难。任何特定的解决方案想法都会受到欢迎。 – kidoman 2010-04-30 10:10:48

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

回答

相关问题