dettagli nascosti possibilità di DataTable quando viene caricato attraverso il modello MVC

Question

Ho una tabella di dipendenti che prelevo utilizzando chiamata $.load ajax inviando indietro un partialview come di seguito:

Classe Modello

public class EmployeeDetails 
{ 
    public string FirstName{get;set;} 
    public string LastName{get;set;} 
    public string AccountStatus{get; set;} 
    public string LastLogin{get;set;} 
    public string EmailAddress{get;set;} 
    public string Contact {get;set;} 
    public string Gender {get;set;} 
} 

Metodo PartialViewResult nel controller

public PartialViewResult GetEmployeeDetails() 
{ 
    List<EmployeeDetails> model=new List<EmployeeDetails>(); 
    using(var context=new ContextConnection()) 
    { 
     var employees=(from e in context.tbl_employees select e).ToList(); 
     foreach(var employee in employees) //Fill the model 
     { 
      model.add(new EmployeeDetails(){ 
       FirstName=employee.fname, 
       LastName=employee.lname, 
       AccountStatus=employee.acc_status, 
       LastLogin=employee.last_login, 
       EmailAddress=employee.email, 
       Contact=employee.contact, 
       Gender=employee.gender 
      }); 
     } 
    } 
    return PartialView("_EmployeeDetails",model) //passing model back 
} 

_EmployeeDetails Vedi

@model IEnumerable<ProjectName.Models.EmployeeDetails> 

<table id="employee" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th></th> 
       <th>Full Name</th> 
       <th>Account Status</th> 
       <th>Last Login</th> 
       <th>Email Address</th> 
      </tr> 
     </thead> 
     <tbody> 
     @foreach(var emp in Model) 
     { 
      <tr> 
       <td></td> 
       <td>@emp.FirstName + " " + @emp.LastName</td> 
       <td>@emp.AccountStatus</td> 
       <td>@emp.LastLogin</td> 
       <td>@emp.EmailAddress</td> 
      </tr> 
     } 
     </tbody> 
</table> 

Da this link sono stato in grado di raggiungere l'UI qualunque dato nel link

var table; //global variable 
$('.loadEmployee').on('click',function(){ 
    $("#loadBody").load("/Admin/GetEmployeeDetails",function(){ 
     table=$("#employee").dataTable({ 
       "columns": [ 
       { 
        "className":  'details-control', 
        "orderable":  false, 
        "data":   null, 
        "defaultContent": '' 
       }, 
       { "data": "Full Name" }, 
       { "data": "Account Status" }, 
       { "data": "Last Login" }, 
       { "data": "Email Address" } 
       ], 
       "order": [[1, 'asc']] 
     }); 
    } 
}) 

function format (d) { 
    // `d` is the original data object for the row 
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ 
     '<tr>'+ 
      '<td>Full name:</td>'+ 
      '<td>'+d["Full Name"]+'</td>'+ //this is fine 
     '</tr>'+ 
     '<tr>'+ 
      '<td>Extension number:</td>'+ 
      '<td>'+d["Contact Details"]+'</td>'+ //Need to get Contact here 
     '</tr>'+ 
     '<tr>'+ 
      '<td>Gender:</td>'+ 
      '<td>d["Gender"]</td>'+ //Need to get Gender here 
     '</tr>'+ 
    '</table>'; 
} 

// Add event listener for opening and closing details 
$('#employee tbody').on('click', 'td.details-control', function() { 
    var tr = $(this).closest('tr'); 
    var row = table.row(tr); 

    if (row.child.isShown()) { 
     // This row is already open - close it 
     row.child.hide(); 
     tr.removeClass('shown'); 
    } 
    else { 
     // Open this row 
     row.child(format(row.data())).show(); 
     tr.addClass('shown'); 
    } 
}); 

La mia domanda è:

Ho modello pieno di tutti i dati, ma come visualizzare i dati in più, che è nel modello (Contact), (di genere) in format funzione

La demo data nel link qui sopra usa .txt file da estrarre dati ma da nessuna parte viene menzionato come farlo con i dati model in base al mio scenario precedente. Il collegamento + e i collegamenti - funzionano correttamente, tranne che i valori del modello per Contact e Gender non vengono visualizzati. Uno scenario che sto pensando è aggiungere tutti questi come td s in foreach e nasconderli in modo da poter ottenere i valori della colonna come sto ottenendo ora per i dati visualizzati. Ma questo sarebbe pesante quando c'è una quantità enorme di colonne da visualizzare. Qualsiasi idea/luce su questo è molto apprezzata.

Answer 1

Un'opzione consisterebbe nell'aggiungere i valori "extra" come attributi data-* nella riga della tabella.

@foreach(var emp in Model) 
{ 
    <tr data-contact="emp.contact" data-gender="emp.Gender"> 
    .... 
    </tr> 
} 

e poi estrarli nei pulsanti cliccare evento e trasmettere quei valori alla funzione format()

$('#employee tbody').on('click', 'td.details-control', function() { 
    var tr = $(this).closest('tr'); 
    var contact = tr.data('contact'); 
    var gender = tr.data('gender'); 
    // you could also add the following as an option to using the row data 
    var fullName = tr.children('td').eq(1).text(); 
    var row = table.row(tr); 
    if (row.child.isShown()) { 
    // This row is already open - close it 
    row.child.hide(); 
    tr.removeClass('shown'); 
    } else { 
    // Open this row 
    row.child(format(row.data(), contact, gender)).show(); 
    // or row.child(format(fullName, contact, gender)).show(); 
    tr.addClass('shown'); 
    } 
}); 

e quindi modificare la funzione format() per accettare i parametri aggiuntivi

function format(d, contact, gender) {