javascript - 动态添加字段输入不存储值并传递给 Controller

Question

我正在开发产品销售系统。我有 3 个字段产品名称、数量(文本框)和产品类型下拉列表。我动态添加行，然后列出所有订购的产品，然后将其传递给 Controller ​​。但它正在失败。另请注意，稍后我需要使用 select2，因此我希望字段具有唯一的 id。我认为问题主要在于如何从字段中获取值然后将其传递给模型。我的 fiddle 是单击[此处] fiddle (https://jsfiddle.net/Yogida/x19p3pqp/“)

   $("#btnSubmit").click(function(e) {
e.preventDefault();
var _this = $(this);
var url = _this.closest("form").attr("action");

var rows = [];
var items = $(".itemRow");

alert(items);
$.each(items, function(i, item) {

  // alert(i);
  // alert(item);
  // alert(items);
  var partnumber = $(item).find("input[id='PartNumber" + i + "[]']").val();

  var partquantity = $(item).find("input[id='PartQuantity" + i + "[]']").val();

  var partordertypeid = $(item).find("select[id='PartOrderTypeId" + i + "[]']").val();

  var row = {
    PartNumber: partnumber,
    Quantity: partquantity,
    OrderTypeId: partordertypeid
  };
  rows.push(row);
});

//Let's post to server
$.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(rows),
    contentType: "application/json",

    success: function() {

      window.setTimeout(function() {
        location.reload()
      }, 3000)
    }

  })
  //.done(function (result) {
  //    //do something with the result
  //    // window.alert(rows);

//})

});

cshtml:

 <div id="items">

@class="attend"id="attend"@

Answer 1

我部分解决了这个问题。现在值是通过分配 id 和使用 for 循环来存储的，但是当我删除中间的任何记录时，它会出现问题。我现在尝试的另一件事是使用 select2 添加自动完成搜索。当我添加新项目时，无法调用参加类(class)，因此从第二行开始我没有获得 select2 的搜索功能。任何有关剩余位的帮助将不胜感激。我的 JavaScript 看起来像

var max_fields = 10; //maximum input boxes allowed
        var wrapper = $(".itemRow"); //Fields wrapper
        var add_button = $('.add_row');  // (".add_row")//$(".addRow"); //Add button ID
        var indexNo = 2;

        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><input type="text" name="mytext[]" id="attendee"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
                //$(wrapper).append('<div><input type="text" class="formfield" name="PartNumber[]" /><input type="text" class="formfield" name="PartQuantity[]" /><input type="text" class="formfield" name="PartOrderTypeId[]"><a href="#" class="remove_field">Remove</a></div>'); //.appendTo($formfield); //add input box 
                $(wrapper).append('<div id="itemRow' + indexNo + '"><input type="text" class="formfield attend" name="PartNumber' + indexNo + '[]" id="partnumberid' + indexNo + '[]" /><input type="text" class="formfield" name="PartQuantity' + indexNo + '[]" id="partquantityid' + indexNo + '[]" /><input type="text" id="partordertypeid' + indexNo + '[]" class="formfield" name="PartOrderTypeId' + indexNo + '[]"><a href="#" class="remove_field" name="Delete' + indexNo + '">Remove</a></div>'); //.appendTo($formfield); //add input box 
                indexNo++;
            }



        });

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

        $("#deleteRow").on('click', function () {
            //var template = $("#items").find(".itemRow").last().remove();
            //var template = $("#items").find(".itemRow").
            $('.formfield:checkbox:checked').parents(".itemRow").remove();
            // $('.itemRow').remove(template);

        });

        $("#btnSubmit").click(function (e) {
            e.preventDefault();
            var _this = $(this);
            var url = _this.closest("form").attr("action");

            var rows = [];
            var items = $(".itemRow");

            alert(items);
            var counter = 1;
            //$.each(items, function (i, item) {
            //for (i = 0; i < 3; i++)
            for (i = 0; i < indexNo; i++)
                {
                //var partnumber = $(item).find("input[id='partnumberid[]']").val();
                //alert(i);
               // alert(item);
                alert(items);
                var partnumber = $(items).find("input[name='PartNumber" + counter + "[]']").val();
                //var partnumber = $(items).find("input[name='PartNumber[]']").val();
                //var partnumber = $(item).find("input[name='PartNumber" + i + "[]']").val();
                //var partnumber = $(item).find("input[name='PartNumber']").select2("data");   //newRow.find('.attend').select2('data', null)
                alert(i);

                var partquantity = $(items).find("input[name='PartQuantity" + counter + "[]']").val();
                //var partquantity = $(item).find("input[name='PartQuantity" + i +"[]']").val();
                //var partordertypeid = $(item).find("input[name='PartOrderTypeId']").val();

                var partordertypeid = $(items).find("input[name='PartOrderTypeId" + counter + "[]']").val();
                //var partordertypeid = $(item).find("select[id='PartOrderTypeId[]']").val();
                //var partordertypeid = $(item).find("select[name='PartOrderTypeId" + i + "[]']").val();

                var row = { PartNumber: partnumber, Quantity: partquantity, OrderTypeId: partordertypeid };
                rows.push(row);
                counter++;
                }
            //});

            //Let's post to server
            $.ajax({
                type: "POST",
                url: url,
                data: JSON.stringify(rows),
                contentType: "application/json",

                success: function () {
                    //$("#part_message").html("<p> Your article was successfully added!</p>");
                    window.setTimeout(function () { location.reload() }, 3000)
                }

            })
            //.done(function (result) {
            //    //do something with the result
            //    // window.alert(rows);

            //})

        });




    });

    $(document).ready(function () {

        $('.attend').select2(
            {
                //Does the user have to enter any data before sending the ajax request
                minimumInputLength: 1,
                allowClear: true,
                ajax: {
                    //How long the user has to pause their typing before sending the next request

                    //The url of the json service
                    url: "/Order/TypeHead",
                    dataType: 'json',
                    //Our search term and what page we are on
                    data: function (term) {
                        return {
                            searchTerm: term
                        };
                    },
                    results: function (data, page) {
                        return { results: data };
                    }
                }
            });