jquery - Ajax 将下拉列表和复选框的值从 jquery 数据表发送到 Controller

Question

我的 View 中有一个数据表，我需要将值从数据表传递到提交按钮上的 Controller 。对于文本框，它工作正常。我在从下拉列表和复选框传递值时遇到问题。

我的 View 端代码，

<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) {
    //Add rows to the datatable as per number of items in database
    htmlstmp += "<tr>"; 
    htmlstmp += " <td>";
    htmlstmp += "<div class='divslno'><div class='tdlabel'>" + data[i].ChildId +"</div> </div>";
    htmlstmp += "</td>"; 
    htmlstmp += "<td><div class='divdeliveryitem'><select class='fordivdeliveryitemselector' id='" + data[i].ChildId + "'>";
    htmlstmp += "<option class='foodlist'>Select</option>";
    htmlstmp += "<option class='foodlist'>Menu 1</option>";
    htmlstmp += "</select></div></td>";
    htmlstmp += "<td>";     
    htmlstmp += "<div class='deliverystatusrow1'> <input type='checkbox' class='deliverystatuschb' value='false' /></div>";
    htmlstmp += "</td>";
    htmlstmp += "</tr>";
  }

  //Append "htmlstmp" to the datatable's tbody. childfoodattendancetbody is id of tbody
$('#childfoodattendancetbody').append(htmlstmp);
     var oTable = $('#example').dataTable({
     "iDisplayLength": 5,
     "bSort": false
  }); 
$("#btnsaveall").click(function () {
   var datatopost = new Object(); 
  $("#example .row_selected").each(function (i, item) {
     var chidltdid = $(item).find("td .tdlabel:eq(0)").html();
     datatopost["[" + i + "].ChildId"] = chidltdid;
     datatopost["[" + i + "].FoodMenuId"] = $(item).find("td .fordivdeliveryitemselector#"+chidltdid+" :eq(1)").html(); 
     datatopost["[" + i + "].FoodDelivery_Status"] = $(item).find("td .deliverystatuschb :eq(2)").attr("value");
   }); 
});
 $.ajax({
    url: '@Url.Action("InsertData")',
    type: 'POST',
    traditional: true,
    data: datatopost,
    dataType: "html",
    success: function (response) {
  }
 });

 });
});

 </script>

当我通过 chrome 检查元素检查时，Datapost 变量显示以下值

[0].ChildId: "1"
[0].FoodDelivery_Status: undefined
[0].FoodMenuId: undefined
[1].ChildId: "2"
[1].FoodDelivery_Status: undefined
[1].FoodMenuId: undefined

我的 Action 看起来像，

[HttpPost]
public ActionResult InsertData(List<FoodDelivery> fooddelivery)
{
    int _childid, _menu;
    bool _deliverystatus;           
    for (int i = 0; i < fooddelivery.Count; i++)
    {
        _childid = fooddelivery[i].ChildId;
        _deliverystatus = fooddelivery[i].FoodDelivery_Status;
        _menu = fooddelivery[i].FoodMenuId;
            // Code to insert to database

      }
      return View();
   }

我在这里做错了什么？

请帮忙，

谢谢

Answer 1

将 tablebody 渲染更改为 razor syndax 而不是 Jquery，并为每个控件分配一个 ID，以便更容易找到它的值。

试试这个

var selectValMenuItem = $('.fordivdeliveryitemselector#' + chidltdid + ' :selected').val();                                        

var delvstatus = $('input[id=' + chidltdid+']').attr('checked');