檢索數據表中選定的行與複選框和下拉列表的值，並傳遞到控制器

Question

我有一個數據表（在我看來，使用Datatables plugin）。它有一個叫做multiselect的功能，效果很好。我可以選擇多行。

我想知道如何將我選擇的行發送給controller.I使用jquery渲染表體。這是我迄今爲止所做的代碼。

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     $.get(
     '/Food/GetAllChild', 
     function (data) {    
      var htmlstmp = ""; 
      for (var i = 0; i < data.length; i = i + 1) { 
       htmlstmp += "<tr class=''>"; 
       htmlstmp += " <td>"; 
       htmlstmp += "<div class='divslno'>"; 
       htmlstmp += "<div class='tdlabel'>" + data[i].ChildId +"</div> </div>"; 
       htmlstmp += "</td>"; 
       htmlstmp += "<td>"; 
       htmlstmp += "<div class='divname'>"; 
       htmlstmp += "<div class='tdlabel'>"+ data[i].Child_Name +"</div> </div>"; 
       htmlstmp += "</td>"; 
       htmlstmp += "<td>"; 
       htmlstmp += "<div class='divdeliveryitem'>"; 
       htmlstmp += "<select class='fordivdeliveryitemselector' id='" + data[i].ChildId + "'>"; 
       htmlstmp += "<option class='foodlist'>Select</option>"; 
       htmlstmp += "<option class='foodlist'>Menu 1</option>";      
       htmlstmp += "</select>"; 
       htmlstmp += "</div>"; 
       htmlstmp += "</td>"; 
       htmlstmp += "<td>"; 
       htmlstmp += "<div class='deliverystatusrow1'>"; 
       htmlstmp += " <input type='checkbox' class='deliverystatuschb' value='false' />"; 
       htmlstmp += "</div>"; 
       htmlstmp += "</td>"; 
       htmlstmp += "<td>"; 
       htmlstmp += "<div class='divedit' id='" + data[i].ChildId + "'>EDIT </div>"; 
       htmlstmp += "</td>"; 
       htmlstmp += "<td>"; 
       htmlstmp += "<div class='selectedfoodchild' id='" + data[i].ChildId + "'>" + data[i].ChildId + "</div>"; 
       htmlstmp += "</td>"; 
       htmlstmp += "</tr>"; 
      } 
      $('#childfoodattendancetbody').append(htmlstmp); 

      var oTable = $('#example').dataTable({ 
       "iDisplayLength": 5, 
       "bSort": false 
      }); 
      $("#dt_example_fud tbody tr").click(function (e) { 
       var nTr = $(this).parents('tr')[0]; 
       if ($(this).hasClass('row_selected')) { 
        $(this).removeClass('row_selected'); 
       } 
       else { 

        $(this).addClass('row_selected'); 
       } 
      }); 
      $("#btnsaveall").click(function() { 
       var datatopost = new Object(); 

       var foodcategory = $('#foodcategory').val(); 
       var datetoday = $('#datetoday').val(); 

       if (foodcategory == "Select") { 

        alert("Please select Food Category"); 
       } 
       else { 

        $("#example .row_selected").each(function (i, item) { 

         var chidltdid = $(item).find("td .tdlabel:eq(0)").html(); 
         var newimenuid = $(item).find("td .selectedfoodchild#" + chidltdid + " :eq(5)").html(); 

         datatopost["[" + i + "].ChildId"] = $(item).find("td .tdlabel:eq(0)").html(); 
         datatopost["[" + i + "].Fooddelivery_Date"] = datetoday; 
         datatopost["[" + i + "].FoodDelivery_Type"] = foodcategory; 
         datatopost["[" + i + "].FoodMenuId"] = $(item).find("td .selectedfoodchild#"+chidltdid+" :eq(5)").html(); 
         datatopost["[" + i + "].FoodDelivery_Status"] = $(item).find("td .deliverystatuschb :eq(3)").attr("value"); 
        }); 
       }     

      }); 
      $.ajax({ 
       url: '@Url.Action("InsertData")', 
       type: 'POST', 
       traditional: true, 
       data: datatopost, 
       dataType: "html", 
       success: function (response) { 
       } 
      }); 
</script> 

沒有得到複選框，下拉列表中的值對象「datatopost」上$("#btnsaveall").click(function() {})

Answer 1

這裏有一個簡單的方法。使用序列化（）jQuery的

$.ajax({ 
      url: '@Url.Action("InsertData")', 
      type: 'POST', 
      traditional: true, 
      data: $('#form_id').serialize(),// Take a look at this 
      dataType: "html", 
      success: function (response) { 
      } 
     }); 

並在控制器

使用

echo '<pre>'; 
print_R($_POST);