Here's my code. The post handler in the render function does not get called. It keeps going to the GET handler when clicked. The a href tag works fine but i dont want to pass the id value in the url. So, I want to call a post and then do a redirect.
@section Scripts {
<script>
$(document).ready(function () {
$.ajax({
serverSide: true,
type: "Get",
url: "/SRes?handler=Json",
dataType: "json",
success: OnSuccess,
beforeSend: function () {
console.log('before send')
$('#loadModal').show();
},
complete: function () {
console.log('complete send')
$('#loadModal').hide();
}
});
});
function OnSuccess(response) {
console.log(response.data)
$('#myTable').DataTable(
{
"dom": '<"top"Blf>rt<"bottom"rip><"clear">',
buttons: [
'excel', 'pdf', 'print'
],
scrollY: "400",
pageLength: 25,
data: response.data,
columns: [{
className: 'details-control',
orderable: false,
data: null,
defaultContent: ''
},
{
"data": "Id",
"render": function (data, type, row, meta) {
if (type === 'display') {
/* data = '<a target="_blank" href="/details?id=' data '">' data '</a>';*/
/* data = '<asp:LinkButton ID="LinkButton1" runat="server" OnClick="Details">Test</asp:LinkButton>';*/
data = '<form asp-page-handler=”Details” method=”post”><button type=”submit” class=”btn btn-default”>Save Data</button></form>';
}
return data;
}
},
{ "data": "name" },
{ "data": "desc" },
{ "data": "address" },
{ "data": "Type" },
/* { "data": "status" }*/
],
initComplete: function (settings, json) {
$('#myTable').DataTable().columns.adjust();
$('#myTable').DataTable().fixedHeader.adjust();
},
});
$('#myTable tbody').on('click', 'td.details-control', function () {
var table = $('#myTable').DataTable();
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
row.child.hide();
tr.removeClass('shown');
}
else {
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
};
function format(rowData) {
//var div = $('<div/>')
//div.append(rowData.DOB);
//div.append(rowData.filingDate);
//div.append(rowData.type);
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'
'<tr>'
'<td>Case Filing Date:</td>'
'<td>' rowData.recDate '</td>'
'</tr>'
'<tr>'
'<td>Case Type:</td>'
'<td>' rowData.type '</td>'
'</tr>'
'<tr>'
'<td>Date of Birth:</td>'
'<td>' rowData.DOB '</td>'
'</tr>'
'</table>';
return div;
}
</script>
}
Here's my code behind. I would like to pass the value of the id to this function. I am using razor pages.
public IActionResult OnPostDetails()
{
return RedirectToPage("./cust");
}
CodePudding user response：
You need to use html code rather than tag helper in DataTable.It will not be generated to html code automatically.When using action in post form,the AntiForgeryToken will not be included in the form.So you need to add it to the forms in initComplete.Try to use the following code:
html:
<div id="AntiForgeryToken">
@Html.AntiForgeryToken()
</div>
...
js:
$('#myTable').DataTable(
{
"dom": '<"top"Blf>rt<"bottom"rip><"clear">',
buttons: [
'excel', 'pdf', 'print'
],
scrollY: "400",
pageLength: 25,
data: response.data,
columns: [{
className: 'details-control',
orderable: false,
data: null,
defaultContent: ''
},
{
"data": "Id",
"render": function (data, type, row, meta) {
if (type === 'display') {
data = '<form name="testForm" action="?handler=Details" method="post"><input name="id" hidden value="' data '" /><button type="submit" >Save Data</button></form>';
}
return data;
}
},
{ "data": "name" },
{ "data": "desc" },
{ "data": "address" },
{ "data": "Type" },
/* { "data": "status" }*/
],
initComplete: function (settings, json) {
$("form[name='testForm']").each(function (index) {
$("form[name='testForm']")[index].innerHTML = $("form[name='testForm']")[index].innerHTML document.getElementById("AntiForgeryToken").innerHTML;
})
$('#myTable').DataTable().columns.adjust();
$('#myTable').DataTable().fixedHeader.adjust();
},
});
OnPostDetails:
public IActionResult OnPostDetails(int id)
{
return RedirectToPage("./cust");
}