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

Question

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

Answer 1

Учитывая кнопку с идентификатором = «buttonId» и DIV, где вы хотите поместить свои новые поля в с идентификатором = «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.

link

или

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

link

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

Answer 4

Для этого есть плагин :). См. jquery-dynamic-form.