如何使用EF數據庫中的存儲過程填充DataTable

Question

我有一個存儲過程GetAllUsers ，它從表Users返回所有列。

這是我要實現的DataTable的示例：

我正在使用實體框架（數據庫優先方法）。

存儲過程：

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

顯然，這只是偽代碼，您將需要正確調用存儲過程。 盡管可以使用存儲庫模式來替代存儲過程，但該存儲庫模式具有查詢語法，該語法將允許您通過lamda where子句通過。

Answer 2

請參閱此- 以表格形式的控件，以在每行或有條件地實現自定義操作按鈕。

定義“數據表”列布局並根據需要自定義它。

例：

$('#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-如何添加編輯和刪除選項