Ok, so I was not able to find any posts with people trying to do this.
I have a MVC4 razor view that contains a jQuery DataTable with a list of provider data. In the 1st column, I added 3 buttons: info / edit / delete, which open a partial view in a hidden div to the right of the table. I can do foreach to scroll the model and write table rows with Ajax Actionlinks and data columns for each element; it all works great.
My problem arose when I decided to use server-side processing with DataTables, because the list contained thousands of rows, and the initial loading of the page was very slow. My server-side processing is working fine, but I don't know how to go about returning Ajax ActionLinks to the 1st column.
For reference, I followed in this article to get server-side processing configured with filtering, sorting, and paging, and it all works just fine.
I used mRender to add buttons to anchor tags, but they do not work. In the view, I see that my Ajax request returns 404. The implemented links and when I hover the URL on them, it looks good, but a glimpse tells me:
Ajax GET 404 - Not Found - http:
Here is my HTML and the code that initializes the DataTable:
<div id="ListContent"> <table id="VendorList"> <thead> <tr> <th></th> <th>Vendor Name</th> <th>Vendor District</th> </tr> </thead> <tbody> @* DataTables renders the data here *@ </tbody> </table> </div> <div id="DetailContentWrapper" class="collapsed"> <div class="closeLink"></div> <div id="DetailContent"> @* info/edit/delete partial views should load here *@ </div> </div> <script> $(document).ready(function () { $('#VendorList').dataTable({ "bServerSide": true, "sAjaxSource": '@Url.Action("AjaxHandler")', "bProcessing": true, "bJQueryUI": true, "bAutoWidth": false, "sPaginationType": "full_numbers", "aoColumns": [ { "mData": "VendorId", "bSearchable": false, "sWidth": "90px", "mRender": function( data, type, full) { return '<a class="detailsButton" title="Details" href="/Vendor/Details/' + data + '" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a> ' + '<a class="editButton" title="Edit" href="/Vendor/Edit/' + data + '" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a> ' + '<a class="deleteButton" title="Delete" href="/Vendor/Delete/' + data + '" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a> '; } }, { "mData": "VendorName" }, { "mData": "VendorDistrict" } ] }); }); </script>
The Ajax ActionLink I'm trying to play is as follows:
@Ajax.ActionLink(" ", "Details", new { id = item.VendorId }, new AjaxOptions() { UpdateTargetId = "DetailContent", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", LoadingElementId = "progress", OnBegin = "ExpandRightColumn" }, new { @class = "detailsButton", title="Details" })
Derived HTML from the above ActionLink:
<a class="detailsButton" title="Details" href="/VendorMap/Details/1" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a>
therefore, this is exactly what I use in mRender, but although the resulting HTML code is identical, the non-ajax link in mRender is not MVC related and therefore throws 404.
I even tried going to mRender:
return '@@Ajax.ActionLink(" ", "Details", new { id = ' + data + ' }, new AjaxOptions() { UpdateTargetId = "DetailContent", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", LoadingElementId = "progress", OnBegin = "ExpandRightColumn" }, new { @@class = "detailsButton", title="Details" })';
but, as expected, he simply displayed this snippet as text in the first column.
Basically, I need to somehow bind the anchor tag so that it acts like an Ajax Actionlink. Sorry if I was not clean, let me know if there is any additional information that I can provide.
I made some progress, but got stuck again. I'm sure it is not possible to create an Ajax Actionlink using jQuery, but I can call the action method and display the resulting partial view. I updated the mRender value for:
"mRender": function( data, type, full) { return '<a class="detailsButton" title="Details" id="details' + data + '" onClick="showDetails(' + data + ');"> </a>' + '<a class="editButton" title="Edit" id="edit' + data + '" onClick="showEdit(' + data + ');"> </a>' + '<a class="deleteButton" title="Delete" id="delete' + data + '" onClick="showDelete(' + data + ');"> </a>'; }
Then I implemented the following functions:
function showDetails(id) { ExpandRightColumn() $.get('@@Url.Action("Details", "Vendor", new { id = "' + id + '"} )', function (data) { $('#DetailContent').html(data); }); } function showEdit(id) { ExpandRightColumn() $.get('@@Url.Action("Edit", "Vendor", new { id = "' + id + '"} )', function (data) { $('#DetailContent').html(data); }); } function showDelete(id) { ExpandRightColumn() $.get('@@Url.Action("Delete", "Vendor", new { id = "' + id + '"} )', function (data) { $('#DetailContent').html(data); }); }
ExpandRightColumn () simply displays a DetailContent div where the resulting partial view should be rendered. $ .get (Url.Action should go to the Vendor controller, call the Details / Edit / Delete action method and return the partial view represented as html, then it should be inserted into the DetailContent div. Here is the source .
I checked Url.Action and returned the correct urls. When I look at the URLs, I get the correct partial view. However, when I try to make $ .get on this url, the server returns 404. Any ideas?