Inject content to or produce 'generated content for a column' for Ajax-sourced data.

myildiz

Hi,

1. I have different tables on different pages of an asp net mvc project. Each table has its own action buttons as the last column's data, produced with view engine and unobtrusive-Ajax helper. That works pretty well.
   
   

2. To reduce code amount, I've used html5 data attributes for each table and produced a single JS code in one file to initialize all DataTables when the containing page is loaded. And implemented the DataTable as Ajax-soruced according to a request-URL of HTML table's data attribute.

   <script>
           var dtList = Array.prototype.slice.call($('table'));
                       dtList.forEach(function (el, index) {
                           var dt = 'dt' + index,
                               dtType = $(el).data('dttype'),
                               dtAjaxUrl = $(el).data('request-url'),
                               grouping = $(el).data('datasrc') !== null && $(el).data('datasrc') !== undefined ? true : false,
                               grEnding = $(el).data('endrendering'),
                               grCol = $(el).data('datasrc'),
                               grEndCol = $(el).data('datasrc'),
                               grCtx = grouping ? grEnding ? { "endRender": function (rows, group) { return grEnder(rows, group, dt, dtType); }, "dataSrc": grCol } : { "dataSrc": grCol } : null,
                               $dt = $(el).DataTable({
                                   "bProcessing": true,
                                   "bDeferRender": true,
                                   "sAjaxSource": dtAjaxUrl,
                                   "columnDefs": [{
                                       "targets": -1,
                                       "data": null,
                                       "defaultContent": '<button class="btn btn-sm btn-primary" onclick="">Edit</button><button class="btn btn-sm btn-danger" onclick="">Remove</button>'
                                   }],
                                   dom: "lBfrtip",
                                   rowGroup: grCtx,
                                   "bAutoWidth": true,
                                   language: // not included for brevity
                                   buttons: // not included for brevity
                               });
   </script>
   

3. The question is, after I've changed my code to get table data from Ajax calls instead of implementing it manually in the view part, I've lost flexibility to design each table's last column's data according to actions related. Is there any option or way to include manually produced content (buttons) as the last column data after Ajax result. I've used 'generated content for a column' in my example, but what I esp. ask for is to inject an unobtrusive-Ajax form content, which is produced within a view, to DataTable's each row's last column, or any better approach.

I am new to DataTables and generally new to web design concepts. Apologies for any mistakes. Thanks...

colin

Hi @myildiz ,

Yep, you can use columns.render to modify a column's contents - that should do the trick for you,

Cheers,

Colin

myildiz

Hi Colin,

I've just seen your answer, thank you so much indeed. It's very helpful. And, just an opinion : This way, I have to write more code in the script file to produce the content. It may not seem elegant to have many HTML form tags in the script file. And it would be hard for me to bring together common parts of form tags in one function like i did for tables.

So, is it better to continue this way or to separate DataTable scripts from unobtrusive-ajax HTML form tags by keeping form tags in the view part ? What do you suggest?

Thanks!

allan

If you are submitting with Ajax, you don't really need form tags at all. Can you show me your Ajax submit code?

Thanks,
Allan

myildiz

Hi Allan,

Here is an example:

<table>
  <thead>
    <tr>
    // ...
       <th>Actions</th>
    </tr>
  </thead>
<tbody>
foreach(var item in Model)
{
   var dropped = item.Dispatch.FirstOrDefault(x=> x.OrderId == item.Id).Date != null ? true : false;
<tr>
//.,.. other <td>s 
<td>
if (!dropped)
@using (Ajax.BeginForm("Drop",
  routeValues: new { controller = "Dispatch", action = "Drop" },
  ajaxOptions: new AjaxOptions
    {
       HttpMethod = "Post",
       InsertionMode = InsertionMode.Replace,
       UpdateTargetId = "UpdateTable"
     }, htmlAttributes: new { @class = "form-horizontal" }))
     {
        <div class="form-group">
             <div class="col-md-9 col-sm-9 col-xs-12">
                  @Html.Hidden("OrderId", item.Id)
              </div>
              <div class="col-sm-3 col-md-3 col-xs-12">
                   <button class="btn btn-dark">Drop Order</button>
              </div>
        </div>
     }
else
{
@using (Ajax.BeginForm("GetPayment",
  routeValues: new { controller = "Payment", action = "GetPayment" },
  ajaxOptions: new AjaxOptions
    {
       HttpMethod = "Post",
       InsertionMode = InsertionMode.Replace,
       UpdateTargetId = "UpdateTable"
     }, htmlAttributes: new { @class = "form-horizontal" }))
     {
        <div class="form-group">
             <div class="col-md-9 col-sm-9 col-xs-12">
                  @Html.Hidden("OrderId", item.Id)
                  @Html.Hidden("DispatchId", item.Dispatch.Id)
              </div>
              <div class="col-sm-3 col-md-3 col-xs-12">
                   <button class="btn btn-dark">Get Payment</button>
              </div>
        </div>
}
</td>
</tr>
</tbody>
}

script for initializing DataTables is included in the question

You see, i sometimes have different variables returned from controller and different forms. Cell content change according to the returned result. And it is not easy for me to access those variables/forms within a separate script file.

Also, every table has different ajax form variables to send. sometimes variables are not included within DataTable's row data but produced from the model returned to view by controller.

allan

I'm afraid we are heading beyond my knowledge of .NET partial views here. That said, the structure of what you have appears to look okay to me. If it is working, I'd go with that .

Allan

myildiz

Well, I will implement separate scripts for each table and avoid server-side part of DataTables unless the result set is lots of pages. And when i use server-side, i will use
columns.render as Colin mentioned.

Thank you, Colin and Allan.

braden87

@myildiz I know this is a year old post but I"m trying to show buttons on my table much like yours, how it has two buttons that do Edit and Remove actions via Ajax.BeginForm. Would you be able to share your code on how you created the buttons and how it works with the Ajax.BeginForm blocks?