在 MVC 中使用 SQL DataTables 到 JSON 的简单方法

用户 4835047

4.72/5 (10投票s)

2013 年 12 月 5 日

CPOL

2分钟阅读

69125

1253

一种将 DataTables 序列化为 JSON 并将数据推送到 MVC 浏览器中的简单方法

下载 MVC 应用程序 - 850.8 KB

引言

在每个程序员的职业生涯中，都会遇到需要显示表格数据的时候。我们都非常熟悉 DataTables、SQL 查询和存储过程的使用。MVC 是一个很棒的框架，但它与 Entity Framework 和 LINQ 的使用紧密结合，至少就我目前读过的每一本书或文章而言是这样的。但是，在某些情况下，有人可能希望使用 DataTables 将数据推送到浏览器。

有一种非常简单的方法可以做到这一点，我希望有人会觉得这里描述的方法有用。

Using the Code

让我们从数据访问层开始。在这个示例中，它位于 ViewModels 中以节省空间。通常情况下，它应该在一个单独的文件或一组文件中，但这只是一个示例。

它有两个方法

GetDataTable - 生成一个带有示例数据的存根 DataTable。在实际应用场景中，您当然会有一个带有存储过程的 SQL 服务器。
GetTableRows - 一个辅助方法，它会将任何 DataTable 转换为一个 Dictionary 对象列表，其中 Key 对应于 DataTable 列的名称。此方法在本示例的 ViewModel 中，只是为了节省空间。像这样的方法通常属于 Helper 库。

using System;
using System.Data;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace MvcApplication31.ViewModels
{
    public class DataAccessLayer
    {
        public DataTable GetTable()
        {
            DataTable dtTable = new DataTable();
            dtTable.Columns.Add("UserID", typeof(int));
            dtTable.Columns.Add("FirstName", typeof(string));
            dtTable.Columns.Add("LastName", typeof(string));
 
            dtTable.Rows.Add(25, "Ave", "Maria");
            dtTable.Rows.Add(50, "Bill", "Doe");
            dtTable.Rows.Add(75, "John", "Gates");
            dtTable.Rows.Add(99, "Julia", "Griffith");
            dtTable.Rows.Add(100, "Mylie", "Spears");
            return dtTable;
        }
 
        public List<Dictionary<string, object>> GetTableRows(DataTable dtData)
        {
            List<Dictionary<string, object>> 
            lstRows = new List<Dictionary<string, object>>();
            Dictionary<string, object> dictRow = null;
 
            foreach (DataRow dr in dtData.Rows)
            {
                dictRow = new Dictionary<string, object>();
                foreach (DataColumn col in dtData.Columns)
                {
                    dictRow.Add(col.ColumnName, dr[col]);
                }
                lstRows.Add(dictRow);
            }
            return lstRows;
        }
    }
}

接下来，让我们看看将 DataTable 推送到浏览器的控制器。它是 GetJsonPersons 方法。它初始化 DataAccessLayer 并获取硬编码在 DataAccessLayer 中的 DataTable。下一步是将 DataTable dtPersons 传递给辅助方法 GetTableRows，并将结果 Dictionary 列表存储在 lstPersons 中。最后，lstPersons 被传递给方法 Controller.Json，该方法将序列化 lstPersons 并将其返回给浏览器。

using System; 
using System.Collections.Generic; 
using System.Data; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
 
namespace MvcApplication31.Controllers 
{
    public class CPArticle1Controller : Controller
    {
        // GET: /CPArticle1/  
        public ActionResult Index()
        { 
            return View(); 
        }
 
        public JsonResult GetJsonPersons() 
        { 
            ViewModels.DataAccessLayer oDAL = new ViewModels.DataAccessLayer(); 
            DataTable dtPersons = oDAL.GetTable(); 
            List<Dictionary<string, object>> lstPersons = oDAL.GetTableRows(dtPersons); 
            return Json(lstPersons, JsonRequestBehavior.AllowGet); 
        }
    }
}

可以通过 URL 访问控制器 GetJsonPersons：/CPArticle1/GetJsonPersons，它将生成以下输出

