在MVC：复制的jQuery视图元素和retrive在相关负责人的价值 [英] In MVC: Copy view elements by jQuery and retrive value of them at relevant controller

问题描述

这是我的看法：

  @model PhoneBook.Models.Number
@ {
ViewBag.Title =创建;
}
＆LT; H2＆GT;创建＆LT; / H＆GT;
＆LT;脚本SRC =../../脚本/ jQuery.AddNewNumber.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
@using（Html.BeginForm（））{
@ Html.ValidationSummary（真）
@ Html.HiddenFor（型号=＆GT; model.Contact.Id）
＆LT;＆字段集GT;
    ＆LT;传奇＆GT;数字与LT; /传说＆GT;
    ＆LT; D​​IV CLASS =TargetElements＆GT;
        ＆LT; D​​IV CLASS =编辑标记＆GT;
            @ Html.LabelFor（型号=＆GT; model.PhoneNumber）
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =主编场＆GT;
            @ Html.EditorFor（型号=＆GT; model.PhoneNumber）
            @ Html.ValidationMessageFor（型号=＆GT; model.PhoneNumber）
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =编辑标记＆GT;
            @ Html.LabelFor（型号=＆GT; model.NumberKind）
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =主编场＆GT;
        @ Html.DropDownListFor（型号=＆GT; model.NumberKind.Title，NumberKinds）
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆所述p为H.;
        ＆LT;输入类=的AddNewVALUE =新增TYPE =键/＆GT;＆LT; / P＆GT;
    ＆所述p为H.;
        ＆LT;输入类型=提交值=创建/＆GT;
    ＆所述; / P＆GT;
＆LT; /字段集＆GT;
}
 

我需要在preSS的新增按钮，所有的＆LT元素; DIV CLASS =TargetElements＆GT; 复制并在preSS提交按钮我能实现所有值。

在我现在使用这个脚本：

  $（文件）。就绪（函数（）{
$（'的AddNew'）。点击（函数（）{
    $（TargetElements：第一。）的clone（）insertAfter（'TargetElements。'）;。
}）;
}）;
 

，但有2问题是：
1，当我第一次添加一次一个格（包括目标元素）添加，但在第二两个时间格增加和上升发展
2 - 当添加的目标元素的所有值的元素复制，但我需要清空输入新的价值

如何解决脚本？

最后，我不知道我怎么能找回我的控制器的所有元素的值：

  [HttpPost]
    公众的ActionResult创建（数字NewNumber，收集的FormCollection）{
}
 

解决方案

  

1，当我第一次添加一次一个格（包括目标元素）添加，但
  第二两个时间格增加和上升的增长。

您每次插入后场新领域存在，一起来看看：
$（TargetElements：第一。）的clone（） insertAfter（'TargetElements。'）;

。

应该是：
$（TargetElements：第一。）的clone（） insertAfter（'TargetElements：去年'）;

  

2 - 复制时添加的目标元素的所有值的元素，但我需要清空输入新的价值

有没有人阻止你清除使用Javascript的值，只是通过在新克隆的所有投入要素，并清除它们的值。

 函数cloneTargetBox（）{
    VAR targetBoxClone = $（目标要素：第一）的clone（）;
    targetBoxClone.find（输入）VAL（）。 //不知道这是正确的方法，但是，嘿，它的工作原理
    targetBoxClone.insertAfter（目标要素：最后的）
}
 

下面是你想达到什么code样品：<​​a href=\"http://jsfiddle.net/KVqW8/3/\" rel=\"nofollow\"> http://jsfiddle.net/ KVqW8 / 3 /

This is my view:

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

I need when press the "Add New" button All the elements in <div class="TargetElements"> Copied and in when press the submit button I can achieve all values.

At now i use this script:

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

but there is 2 problem with this: 1- when I add first time one div(include target elements) added but in second time two div added and grow in ascending 2- when copy the elements all the value of target element added but I need Empty inputs to add new value

How Can I fix the Script?

And finally I don't know how can I retrieve values of all element in my controller:

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

解决方案

1- when I add first time one div(include target elements) added but in second time two div added and grow in ascending.

You insert the new field after every field that exist, take a look at: $(".TargetElements:first").clone().insertAfter('.TargetElements');

Should be: $(".TargetElements:first").clone().insertAfter('.TargetElements:last');

2- when copy the elements all the value of target element added but I need Empty inputs to add new value

There is no one that stops you from clearing the values with Javascript, just go through all the input elements in the new clone and clear their values.

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")
}

Here is a code sample of what you want to achieve: http://jsfiddle.net/KVqW8/3/

这篇关于在MVC：复制的jQuery视图元素和retrive在相关负责人的价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！