<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Test.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>測試</title>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server">
<Scripts>
<asp:ScriptReference Name="jquery" />
</Scripts>
</asp:ScriptManager>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table id="tdlist" style="width: 100%">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("Id") %></td>
<td><%# Eval("ProName") %></td>
<td><%# Eval("ProPrice") %></td>
</tr>
</ItemTemplate>
<FooterTemplate></table></FooterTemplate>
</asp:Repeater>
</div>
<div style="text-align: center">
<input id="btnmore" type="button" value="more" />
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
<br />
<br />
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
<span>angularJS</span>
<div ng-app="myApp" ng-controller="customersCtrl">
<table >
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
<td><input id="Text1" value="{{ x.Country }}" type="text" /></td>
</tr>
</table>
<p>在輸入框中嘗試輸入:</p>
<p>姓名:
<input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
<div id="list1">
<table >
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
<td><input id="Text1" value="{{ x.Country }}" type="text" /></td>
</tr>
</table>
</div>
</div>
<div style="text-align: center">
<input id="btnmore2" type="button" value="more" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(function () {
// 文檔就緒
$("#btnmore").click(function () {
$("#tdlist").append($("#tdlist").html());
});
$("#btnmore2").click(function () {
$("#list1").append($("#list1").html());
});
});
</script>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http) {
$http.get("json.json")
.success(function (response) { $scope.names = response.records; });
});
</script>
using System;
using System.Text;
using System.Data;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Test
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GriddBind();
}
}
protected void GriddBind()
{
DataTable newdtb = new DataTable();
newdtb.Columns.Add("Id", typeof(int));
newdtb.Columns.Add("ProName", typeof(string));
newdtb.Columns.Add("ProPrice", typeof(decimal));
newdtb.Columns["Id"].AutoIncrement = true;
for (int i = 1; i < 11; i++)
{
DataRow newRow = newdtb.NewRow();
newRow["ProName"] = "測試pro" + i.ToString();
newRow["ProPrice"] = 12.3m;
newdtb.Rows.Add(newRow);
}
Repeater1.DataSource = newdtb;
Repeater1.DataBind();
}
protected void Button1_Click(object sender, EventArgs e)
{
DataTable newdtb = new DataTable();
newdtb.Columns.Add("Id", typeof(int));
newdtb.Columns.Add("ProName", typeof(string));
newdtb.Columns.Add("ProPrice", typeof(decimal));
newdtb.Columns["Id"].AutoIncrement = true;
for (int i = 1; i < 11; i++)
{
DataRow newRow = newdtb.NewRow();
newRow["ProName"] = "測試pro" + i.ToString();
newRow["ProPrice"] = 12.3m;
newdtb.Rows.Add(newRow);
}
String strSql = DataTableConvertJson.DataTable2Json(newdtb);
Literal1.Text = strSql;
}
}
public class DataTableConvertJson
{
#region dataTable轉換成Json格式
/// <summary>
/// dataTable轉換成Json格式
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public static string DataTable2Json(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{\"");
jsonBuilder.Append(dt.TableName);
jsonBuilder.Append("\":[");
jsonBuilder.Append("[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
jsonBuilder.Append("}");
return jsonBuilder.ToString();
}
#endregion dataTable轉換成Json格式
#region DataSet轉換成Json格式
/// <summary>
/// DataSet轉換成Json格式
/// </summary>
/// <param name="ds">DataSet</param>
/// <returns></returns>
public static string Dataset2Json(DataSet ds)
{
StringBuilder json = new StringBuilder();
foreach (DataTable dt in ds.Tables)
{
json.Append("{\"");
json.Append(dt.TableName);
json.Append("\":");
json.Append(DataTable2Json(dt));
json.Append("}");
}
return json.ToString();
}
#endregion
/// <summary>
/// Msdn
/// </summary>
/// <param name="jsonName"></param>
/// <param name="dt"></param>
/// <returns></returns>
public static string DataTableToJson(string jsonName, DataTable dt)
{
StringBuilder Json = new StringBuilder();
Json.Append("{\"" + jsonName + "\":[");
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
Json.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
Json.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":\"" + dt.Rows[i][j].ToString() + "\"");
if (j < dt.Columns.Count - 1)
{
Json.Append(",");
}
}
Json.Append("}");
if (i < dt.Rows.Count - 1)
{
Json.Append(",");
}
}
}
Json.Append("]}");
return Json.ToString();
}
}
}