Ajax发布dropdownlist的值和jquery datatable到controller的复选框

时间:2012-11-21 04:15:44

标签: jquery datatable asp.net-mvc-4

我的视图中有一个数据表,我需要在提交按钮上将值从datatable传递给controller。在文本框的情况下,它工作正常。我在从下拉列表和复选框传递值时遇到了麻烦。

我的观点旁边代码,

<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

我的行动看起来像,

[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();
   }

我在这里做错了什么?

请帮忙,

由于

1 个答案:

答案 0 :(得分:3)

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

试试这个

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

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