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

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

tomzntomzn Posts: 29Questions: 9Answers: 2

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

Replies

  • tomzntomzn Posts: 29Questions: 9Answers: 2

    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>'; 
    
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    Hi,

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

    Allan

  • FitriFitri Posts: 4Questions: 1Answers: 0

    Hi tomzn,

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

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

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

    Allan

  • FitriFitri Posts: 4Questions: 1Answers: 0
    edited October 2016

    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("

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • albaek75albaek75 Posts: 1Questions: 0Answers: 0

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

  • AstroniklasAstroniklas Posts: 2Questions: 0Answers: 0

    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.

This discussion has been closed.