如何从jquery-datatable中选择一行，从控制器中获取更多数据并在表下显示它们？ （mvc4）

Question

I've got a MVC4-project and I'm using the jquery/Datatables-plugin.

I've got a viewmodel with the next properties:

public IEnumerable<Invoice> Invoices { get; set; }
public IProcessResult Result { get; set; }
public Invoice Invoice { get; set; }

The datatable shows all the invoices (from model.Invoices) and under this table I show the Invoice-details of the selected invoice (and some other information like images).

Now I want to show the Invoice-details from the selected Invoice in the datatable (after clicking the invoice). Before this, I have to initialise some data (in the controller).

I've got this javascriptcode:

$(document).ready(function () {
    $('#invoicesoverview tr').click(function () {
      oTable.$("tr.row_selected").removeClass("row_selected");
      $(this).toggleClass('row_selected');
    });

    var oTable = $('#invoicesoverview').dataTable({

        "bPaginate": true,
        "iDisplayLength": 10,
        "bSort": false,
        "bFilter": false,
        "bResetDisplay": false,
        "bServerSide": false,
        "bProcessing": true

    });

    oTable.$("tr:first").trigger("click");
}

I'm a 'MVC4-starter', so I don't know what to do next. I think I have to call a ajax-call from the click-event, but I don't know how to do this.

Answer 1

How I would do it is first get the id of the row that was clicked on. here is a link that discusses that Get id of selected row in a table -HTML . then in your click function add an ajax call

$.ajax({
     url: "@(Url.Action("Details", "Controller", new { id = "----" }))/".replace("----", id),
     type: "POST",
     cache: false,
     async: true,
     success: function (result) {
          $(".DetailsDiv").html(result);
     }
 });

Create a partial view to display the details of the row that was clicked and in your controller

[HttpPost]
    public PartialViewResult Details(string id)
    {
         Model model = (populate your data);
         return PartialView("_PartialView", model);
    }

Hopefully this helps.