Rendering html content in datatable

Question

I am loading server response in a datatable using js in a asp.net core razor page. Because the data/UI is complex, I need to render different layouts based on current value in each table cell.

Datatable supports a renderer function for each cell, so I could have something like:

...
"data":"somefield",
"renderer":function(data,type,row,meta){
       if (data.someId)=="someValue"{
          return "<div... some label with somValue</div>"
       }else{
           return "<div... some label without value</div>"
       }
    }
}

This works perfectly fine, however when divs get complex with style and many labels it becomes harder to maintain or change.

I did look a bit into Razor's PartialViews as it may seem like a good alternative. Having the UI in a cshtml file, being able to pass parameters from parent @Model and using c# in it to render it based on the parameter received.

While I am able to load the partial view in the parent page, using <partial name=''/> or @Html.Partial(...) I didn't manage to get it's content in js using $.get and return it in the datatable's render function. Probably async wouldn't work in this case? Or it would be too slow?

My question is: what would be a better way to handle this situation? Maybe partial views are not the way. I am looking for a way of easily maintaining/changing the cell content. Thank you for your time.

Answer 1

I'm not really familiar with asp.net but I will try to answer your question.

I don't think PartialViews are going to work in the way you suggest because they appear to be server-side code, and trying to do a GET request for every line in your table could potentially generate a large number of server requests.

I think you have a couple of potential solutions. First is to loop through your data on the server, and for each property that matches the condition generate the partial view and assign it to the property. Then return your data array with one of the properties in each row being a chunk of HTML. As I said, I don't have experience with this language so it's hard for me to provide a code example, but I hope you understand what I'm trying to say. Then in DataTables you just need to output the value

columns: [
    { data: 'someField' }
]

THe second option is to generate the HTML on the client using JavaScript. Since you say that it could be complex it's best if you have a function that returns a HTML string. If it's a large amount of HTML then you could even put this function in a separate file and export it, to make it more manageable. There are a couple of typos in your example, so I'm going to fix them here. Renderer is a table property, the one you want is columns.render . Also in the render function the data argument references the data property that is defined in the line above. If you want to reference a different property, use the row argument.

columns: [
    {
        data: 'someField',
        render: (data, type, row) => renderMyData(data, row)
    }
]

function renderMyData(data, row) {
    if (row.someId == "someValue") {
        return "<div...> some label with somValue</div>"
    } else {
        return "<div...> some label without value</div>"
    }
}