[{"UserID":25,"FirstName":"Ave","LastName":"Maria"},
  {"UserID":50,"FirstName":"Bill","LastName":"Doe"},
  {"UserID":75,"FirstName":"John","LastName":"Gates"},
  {"UserID":99,"FirstName":"Julia","LastName":"Griffith"},
  {"UserID":100,"FirstName":"Mylie","LastName":"Spears"}]

最后是 View，它将获取 JSON 数据并显示它。它使用 jQuery 对控制器 GetJsonPersons 进行 Ajax 调用，在单击按钮 btnGetPersons 时，在 JavaScript 函数 getPersons 中进行。Json 数据存储在变量 dtPersons 中，并传递给函数 displayJSONData。可以通过简单地引用 dtPersons 来访问各个数据项。例如：dtPersons[2].LastName。

@{ Layout = null; }

<!DOCTYPE html>

<html>
<head>
<title>CPArticle1</title>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 
          type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(initPage);

    function initPage() {
        $('#btnGetPersons').click(getPersons);
    }

    function getPersons() {
        try {
            $.getJSON("/CPArticle1/GetJsonPersons", null, function (data) {
                try {
                    var dtPersons = eval(data);
                    displayJSONData(dtPersons);
                }
                catch (ex1) {
                    alert(ex1); // you can of course use a better way of displaying errors
                }
            });
        }
        catch (ex) {
            alert(ex);  // you can of course use a better way of displaying errors
        }
    }

    function displayJSONData(dtPersons) {
        var strColumnData1 = "";
        var strColumnData2 = "";
        var strColumnData3 = "";

        for (i = 0; i < 10; i++) {
            var divRow = document.getElementById("divRow_"+i);

            if (i < dtPersons.length) {
                strColumnData1 = dtPersons[i].UserID;       
                strColumnData2 = dtPersons[i].FirstName;
                strColumnData3 = dtPersons[i].LastName;
            }
            else {
                strColumnData1 = "";
                strColumnData2 = "";
                strColumnData3 = "";
            }
            divRow.appendChild(getColumnDiv(i, 0, strColumnData1));
            divRow.appendChild(getColumnDiv(i, 1, strColumnData2));
            divRow.appendChild(getColumnDiv(i, 2, strColumnData3));
        }
    }

    //i is row number j is column number
    function getColumnDiv(i, j, jString) {
        var divCol = document.createElement('div');
        divCol.id = "divCol_" + j + "_" + i;

        divCol.innerHTML = jString;

        divCol.style.position = "absolute";
        divCol.style.left = eval(j * 100) + "px";
        return divCol;
    }

</script>

<style type="text/css">
    #btnGetPersons
    {
        position:absolute; left:20px;top:320px;
    }

    div[id^="divRow_"] 
    {
        position:absolute; left:20px; width:300px; height:25px; overflow:hidden;
        border:1px solid green;
    }
    
    #divRow_0 { top:20px; }
    #divRow_1 { top:50px; }
    #divRow_2 { top:80px; }
    #divRow_3 { top:110px; }           
    #divRow_4 { top:140px; }   
    #divRow_5 { top:170px; }   
    #divRow_6 { top:200px; }   
    #divRow_7 { top:230px; }   
    #divRow_8 { top:260px; }   
    #divRow_9 { top:290px; }
    
</style>

</head>
<body>

<input id="btnGetPersons" type="button" value="Get Persons" />

<div id="divRow_0"></div>
<div id="divRow_1"></div>
<div id="divRow_2"></div>
<div id="divRow_3"></div>
<div id="divRow_4"></div>
<div id="divRow_5"></div>
<div id="divRow_6"></div>
<div id="divRow_7"></div>
<div id="divRow_8"></div>
<div id="divRow_9"></div>

</body>
</html>

displayJSONDat 函数确实非常原始。只是为了演示目的，但可以很容易地扩展到一个可以像某种 DataGrid 行为的对象。

差不多就是这样了。如果您不想创建大型 Entity Framework 模型，或者在某些情况下不想使用它，这是一种完成某些事情的简单方法。

请告诉我您的想法，也可以使用相同的方法来在 MVC 中显示非 Ajax 数据视图。