ASP.NET MVC Ajax расширяемая форма с использованием jquery

Question

Мои знания jquery не очень обширны, но я пытаюсь разрешить пользователю нажимать кнопку в форме, чтобы добавить больше полей в форму для отправки в саму форму ... Что-то похожее как gmail обрабатывал вложения электронной почты, добавляя несколько полей ввода для каждого файла, у кого-нибудь есть указания, как это сделать?

Answer 1

Имеется кнопка с id = "buttonId" и div, в который вы хотите поместить свои новые поля с id = "contentDiv":

$('#buttonId').click(
   function() {
      $('<div>someinput, like textboxes ecc</div>')
         .appendTo($('#contentDiv'));
   }
);

С помощью этого синтаксиса вы можете напрямую работать с новым контентом, например:

$('#buttonId').click(
   function() {
      $('<div>someinput, like textboxes ecc</div>')
         .hide()
         .appendTo($('#contentDiv'))
         .fadeIn('fast');
   }
);

Таким образом, новый контент исчез, а не только показан.

Answer 2

Не написав весь код для вас, создайте контейнер, как div внутри вашей формы.

<div id="morefields"></div>

Сохранить глобальную переменную с количеством полей

var fieldCount = 0;

Затем добавьте к HTML этого div

fieldCount++;
var id = 'fieldname' + fieldCount;
var fields = $("#morefields").html() + "<input id='" + id + "' name = '" + id + "' />";
$("#morefields").html( fields);

пусть ваша функция контроллера примет FormCollection в качестве параметра, прочитайте поля.

Есть надежда, что кто-то опубликует. Вот как я это делал раньше. Код может не компилироваться, записываться из памяти, но вы понимаете суть.

Answer 3

Используя jQuery,

Статические данные формы

Вы можете .show () и .hide () DIV одним нажатием кнопки. Это позволит вам переключать отображение дополнительной информации DIV.

ссылка

или

Данные динамической формы Используя .load (), вы можете динамически загружать контент из файла / сервера и использовать .html () для добавления его в форму.

ссылка

Напишите, с кем вы хотите сделать, и я предоставлю больше информации, если вы хотите.

Answer 4

Для этого есть плагин :). См. jquery-динамическая форма .