ASP.NET MVC 3 动态控件

Question

我是 MVC 新手，想知道如何在 MVC3 中动态创建控件？就我而言，情况是有一个表格，候选人可以输入他的工作经验，他可以根据他以前工作过的公司的数量添加多个条目。因此，当用户说“添加另一个”时，需要动态添加用户输入详细信息的控件集。

我在谷歌上搜索了一下，但除了使用 jquery 创建控件之外，我没有太多收获。我的主要问题是如何动态呈现控件，然后在提交表单时获取它们的值。

如果有人能就此提出一些示例/教程，那就太好了？

Answer 1

您显然来自 Asp.net WebForms 背景，因此在比较 MVC 和 WebForms 时遇到了一些问题。

通常在客户端添加动态控件

添加额外的 HTML 元素只需在客户端完成，因为它快速、方便并且不需要服务器端状态保存。而且因为（几乎）不需要在服务器上加载这些。您可能已经发现，Asp.net MVC 的工作方式与 Asp.net WebForms 完全不同。

一个简单易懂的例子

所以最简单的方法是在客户端加载模板，然后根据该特定模板添加新项目。 This JSFiddle shows you how。如果您无法在 HTML 中提供模板，您始终可以通过 Ajax 加载它，但只有在存在以下任一情况时才应这样做：

1. 要添加的不同模板太多 - 例如一个包含用户列表的页面，其中每个用户都需要一个复杂的模板，这可能会因 DB 请求和臃肿的 HTML 而减慢速度
2. 模板依赖于用户已经输入的其他数据，在这种情况下，我们无法在用户提供这些数据之前准备模板（尽管.tmpl 提供了条件和循环，所以我们应该尽可能使用这些）。

基本上，我使用 jQuery 及其 .tmpl() 插件快速生成具有正确命名和 ID 等的复杂项目（我的意思是不包含单个 HTML 元素）。控件名称对应于 Asp.net MVC 的工作方式。这些生成的字段很容易建模绑定到这个控制器操作方法：

public ActionResult Experiences(Experience experience)
{
    // do what's appropriate
}

此代码中使用的相关类（仅相关属性）：

public class Experience
{
    [Required]
    public IList<Company> Companies { get; set; }
    ...
}

public class Company
{
    [Required]
    public string Name { get; set; }
    ...
}

模型绑定到IList<T> 是这里的想法

基本上，每当您将模型绑定到IList<T> 时（这基本上是在您动态添加新控件和新控件时发生的），您都会遇到一些需要在客户端上通过正确输入解决的问题表格命名。您可以在my blog post 中阅读与此相关的所有详细信息，以及我在其中解释问题并提供与此类似的解决方案。

重要提示：我不得不将其最小化版本直接复制到 JSFiddle 示例中的 HTML 部分，而不是使用 jQuery .tmpl() 链接到 CDN，否则它不会加载插件。