通过模型 MVC 加载时数据表的隐藏详细信息选项

Question

我有 table 名员工，我使用 $.load ajax 呼叫通过发回 partialview 来获取，如下所示：

型号Class

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;}
}

控制器中的 PartialViewResult 方法

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 视图

@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>

从 this link 我能够实现 UI 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');
    }
 });

我的问题是：

I have model filled with all the data but how to display the extra data which is in the model (Contact),(Gender) in format function

上面给出的演示 link 使用 .txt 文件提取数据，但没有提到如何根据我的上述场景使用 model 数据执行此操作。 + link 和 - link 工作正常，但未显示 Contact 和 Gender 的模型值。我正在考虑的一种情况是将所有这些作为 tds 添加到 foreach 中并隐藏它们，以便我可以获得列值，因为我现在正在获取显示数据。但是当有大量的列要显示时，这会很重。任何关于此的 ideas/lights 都非常感谢。

Answer 1

一种选择是将 'extra' 值作为 data-* 属性添加到 table 行中。

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

然后在按钮单击事件中提取它们并将这些值传递给 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');
  }
});

然后更改 format() 函数以接受附加参数

function format(d, contact, gender) {

通过模型 MVC 加载时数据表的隐藏详细信息选项

Hidden details option of dataTables when loaded through model MVC

c#

jquery

asp.net-mvc

datatables

asp.net-mvc-partialview