ASP.NET MVC 3动态控件 [英] ASP.NET MVC 3 dynamic controls

问题描述

我是新来的MVC，想知道我们如何能够在MVC3动态创建控件？在我的情况的情况是存在这样的情况候选人进入他的工作经验，他能根据自己有多少公司已经工作过添加多个条目。那么，用户输入信息的一套控制需要当用户说添加其他动态添加。

I'm new to MVC and wanted to know how we can create controls dynamically in MVC3? In my case the situation is there is a form where candidate enters his job experience and he can add multiple entries based on how many companies he has worked before. So the set of controls where user enters details needs to be dynamically added when user says "Add another".

我GOOGLE了一下，但自创建控件使用jQuery无法得到太多的分开。我的主要问题是如何动态呈现控件然后边提交表单得到它们的值。

I googled bit but couldn't get much apart from creating controls using jquery. My main problem is how to render controls dynamically and then get their values while submitting the form.

这将是巨大的，如果任何人都可以提出一些样品/在这个教程？

It would be great if anyone can suggest some samples/tutorials on this?

推荐答案

你显然从Asp.net的WebForms背景的，因此有一点用的WebForms比较MVC的问题。

You're obviously coming from Asp.net WebForms background hence having a bit of a problem comparing MVC with WebForms.

添加额外的HTML元素很简单，仅需在客户端上，因为它的快速，方便，不需要服务器端的状态preservation。而且，因为有（几乎）无需在服务器上加载这些。正如你可能已经发现了，Asp.net MVC的工作完全不同于Asp.net的WebForms。

Adding additional HTML elements is simply done on the client because it's fast, convenient and doesn't require server side state preservation. And because there's (almost) no need to load these on the server. As you've probably found out, Asp.net MVC works completely differently from Asp.net WebForms.

因此​​，最简单的方法是将具有模板的客户机上装载，然后添加基于该特定模板的新项目。 此的jsfiddle告诉您如何。如果你不能提供模板中的HTML，你可以随时通过Ajax加载它，但是这应该只是做每当有两种：

So the simplest way is to have template loaded on the client and then add new items based on that particular template. This JSFiddle shows you how. If you can't provide template in the HTML you can always load it via Ajax, but that should only be done whenever there's either:

1. 太多不同模板来添加 - 一个例子是与用户的列表的页面中，每个用户都需要一个复杂的模板可能由于数据库的请求和臃肿的HTML
慢下来
2. 在模板依赖于已经进入在这种情况下，我们不能prepare的模板，用户的其他数据的用户提供了在此之前的数据（尽管 .tmpl 提供了条件语句和循环，所以我们应该利用这些只要有可能）。

1. too many different templates to add - an example would be a page with a list of users where each user requires a complex template which could slow things down due to DB requests and bloated HTML
2. templates depend on other data already entered by the user in which case we can't prepare a template before user provides this data (although .tmpl provides conditionals and loops, so we should use these whenever possible).

基本上我用jQuery和它的 .tmpl（）插件来快速生成复杂的项目（通过复杂的我的意思是不是由单一的HTML元素）与正确的命名和ID等。控制名称符合Asp.net MVC是如何工作的。这些生成的磁场将很容易结合模式，这种控制器的操作方法：

Basically I've used jQuery and its .tmpl() plugin to quickly generate complex items (by complex I mean not consisting of a single HTML element) with correct naming and IDs and so on. Control names correspond to how Asp.net MVC works. These generated fields would easily model bind to this controller action method:

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

在此code（仅适用于相关的属性），用于相关的类：

Related classes used in this code (only relevant properties):

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

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

模型结合的IList＆LT; T＆GT; 的理念是这里

基本上只要你的模型绑定到的IList＆LT; T＆GT; 你有一个位（这基本上是发生当你动态地添加新的和新的控件）的需要与合适的输入形式的命名在客户端上所要解决的一个问题。你可以阅读所有与此相关的细节我博客文章以及我的解释这个问题，并提供解决方案有点类似于此。

Model binding to IList<T> is the idea here

Basically whenever you're model binding to IList<T> (which basically is happening when you're dynamically adding new and new controls) you're having a bit of a problem that needs to be solved on the client with proper input form naming. You can read all the details related to this in my blog post as well where I explain the problem and provide a solution somewhat similar to this.

重要：而不是链接到一个CDN与jQuery .tmpl（）的我只好到它的最小化版本直接复制到HTML的一部分在的jsfiddle例如，否则它不会加载该插件。

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.

这篇关于ASP.NET MVC 3动态控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！