.net - 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 加载它，但只有在以下情况下才应该这样做:

太多不同的模板要添加 - 一个示例是一个包含用户列表的页面，其中每个用户都需要一个复杂的模板，这可能会由于 DB 请求和臃肿的 HTML

而减慢速度

模板依赖于用户已经输入的其他数据，在这种情况下，我们不能在用户提供这些数据之前准备模板(尽管 .tmpl 提供了条件和循环，所以我们应该尽可能使用它们)。

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

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; }
    ...
}

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

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

Important: Instead of linking to a CDN with jQuery .tmpl() I had to copy the minimized version of it directly into HTML part in JSFiddle example, because otherwise it won't load the plugin.