我无法获取我的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)
{
}