QA@IT
«回答へ戻る

回答を投稿

SurferOnWwwさん、ありがとうございます。
自分でも一応DataTableの内容を表示させることが出来たので載せます。
WebForm1.aspx

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="Styles/w2ui-1.3.min.css" />
    <script src="Scripts/jquery-1.11.3.min.js"></script>
    <script src="Scripts/w2ui-1.3.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="grid" style="height: 600px;">
    </div>
    </form>
</body>
<script type="text/javascript">
    $(function () {
        $('#grid').w2grid({
            name: 'grid',
            url: 'WebForm2.aspx',
            columns: [
                { field: 'fname', caption: 'First Name', size: '30%' },
                { field: 'lname', caption: 'Last Name', size: '30%' },
                { field: 'email', caption: 'Email', size: '40%' },
                { field: 'sdate', caption: 'Start Date', size: '120px' },
            ]
        });
    });
</script>
</html>

WebForm2.aspx.cs

public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var c = this.ConvertDataTabletoString();
            Response.ContentType = "text/javascript";
            Response.Output.Write(c);
            Response.End();
        }
        public string ConvertDataTabletoString()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("fname"); dt.Columns.Add("lname"); dt.Columns.Add("email");
            dt.Columns.Add("sdate");
            for (int i = 0; i < 1000; i++)
            {
                DataRow row = dt.NewRow();
                row["fname"] = "a";
                row["lname"] = "b";
                row["email"] = "c";
                row["sdate"] = "2015/12/16";
                dt.Rows.Add(row);
            }
            System.Web.Script.Serialization.JavaScriptSerializer serializer = new
            System.Web.Script.Serialization.JavaScriptSerializer();
            List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
            foreach (DataRow dr in dt.Rows)
            {
                var dict = new Dictionary<string, object>();
                foreach (DataColumn col in dt.Columns)
                {
                    dict[col.ColumnName] = dr[col];
                }
                rows.Add(dict);
            }
            string ret = serializer.Serialize(rows);

            ret = "{\"status\" : \"success\",\"total\":1000,\"records\":" + ret + "}";

            return ret;
        }
    }

SurferOnWwwさんの載せてくださったコードも自分で実行して勉強します。
w2uiについてはもう少し自分がやりたいことが出来るか調べてみようと思います。

SurferOnWwwさん、ありがとうございます。
自分でも一応DataTableの内容を表示させることが出来たので載せます。
WebForm1.aspx
```html
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="Styles/w2ui-1.3.min.css" />
    <script src="Scripts/jquery-1.11.3.min.js"></script>
    <script src="Scripts/w2ui-1.3.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="grid" style="height: 600px;">
    </div>
    </form>
</body>
<script type="text/javascript">
    $(function () {
        $('#grid').w2grid({
            name: 'grid',
            url: 'WebForm2.aspx',
            columns: [
                { field: 'fname', caption: 'First Name', size: '30%' },
                { field: 'lname', caption: 'Last Name', size: '30%' },
                { field: 'email', caption: 'Email', size: '40%' },
                { field: 'sdate', caption: 'Start Date', size: '120px' },
            ]
        });
    });
</script>
</html>
```
WebForm2.aspx.cs
```c#
public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var c = this.ConvertDataTabletoString();
            Response.ContentType = "text/javascript";
            Response.Output.Write(c);
            Response.End();
        }
        public string ConvertDataTabletoString()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("fname"); dt.Columns.Add("lname"); dt.Columns.Add("email");
            dt.Columns.Add("sdate");
            for (int i = 0; i < 1000; i++)
            {
                DataRow row = dt.NewRow();
                row["fname"] = "a";
                row["lname"] = "b";
                row["email"] = "c";
                row["sdate"] = "2015/12/16";
                dt.Rows.Add(row);
            }
            System.Web.Script.Serialization.JavaScriptSerializer serializer = new
            System.Web.Script.Serialization.JavaScriptSerializer();
            List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
            foreach (DataRow dr in dt.Rows)
            {
                var dict = new Dictionary<string, object>();
                foreach (DataColumn col in dt.Columns)
                {
                    dict[col.ColumnName] = dr[col];
                }
                rows.Add(dict);
            }
            string ret = serializer.Serialize(rows);

            ret = "{\"status\" : \"success\",\"total\":1000,\"records\":" + ret + "}";

            return ret;
        }
    }
```
SurferOnWwwさんの載せてくださったコードも自分で実行して勉強します。
w2uiについてはもう少し自分がやりたいことが出来るか調べてみようと思います。