Динамические элементы управления ASP.NET MVC 3

Я новичок в MVC и хотел узнать, как мы можем динамически создавать элементы управления в MVC3? В моем случае возникает ситуация, когда кандидат входит в свой опыт работы, и он может добавлять несколько записей в зависимости от того, сколько компаний он работал раньше. Таким образом, набор элементов управления, в которые пользователь вводит детали, должен динамически добавляться, когда пользователь говорит "Добавить другое".

Я googled бит, но не мог значительно отделить создание элементов управления с помощью jquery. Моя основная проблема заключается в том, как визуализировать элементы управления динамически, а затем получать их значения при отправке формы.

Было бы здорово, если бы кто-нибудь мог предложить несколько примеров/учебников по этому поводу?

ОТВЕТЫ

Ответ 1

Очевидно, что вы из фона Asp.net WebForms, поэтому у вас есть проблема с сопоставлением MVC с WebForms.

Динамические элементы управления обычно добавляются на клиенте

Добавление дополнительных элементов HTML выполняется просто на клиенте, потому что оно быстрое, удобное и не требует сохранения состояния на стороне сервера. И поскольку там (почти) нет необходимости загружать их на сервер. Как вы, наверное, узнали, Asp.net MVC работает совершенно иначе, чем Web-формы Asp.net.

Простой для понимания пример

Таким образом, самый простой способ - создать шаблон на клиенте, а затем добавить новые элементы на основе этого конкретного шаблона. Этот JSFiddle показывает вам, как. Если вы не можете предоставить шаблон в HTML, вы всегда можете загрузить его через Ajax, но это нужно делать только там, где есть:

  • слишком много разных шаблонов для добавления - примером будет страница со списком пользователей, где каждому пользователю нужен сложный шаблон, который может замедлить работу из-за запросов БД и раздутого HTML Шаблоны
  • зависят от других данных, уже введенных пользователем, и в этом случае мы не можем подготовить шаблон до того, как пользователь предоставит эти данные (хотя .tmpl предоставляет условные обозначения и циклы, поэтому мы должны использовать их по возможности).

В основном я использовал jQuery и его плагин .tmpl() для быстрого создания сложных элементов (сложным я имею в виду не состоящий из одного элемента HTML) с правильными именами и идентификаторами и т.д. Названия контролов соответствуют тому, как работает Asp.net MVC. Эти сгенерированные поля легко моделируют привязку к этому методу действия контроллера:

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

Связанные классы, используемые в этом коде (только соответствующие свойства):

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

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

привязка модели к IList<T> - это идея здесь

В принципе, всякий раз, когда вы привязываетесь к модели IList<T> (которая в основном происходит при динамическом добавлении новых и новых элементов управления), у вас возникает небольшая проблема, которая должна быть решена на клиенте с правильным вводом именования форм. Вы можете прочитать все подробности, связанные с этим, в в моем сообщении в блоге, где я объясню проблему и предоставил решение, несколько похожее на это.

Важно. Вместо ссылки на CDN с помощью jQuery .tmpl() мне пришлось скопировать свернутую версию его непосредственно в часть HTML в примере JSFiddle, потому что в противном случае он не будет загружать плагин.