在MVC中:使用jQuery复制视图元素，并在相关控制器中检索它们的值

本文关键字：控制器 检索 使用 MVC jQuery 复制 元素 视图 | 更新日期: 2023-09-27 18:14:49

这是我的观点:

@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) {
}

在MVC中:使用jQuery复制视图元素，并在相关控制器中检索它们的值

1-当我第一次添加一个div(包括目标元素)添加但是

你在每个已经存在的字段后面插入新的字段，看一下:$(".TargetElements:第一").clone()。 insertAfter (.TargetElements);

应该是:$(".TargetElements:第一").clone()。 insertAfter (.TargetElements:去年的);

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/

相关文章：