如何使用删除和添加按钮在视图中返回动态创建的值的值?

问题描述:



我有按钮,点击按钮我正在为值创建新文本框,一个用于颜色选择器(任意数量的文本框)使用JQuery,然后单击保存按钮我得到文本框值和颜色的列表,我将它存储在数据库中,这个过去工作正常,



我的模型


I have Button and on click of button I am creating new textboxes for value and one for color picker (any number of text box) Using JQuery, and then on click of save button I am getting the list of text box value and color and I storing it on database, this past is working fine,

I my model

public List SignalThresholdValueList { get; set; }
public List SignalThresholdColorList { get; set; }





视图



in view

@Html.TextBoxFor(m => m.SignalThresholdValueList, new { @name = "SignalThresholdValueList", @class = "thresoldText" })

@Html.TextBoxFor(m => m.SignalThresholdColorList, new { @type = "color", @name = "SignalThresholdColorList", @class = "inputColorPicker" })



这是jQuery


Here is the jQuery

<pre>  //Dynamically create the div
    $(document).ready(function () {
        var max_fields = 10; //maximum input boxes allowed
        var wrapper = $(".input_fields_wrap"); //Fields wrapper
        var add_button = $(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function (e) { //on add input button click
            e.preventDefault();
            if (x < max_fields) { //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div  style="margin-bottom: 15px; ">' +
                    '<input class="thresoldText" type="text" name="SignalThresholdValueList"/>' +
                    '<input style="width:10px; width:20px; margin-left:5px" type="color" name="SignalThresholdColorList">' +//color picker
                    '<img style="padding-left:5px;" class="remove_field" src="/Images/delete.ico"/>' +
                    '</div>'); //add input box
            }
        });

        $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })

        //$('input.SignalThresholdValueList').each(function () {
        //    alert($(this).val());
        //    textarray.push($(this).val());
        //});
    });





这个代码我可以创建动态文本框和颜色选项,

ans存储在数据库上,



现在我的问题在于编辑按钮单击我从文本框和颜色选择器的数据库获取值,但我想创建文本框和颜色选择器并在编辑页面中添加具有相同值的按钮,



怎么做?



我尝试了什么:





with this codeI am able to create dynamicaly textboxes and colorpickes,
ans storing on database,

now my problem is on Edit button click I am getting value from the databse for textbox and colorpicker, but I want to create the textboxes and color picker and add button in edit page with same value,

How to do this?

What I have tried:

<pre> 
<div class="sgnalContainer">
 <div style="width:50%; float:left">
     @foreach (var item in Model.SignalThresholdValueList)
      {
         <div style="padding-top:10px">
            <input type="text" value="@item" class="thresoldText" />
         </div>
                                }
    </div>
    <div style="width:50%; float:left; padding-left: 15px">
        @foreach (var item in Model.SignalThresholdColorList)
         {
            <div style="padding-top:15px;">
              <input type="color" value=@(item) class="inputColorPicker" />
            </div>
         }
   </div>
                           
 </div>





这里我得到文本框和颜色选择器,但我需要删除按钮所有广告最后一个文本框都带有添加按钮。



here I am getting textbox and color picker but i need remove button for all ad last textbox with add button.

(文档).ready(function(){
var max_fields = 10; //允许的最大输入框
var wrapper =
(document).ready(function () { var max_fields = 10; //maximum input boxes allowed var wrapper =


(。input_fields_wrap); //字段包装器
var add_button =
(".input_fields_wrap"); //Fields wrapper var add_button =


(。 add_field_button); //添加按钮ID

var x = 1; // initlal文本框计数
(".add_field_button"); //Add button ID var x = 1; //initlal text box count