JQuery Datatables and ASP.NET MVC Parameter to ActionResult - asp.net-mvc

Question

I'm trying to return a View with a Jquery datatable, whose action is launched from a previous page with the ActionLink--
#Html.ActionLink("View Audit", "Audit", new { id= Model.ID })
The Jquery datatable is then pre-filtered with the ID passed from the Model ID.
Here is my JS file...(incidentally, a static value e.g. 10005 works here in the fnServerParams, but I need the value to be dynamic based on whatever Model ID is chosen from theprevious screen)
var oTable = $('#myAuditTable').dataTable({
"sAjaxSource": "GetAuditLog",
"fnServerParams": function ( aoData )
{ aoData.push({ "name": "ID", "value": 10005 })
},
"aoColumns": [
....
Here is my Audit.cshtml page.
#model IEnumerable<Models.AuditLog>
<table id="myAuditTable" width="100%">
<tr>...</tr>
</table>
and in the Controller
public ActionResult GetAuditLog(int ID){
var logs = db.AuditLog.Where(c => c.ID == ID).ToList();
var result = from c in logs
select new[] { ....
};
return Json(new
{
aaData = result
}, "text/x-json", JsonRequestBehavior.AllowGet);
}
So I normally would pass a parameter in MVC like so:
public ActionResult Audit(int ID)
{
return View();
}
But since the GetAuditLog is the action getting results, how do I get the int ID to the GetAuditLog action in order to pass the filter the records, which in turn get passed as JSON. I can't call GetAuditLog in the ActionLink, because its job is to pull JSON, not render a View.
I'm not sure what I'm missing. I've gone through this guy's articles cause they are pretty comprehensive as far as integrating ASP.NET and datatables.
http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part
But cannot find an exact fit to my problem.
This post seems to come close...
How do I access the JQuery DataTables plugin aoData values in MVC3?
But doesn't quite apply since he seems to be working with a successfully passed-in parameter.
Thanks for any help.

Answer 1

Hi you can achieve this by two ways:
First create a hidden field having value from Model.Id and then assign this hidden field value to your datatable() function in like this
in view:
<input type="hidden" id="ID" value="#Model.ID" name="ID" />
and then put your below peace of code under document.ready and assign value ID from hidden field like this :
$(document).ready(function(){
var oTable = $('#myAuditTable').dataTable({
"sAjaxSource": "GetAuditLog",
"fnServerParams": function ( aoData )
{ aoData.push({ "name": "ID", "value": $("#ID").val() })
},
"aoColumns": [
....
});
Second: Put your datatable() function in your view under script tag and assign Model.Id directly like this:
<script type="text/javascript">
var oTable = $('#myAuditTable').dataTable({
"sAjaxSource": "GetAuditLog",
"fnServerParams": function ( aoData )
{ aoData.push({ "name": "ID", "value": '#Model.ID' })
},
"aoColumns": [
....
</script>
Hope this will resolve this issue.