動態添加現場輸入不存儲值並傳遞到控制器

Question

我正在開發產品銷售系統。我有3個字段產品名稱，數量（文本框）和產品類型下拉列表。我正在動態添加行，然後製作所有已訂購產品的清單，然後將其傳遞給控制器​​。但它失敗了。另外請注意，稍後我需要使用select2，所以我正在尋找具有唯一的字段ID。我認爲問題最重要的是如何從字段中獲取值，然後將其傳遞給模型。我的小提琴是點擊[瀏覽]對於小提琴（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"> 

@類=」 出席」 ID = 「出席」 @

Answer 1

我部分解決這個問題。現在值通過分配id和使用for循環來存儲，但是當我刪除中間的任何記錄時它有問題。我現在嘗試的另一件事是通過使用select2來添加自動完成搜索。當我從第二行添加新項目時，致電參加課程我沒有獲得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 }; 
        } 
       } 
      });