Morning, I have been working through this problem for a while now and cannot figure what set up I have wrong with this code. The intention is to have a grid (DataTable) and allow in line editing for that data (Editor). I have the datatable getting the data from one ajax call and the editor is using another to update the record. The initial ajax is fine and populates properly but when I initiate an update the parameter I am sending is null. Here is some code:
<div>
<table id="post-table" class="table table-striped" style="width:100%">
<thead>
<tr role="row">
<th>postID</th><th></th><th></th><th></th><th></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script src="~/Content/DataTables-1.10.18/js/jquery.dataTables.js"></script>
<script src="~/Content/editor-1.9.0/js/dataTables.editor.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/DataTables-1.10.18/css/jquery.dataTables.css">
<script language="javascript" type="text/javascript">
var editor;
editor = new $.fn.dataTable.Editor(
{
ajax: {
edit: {
type: "POST",
url: "/ActivationCampaign/UpdatePostRecord",
dataType: "json",
contentType: "application/json",
data: function (data) {
var obj = data.data;
var key = Object.keys(obj)[0];
var theJson = {};
theJson["campaignVersionID"] = @ViewBag.CampaignID;
theJson["salesChannelID"] = @ViewBag.SalesChannel;
theJson["postID"] = key;
theJson['amount'] = obj[key].amount;
return JSON.stringify(theJson);
}
}
},
table: "#post-table",
idSrc: "postID",
fields: [{
label: "",
name: "amount"
}]
}),
$(document).ready(function () {
$('#post-table').DataTable({
"ajax": {
"url": "/ActivationCampaign/LowLevelBudgetsForChannel?campaignID=@ViewBag.CampaignID&SalesChannelID=@ViewBag.SalesChannel",
"type": "GET",
"datatype": "json",
"dataSrc": ''
},
"pagingType": "simple",
"columnDefs": [
{"targets": [0], "visible": false, "searchable": false, "title": "post-id"},
{"targets": [1], "title": "Post" },
{"targets": [2], "title": "Post Number"},
{"targets": [3], "title": "Allocated Amount", "className": "allocated-column editable"},
{"targets": [4], "title": "Consumed Amount"}
],
"columns": [
{ "data": "postID" },
{ "data": "postName"},
{ "data": "postNumber" },
{ "data": "amount" },
{ "data": "formatedAmount" },
],
"initComplete": function (settings, json)
{
populateConsumed();
}
});
},
$('#post-table').on('click', 'tbody td:not(:first-child)', function (e)
{
editor.inline(this);
}));//end of doc ready
function populateConsumed()
{
var totalAmount = 0;
$(".allocated-column").each(function () {
var values = $(this).text().replace(',', '');
if (values > 0)
{
totalAmount += parseFloat(values);
}
});
$('#txtchangeBudget').val(JSON.stringify(totalAmount).replace(/\B(?=(\d{3})+(?!\d))/g, ","));
}
</script>
</div>
And the actions:
[System.Web.Mvc.HttpGet]
public JsonResult LowLevelBudgetsForChannel(int campaignID, int salesChannelID)
{//TODO get defensive on the parameters
return Json(activationCampaignService.GetLowLevelBudgetsForChannel(
campaignID, salesChannelID),
JsonRequestBehavior.AllowGet
);
}
[System.Web.Http.HttpPost]
public JsonResult UpdatePostRecord([FromBody]string budgetRecord)
{
if(budgetRecord == null)
{
}
return Json("hello");
//return Json(activationCampaignService.UpdatePostRecord(budgetRecord));
}
The LowLevelBudgetsForChannel call works fine but the UpdatePostRecord always has a null value in budgetRecord. Notice the HttpPost attribute comes from a different package than the other one but I have only just changed that but I am concerned that I now have both System.Net.Http and System.Web.Http installed, does anyone know of any problems that will cause.
As I need to construct the json to send and the data getting sent represents data in more than one table I would prefer to send the string and process it in the action. Cuurently IE debugger shows that it thinks I am sending this:
{"campaignVersionID":186,"salesChannelID":45,"postID":"20","amount":"1001"}
I have landed on a legacy system here and there is a lot wrong but I don't believe this has anything to do with that and I just haven't set this up correctly. I did originally not have the content type or data types set correctly or the from body attribute but following that advice has not solved my issue. Any advice on it?
[edit] Iam currently thinking that it is related to the serialisation that happens as I have had Fiddler on it and the values are sent in the request body.
All I needed in the end was to create type that matched the structure of the javascript I was sending and it all got populated correctly. So probably was some kind of serialisation error under the hood somewhere. Does anyone have a reason why a string would fail to be bound like that?