Datatables with asp.net mvc rendering Url.actions/html.actionlinks with route values

tomzn

Hi,

I am using datatables to render a table with server side asp.net mvc razor views. I am using the render function to display urls for "editing" rows on the table -

 render": function (data, type, row) {
                        return '<a href=\"LinkedAccountsDetails/' + data + '\">Edit</a>';

                       }

How do I use url.actions with routevalues instead of hardcoding the urls like above. I am able to get url.actions without routevalues to work but when i try and concatenate the data variable as a route value it doesn't work.

Thanks

tomzn

Ok. Managed to solve this. This is what I did :

"render": function (data, type, row) {
                            //return '<a href=\"LinkedAccountsDetails/' + data + '\">Edit</a>';
                            var myUrl = '@Url.Action("LinkedAccountsDetails", "Profile")/' + data;
                            return '<a href=\"'+myUrl+'\" class=\"btn btn-default btn-sm\">Edit</a>'; 

allan

Hi,

Thanks for posting back - great to hear you for it working.

Allan

Fitri

Hi tomzn,

I have tried your solution, but it turn out as string.

allan

@Fitri - If you show us your code or a test case perhaps we can identify the issue.

Allan

Fitri

this is my code:

{
                    "data": "Type",
                    "name": "Type",
                    "render": function (data, type, row) {
                       var myUrl = "@Url.Action(\"LoadCheckToView\", \"Checks\")/"+row.CheckId;
                        return "< a href=\"" + myUrl + "\" >"+data+"</ a>\;
                    },
                    "createdCell": function (td, cellData, rowData, row) {
                        $(td).attr("class", "checks-list__body-row-cell");
                        $(td).attr("data-automationid", "OpenLink");
                        //var myUrl = "@Url.Action(\"LoadCheckToView\", \"Checks\")/" + row.CheckId;
                        //$(td).closest("a").attr("href", "\"LoadCheckToView\"");
                    }
                }

when I hover to this link it shows "https:/abc/@Url.Action("

allan

Sounds like the @Url.Action isn't being interpreted (filled in) by the server-side. I'm afraid my .NET knowledge doesn't extend to knowing why that might be. That might be a good one to ask on StackOverflow as I think that is more .NET rather than a DataTables question.

Regards,
Allan

albaek75

Hi Fitri
I have the same problem.
Did you ever solve this?

Astroniklas

Hello guys,

I know this might come in late, but this is how it can work with MVC. Depending how you setup your routing

            $(document).ready(function() {
                var table = $('#example').DataTable({
                    "ajax": "../Content/DataTables/example.txt",
                    "columns": [
                        {
                            "className": 'details-control',
                            "orderable": false,
                            "data": null,
                            "defaultContent": ''
                        },
                        { "data": "name" },
                        { "data": "address" },
                        { "data": "email" },
                        { "data": "phone" },
                        { "defaultContent": "<button>Update</button>" }
                    ],
                    "order": [[1, 'asc']]
                });

                $('#example tbody').on('click', 'button', function () {
                    debugger;
                    var data = table.row($(this).parents('tr')).data();
                    var url = "/UpdateMember/Edit/" + data.id;

                    window.location.href = url;
                });

The key here is "defaultContent" suppose to allow you enter HTML-code for let's say a button. Then you add a jQuery function that reacts onclick event for that button. Within the function you can capture each row's data through table.row($(this).parent('tr').data(). Depending how your JSON data looks like you can then dig deeper into your model. In my example it's data.ID

Finally the onclick event can redirect in the MVC-model through the classic window.location.

Hope that helps.