Server side processing with custom in-line buttons and Ajax.BeginForm
Server side processing with custom in-line buttons and Ajax.BeginForm
I have a DataTable that I'm bringing data in via ajax like such:
<script>
$(document).ready(function () {
$(LogTable).DataTable({
serverSide: true,
ajax: {
url: "/Log/GetAllLogData",
type: "POST",
dataType: "json"
},
columns: [
{ "data": "Id", "name": "Id" },
{ "data": "SampleType", "name": "SampleType" },
{ "data": "Value", "name": "Value" },
{ "data": "Program", "name": "Program" },
{ "data": "QC", "name": "QC" },
{ "data": "Comments", "name": "Comments" },
{ "data": "DateAssigned", name: "Date Assigned" },
{ "data": "CheckedInDate", "name": "CheckedInDate" },
{ "data": "Discarded", "name": "Discarded"},
],
processing: true,
dom: "ftir",
scrollY: 600,
scroller: { displayBuffer: 50 },
order: [[0, 'desc']],
pageLength: 1000,
columnDefs: [{
targets: 'no-sort',
orderable: false
}]
});
});
</script>
Previously before using Ajax and using a smaller recordset I would have two buttons at the end of the table, one for Edit and one for Delete. The Edit button is a Ajax.BeginForm that will bring up a modal with the selected record. The delete just brings up an alert but still uses Ajax.BeginForm. Before I would format the buttons just in a separate <td>
and add the Ajax.BeginForm into the <td>
directly like so:
@if (edit)
{
<td class="no-click">
@using (Ajax.BeginForm(actionName: "LogModal", routeValues: new { id = log.Id }, htmlAttributes: null, ajaxOptions: new AjaxOptions
{
InsertionMode = insertionMode,
UpdateTargetId = LogContent,
OnSuccess = success,
OnFailure = fail,
LoadingElementId = ajax
}))
{
@Html.AntiForgeryToken()
<button class="link-button text-info" type="submit"><span class="glyphicon glyphicon-pencil"></span></button>
}
</td>
}
@if (remove)
{
<td class="no-click">
@using (Ajax.BeginForm(actionName: "RemoveLog", routeValues: new { id = log.Id }, htmlAttributes: null, ajaxOptions: new AjaxOptions
{
InsertionMode = insertionMode,
UpdateTargetId = "LogContent",
Confirm = $"Deletion of log {log.Id} is permanent. Continue?",
OnFailure = fail,
LoadingElementId = ajax
}))
{
@Html.AntiForgeryToken()
<button class="link-button text-danger" type="submit"><span class="glyphicon glyphicon-trash"></span></button>
}
</td>
}
However with the server side processing I'm not sure how to add the buttons that utilize this Ajax.BeginForm. The reason for that is the Edit has a modal pop up and when it's closed the table that the button is on will update without refreshing the entire page or redirecting.
So my question:
How can I add a custom button to my Ajax data that has the Ajax.BeginForm that will allow a modal to pop up and refresh the page once the modal closes?
This question has an accepted answers - jump to answer
Answers
Hi @braden87 ,
I don't know about those forms, but have you considered Editor?
Cheers,
Colin
@colin That would be nice and useful for my work needs but sadly I work for a university so funding is very limited.
However, I did find a less than elegant solution to my problem. Basically what was throwing me off was the html helpers for the ajax form. What I have to do was take the generated html and throw it into the
render:
...Is there maybe a better way of doing that?
If it works