Search code examples
javascriptasp.net-mvcrazordatatablestag-helpers

Anchor tag helpers rendering as plain text while loading from ajax


Inside a Datatable trying to implement server-side loading and from an AJAX call, a property is returning as text from backend api , The text values is HTML representation of anchor tag

OrderNo = $"<a asp-action=\"GetInfo\" asp-route-orderNo=\"{p.OrderNo}\" target=\"_blank\"> {p.OrderNo}</a>",

From console, i can see the text is coming as correctly from api as below

"data":[{"orderNo":"<a asp-action=\"GetInfo\" asp-route-orderNo=\"AV22728Z\" target=\"_blank\"> AV22728Z</a>","location":"Has","agent":"......................................

This is rendering as plain text only at runtime in the table column and not replacing as Anchor tag ie plain text AV22728Z is showing in column

The data table initialization is like

$('#shipments').DataTable({                
            // Ajax Filter
            ajax: {
                url: "URL_API",
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: function (d) {                        
                    return JSON.stringify(d);
                }
            },
            // Columns Setups
            columns: [
                { data: "orderNo" },
                ......
            ]
        });

Solution

  • The link seems to be rendered as a valid html but the link doesn't work because it was not processed as an anchor tag helper. You need to generate url in controller by yourself

    OrderNo = $"<a href=\"{Url.Action("GetInfo", new { orderNo = p.OrderNo})}\" target=\"_blank\"> {p.OrderNo}</a>"