В MVC: копировать элементы вида по jQuery и получать их значения на соответствующем контроллере

Question

Это мой взгляд:

@model PhoneBook.Models.Number
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<script src="../../Scripts/jQuery.AddNewNumber.js" type="text/javascript"></script>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.Contact.Id)
<fieldset>
    <legend>Number</legend>
    <div class="TargetElements">
        <div class="editor-label">
            @Html.LabelFor(model => model.PhoneNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PhoneNumber)
            @Html.ValidationMessageFor(model => model.PhoneNumber)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.NumberKind)
        </div>
        <div class="editor-field">
        @Html.DropDownListFor(model => model.NumberKind.Title, NumberKinds)
        </div>
    </div>
<p>
        <input class="AddNew" value="Add New" type="button" /></p>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
}

Мне нужно, когда нажимаю кнопку «Добавить новый». Все элементы в <div class="TargetElements"> Копируются, и когда я нажимаю кнопку «Отправить», я могу достичь всех значений.

В настоящее время я использую этот скрипт:

$(document).ready(function () {
$('.AddNew').click(function () {
    $(".TargetElements:first").clone().insertAfter('.TargetElements');
});
});

, но есть две проблемы с этим: 1 - когда я добавляю первый раз один добавленный div (включая целевые элементы), но во второй раз добавляем два divи увеличиваться по возрастанию 2 - когда копируем элементы, добавляется все значение целевого элемента, но мне нужны пустые входы для добавления нового значения

Как я могу исправить скрипт?

И, наконец, я неНе знаю, как я могу получить значения всех элементов в моем контроллере:

[HttpPost]
    public ActionResult Create(Number NewNumber, FormCollection collection) {
}

Answer 1

1 - когда я добавляю первый раз один добавленный div (включая целевые элементы), но во второй раз добавляются два div и растут по возрастанию.

Вы вставляетеновое поле после каждого существующего поля, посмотрите на: $ (". TargetElements: first"). clone (). insertAfter ('. TargetElements');

Должно быть: $ (". TargetElements: first"). Clone (). insertAfter ('. TargetElements: last');

2 - при копировании всех элементовдобавлено значение целевого элемента, но мне нужны пустые входы для добавления нового значения

Никто не мешает очистить значения с помощью Javascript, просто просмотрите все входные элементы вНовый клон и очистите их значения.

function cloneTargetBox() {
    var targetBoxClone = $(".target-elements:first").clone();
    targetBoxClone.find("input").val(""); //Not sure this is the proper way, but hey, it works
    targetBoxClone.insertAfter(".target-elements:last")
}

Вот пример кода того, чего вы хотите достичь: http://jsfiddle.net/KVqW8/3/