Server side processing with custom in-line buttons and Ajax.BeginForm

braden87

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?

colin

Hi @braden87 ,

I don't know about those forms, but have you considered Editor?

Cheers,

Colin

braden87

@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:...

js
{
"render": function (data, type, full, meta) {
    var logId = full.Id;
    buttonId = "button_" + full.Id;
        return 
'<form action="/FP/Log/LogModal?Id=' 
+ logId + '" data-ajax="true" 
data-ajax-failure="displayFailure" 
data-ajax-loading="#tableLoader" 
data-ajax-mode="replace" 
data-ajax-success="showModal(LogModal)" 
data-ajax-update="#LogContent" 
id="form_' + buttonId + '" method="post" 
autocomplete="off">
@Html.AntiForgeryToken()

    <button class="link-button text-info" type="submit"> 
    <span class="glyphicon glyphicon-pencil"></span>
    </button>
    </form>'
    }

},

Is there maybe a better way of doing that?

colin

If it works