从数据表ASP.NET 5 MVC 6向控制器发送JSON的AJAX帖子

时间:2016-04-11 10:24:56

标签: javascript jquery json ajax datatables

我无法获取我的ajax调用以将JSON数据传递给我的控制器。我的应用程序使用ASP.NET 5和MVC 6,在这种情况下我使用的是数据表JQuery网格。通过在我的视图中使用复选框,我尝试选择多行数据,然后让用户通过单击一次按钮批准所有选定的行。

我注意到我使用javascript获取了正确的选定行,但是当我在AJAX传递之前选择两行时,数据如下所示。

Selected rows: 2
,1109,tester,3/9/2016,QOL,International Flights,Test email,484.00,Submitted,<a href="/Expenses/Review/1109">Review</a>
   [
      0: "",
      1: "1109",
      2: ""tester",",
      3: "3/9/2016",
      4: "QOL",
      5: "International Flights",
      6: "Test email",
      7: "484.00",
      8: "Submitted",
      9: "<a href="/Expenses/Review/1109">Review</a>",
      length: 10
   ]

,1111,tester,4/13/2016,QOL,Visa Stipend - Visas,total cost test 2,48.00,Submitted,<a href="/Expenses/Review/1111">Review</a>
   [
      0: "",
      1: "1111",
      2: "tester",
      3: "4/13/2016",
      4: "QOL",
      5: "Visa Stipend - Visas",
      6: "total cost test 2",
      7: "48.00",
      8: "Submitted",
      9: "<a href="/Expenses/Review/1111">Review</a>",
      length: 10
   ]

我注意到我正在调用我的控制器动作方法,但它传入一个空值不确定是什么问题,因为我正在使用stringify,并将[FromBody]放在控制器中。我在想它可能是一个数据格式问题,或者我的视图数据与我的viewmodel不匹配。以下是我的代码。

查看

@model IEnumerable<Expense>

<table class="display nowrap" id="ExpenseTable">
    <thead>
        <tr>
            <th></th>
            <th>
            @Html.DisplayNameFor(model => model.ExpenseId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ApplicationUserid)
            </th>

            <th>
                @Html.DisplayNameFor(model => model.ExpenseDate)
            </th>

            <th>
                @Html.DisplayNameFor(model => model.ExpenseTypeId)
            </th>

            <th>
                @Html.DisplayNameFor(model => model.ExpenseCodeId)
            </th>

            <th>
                @Html.DisplayNameFor(model => model.Description)
            </th>

            <th>
                @Html.DisplayNameFor(model => model.TotalCost)
            </th>

            <th>
                @Html.DisplayNameFor(model => model.Status)
            </th>
            <th></th>
        </tr>
        </thead>
    <tbody>
        @foreach (var item in (IEnumerable<Expense>)ViewData["Expenses"])
        { 
            <tr>
                <td></td>
                <td>
                @Html.DisplayFor(modelItem => item.ExpenseId)
                </td>
                <td>                   
                   @Html.DisplayFor(modelItem => item.User.FullName)
                </td>

                <td>
                    @Html.DisplayFor(modelItem => item.ExpenseDate)
                </td>

                <td>
                    @Html.DisplayFor(modelItem => item.ExpenseType.ExpenseTypeName)
                </td>

                <td>
                    @Html.DisplayFor(modelItem => item.ExpenseCode.ExpenseCodeName)
                </td>

                <td>
                    @Html.DisplayFor(modelItem => item.Description)
                </td>

                <td>
                    @Html.DisplayFor(modelItem => item.TotalCost)
                </td>

                <td>
                    @Html.DisplayFor(modelItem => item.Status)
                </td>
                <td>
                    <a asp-action="Review" asp-route-id="@item.ExpenseId">Review</a>
                </td>
            </tr>
        }
    </tbody>
</table>
@section Scripts {

Datatables.net jquery脚本使用按钮从网格中获取选定的数据行。这也使用第一列中的复选框,网格作为数据的一部分提交为null。这部分似乎有效         

        $(document).ready(function() {

            var table = $('#ExpenseTable').DataTable({
                dom: 'Bfrtip',
                columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0
                },
                {
                    targets: [ 1 ],
                    visible: false,
                    searchable: false
                }],
                select: {
                    style: 'multiple',
                    selector: 'td:first-child'
                },

                order: [[1, 'asc']],

                buttons: [
                           {
                               extend: 'selected',
                               text: 'Approve All Selected Expenses',
                               action: function (e, dt, button, config)
                               {
                                   console.log("Selected rows: " + dt.rows({ selected: true }).data().length);
                                   var data = $.map(dt.rows({ selected: true }).data(), function (item)
                                   {
                                       console.log(item)
                                       return item;
                                   });
                                   //console.log(data);
                                   addData(data);
                               }
                           }
                ]            
             } );
        } );

    </script>

ajax post方法          

        function addData(data) {
            /*POST*/
            $.ajax({
                url: '/Expenses/ApproveMany',
                dataType: "json",
                type: "POST",
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify( data ),
                cache: false,                
                success: function (result) {
                    alert(result);
                },
                error: function (xhr) {
                    alert('error');
                }
            })
        }

viewmodel

public class ApproveVm
        public string check {get;set;}

        public int ExpenseId { get; set; }

        [Display(Name = "Requester")]
        public virtual string ApplicationUserid { get; set; }

        [DisplayFormat(DataFormatString = "{0:d}",
            ApplyFormatInEditMode = true)]
        [Display(Name = "Expense Date")]
        public DateTime ExpenseDate { get; set; }
        [Display(Name = "Expense Type")]
        public int? ExpenseTypeId { get; set; }

        [Display(Name = "Expense Code")]
        public int? ExpenseCodeId { get; set; }
        public string Description { get; set; }

        [DatabaseGenerated(DatabaseGeneratedOption.Computed)]
        [Display(Name = "Total Cost")]
        public decimal TotalCost { get; set; }

        public string Status { get; set; }
        public string Review { get; set; }

}

控制器

  [HttpPost]


    public IActionResult ApproveMany([FromBody] IEnumerable<ApproveVm> model)
    {
    }

0 个答案:

没有答案