Question

我有一个存储过程GetAllUsers，它返回表Users中的所有列。

以下是我想要实现的DataTable示例：

我正在使用Entity Framework（数据库优先方法）。

存储过程：

ALTER PROCEDURE [dbo].[GetAllUsers]
AS
BEGIN
    SELECT * 
    FROM Users
END

控制器：

    public ActionResult Index()
    {
        // Create ViewModel/ResourcViewModel instance
        var vm = new ResourceViewModel();

        // Code to fetch data from stored procedure and display to DataTable
    }

查看型号：

public class ResourceViewModel
{
    public int UserID { set; get; }
    public string FirstName { set; get; }
    public string LastName { set; get; }
}

查看：

<table class="table" id="dataTable">
    <thead>
        <tr>
           <th class="text-center">First Name</th>
           <th class="text-center">Last Name</th>
           <th class="text-center">Actions</th>

       </tr>
   </thead>
   <tbody>
    <tr>
        <td>John</td>
        <td>Wick</td>
        <td><button class="btn btn-xs btn-primary" data-toggle="modal" data-target="#exampleModal">iew Details</button>
        </td>
    </tr>

    <tr>
        <td>Black</td>
        <td>Panther</td>
        <td><button class="btn btn-xs btn-primary" data-toggle="modal" data-target="#exampleModal">View Details</button>
        </td>
    </tr>
</tbody>
</table>

我已将用户列表显示到DataTable中。我还想知道如何将UserID绑定到我的View Details按钮。

Answer 1

你的方法似乎有些偏差。使用MVC，理想的方法是将模型返回到页面，其中包含您之后的内容

public class IndexViewModel
{
      public List<ResourceViewModel> Resources { get; set; } 
}

然后你的观点应该更像。

@model IndexViewModel
<table class="table" id="dataTable">
    <thead>
        <tr>
           <th class="text-center">First Name</th>
           <th class="text-center">Last Name</th>
           <th class="text-center">Actions</th>

       </tr>
   </thead>
   <tbody>
@foreach(var resource in Model.Resources)
{

    <tr>
        <td>@resource.FirstName</td>
        <td>@resource.LastName</td>
        <td><button class="btn btn-xs btn-primary" data-toggle="modal" data-target="#exampleModal">View Details</button>
        </td>
    </tr>

    <tr>
        <td>Black</td>
        <td>Panther</td>
        <td><button class="btn btn-xs btn-primary" data-toggle="modal" data-target="#exampleModal">View Details</button>
        </td>
    </tr>

}
</tbody>
</table>

所以你的控制器动作应该更像

public ActionResult Index()
{
    // Create ViewModel/ResourcViewModel instance
    var vm = new IndexViewModel();

    // Code to fetch data from stored procedure and display to DataTable
    vm.Resources = new List<ResourceViewModel>();

    foreach(var user in GetAllUsers())
    {

        Resources.Add(new ResourceViewModel(){
            FirstName = user .FirstName,
            LastName = user .LastName,
            UserId = user .UserId
        });
    }

    return View(vm);
}

显然这只是伪代码，您需要正确调用存储过程。但是，存储过程的替代方法是使用Repository模式，使用Query语法允许您通过lamda where子句。

Answer 2

请参阅此信息 - In table form controls以在每行或有条件地实施自定义操作按钮。

定义数据表列布局并根据需要对其进行自定义。

示例：

$('#example').DataTable( { ajax: "../php/staff.php", columns: [ { data: null, render: function ( data, type, row ) { // Combine the first and last names into a single table field return data.first_name+' '+data.last_name; } }, { data: "position" }, { data: "office" }, { data: "extn" }, { data: "start_date" }, { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }, { data: null, className: "center", defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>' } ] } );

<强>参考文献：
jquery dataTables - how to add an edit and delete option

如何使用EF数据库中的存储过程首先填充DataTable

2 个答案: