使用复选框和下拉列表的值检索数据表中的选定行并传递到控制器

Question

我的视图中有一个数据表（使用Datatables plugin）。它有一个称为多选的功能，效果很好。我可以选择多行。

我想知道如何将我选择的行发送到控制器。我正在使用 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>

在$("#btnsaveall").click(function () {} ) 上的对象“datatopost”中未获取复选框和下拉列表的值

Answer 1

这是一个简单的方法。使用jquery的serialize()方法

$.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);