Asp.net 利用Jquery Ajax傳送和接收DataTable
對於習慣使用GridView的人來說,前臺頁面需要動態新增表格的行數,是一件痛苦的事。GridView處理這種事情相當麻煩,你點選“新增一行”,需要回傳到伺服器。伺服器再把GridView反構造成DataTable, 再給DataTable增加一行之後,繫結到GridView,然後發回客戶端...
能不能簡單一點呢?
在使用Ajax資料請求資料,通常都是簡單格式,比如String,資訊量較少。當然也可以請求回XML,但是XML資料冗餘多,取到客戶端處理比json麻煩的多。
能不能簡單一點呢?
上面這些問題,如果DataTable與JSON型別可以方便的相互轉換,都可以迎刃而解了。
優點:1)避免不必要的回傳;
2)精簡非同步請求資料的大小 ;
3)解決資料量較大時,資料傳送與接收繁瑣的問題。
既然好處這麼多,我們上程式碼吧。
前臺程式碼:
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js">script>
<script type="text/javascript" src="js/json2.js">script>
<script type="text/javascript">
//onload
$(function() {
//點選botton1
$("#botton1").click(function() {
var url = "default.aspx?ajax=1";
var dtb = generateDtb();
//序列化物件
var postdata = JSON.stringify(dtb);
//非同步請求
$.post(url, { json: postdata }, function(json) {
createTable(json);
}, "json")
});
});
//生成DataTable物件
function generateDtb() {
var dtb = new Array();
for (var i = 0; i < 10; i++) {
var row = new Object();
row.col1 = i;
row.col2 = i % 2 == 0 ? true : false;
row.col3 = i + "he\nll\"ow";
dtb.push(row);
}
return dtb;
}
//顯示Json中的資料
function createTable(json) {
var table = $("<table border='1'></table>");
for (var i = 0; i < json.length; i++) {
o1 = json[i];
var row = $(" ");
for (key in o1) {
var td = $(" ");
td.text(o1[key].toString());
td.appendTo(row);
}
row.appendTo(table);
}
table.appendTo($("#back"));
}
script>
head>
<body>
<form id="form1" runat="server">
<div>
<input id="botton1" type="button" value="button" />
<div id="back">
div>
div>
form>
body>
html>
<head runat="server">
<title>title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js">script>
<script type="text/javascript" src="js/json2.js">script>
<script type="text/javascript">
//onload
$(function() {
//點選botton1
$("#botton1").click(function() {
var url = "default.aspx?ajax=1";
var dtb = generateDtb();
//序列化物件
var postdata = JSON.stringify(dtb);
//非同步請求
$.post(url, { json: postdata }, function(json) {
createTable(json);
}, "json")
});
});
//生成DataTable物件
function generateDtb() {
var dtb = new Array();
for (var i = 0; i < 10; i++) {
var row = new Object();
row.col1 = i;
row.col2 = i % 2 == 0 ? true : false;
row.col3 = i + "he\nll\"ow";
dtb.push(row);
}
return dtb;
}
//顯示Json中的資料
function createTable(json) {
var table = $("<table border='1'></table>");
for (var i = 0; i < json.length; i++) {
o1 = json[i];
var row = $("
for (key in o1) {
var td = $("
td.text(o1[key].toString());
td.appendTo(row);
}
row.appendTo(table);
}
table.appendTo($("#back"));
}
script>
head>
<body>
<form id="form1" runat="server">
<div>
<input id="botton1" type="button" value="button" />
<div id="back">
div>
div>
form>
body>
html>
後臺程式碼:
///
/// 頁面載入時
///
///
///
protected void Page_Load(object sender, EventArgs e)
{
//判斷是否非同步請求
if (Request.QueryString["ajax"] == "1")
{
ProcessRequest();
}
}
///
/// 處理非同步請求
///
private void ProcessRequest()
{
Response.ContentType = "text/html";
string json = Request.Form["json"];
//反序列化DataTable
DataTable newdtb = Json2Dtb(json);
//序列化DataTable為JSON
string back = Dtb2Json(newdtb);
Response.Write(back);
Response.End();
}
///
/// DataTable轉Json
///
///
///
private string Dtb2Json(DataTable dtb)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach (DataRow row in dtb.Rows)
{
Dictionary<string, object> drow = new Dictionary<string, object>();
foreach (DataColumn col in dtb.Columns)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
return jss.Serialize(dic);
}
///
/// Json轉DataTable
///
///
///
private DataTable Json2Dtb(string json)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = jss.Deserialize<ArrayList>(json);
DataTable dtb = new DataTable();
if (dic.Count > 0)
{
foreach (Dictionary<string, object> drow in dic)
{
if (dtb.Columns.Count == 0)
{
foreach (string key in drow.Keys)
{
dtb.Columns.Add(key, drow[key].GetType());
}
}
DataRow row = dtb.NewRow();
foreach (string key in drow.Keys)
{
row[key] = drow[key];
}
dtb.Rows.Add(row);
}
}
return dtb;
}
///
///
///
protected void Page_Load(object sender, EventArgs e)
{
//判斷是否非同步請求
if (Request.QueryString["ajax"] == "1")
{
ProcessRequest();
}
}
///
/// 處理非同步請求
///
private void ProcessRequest()
{
Response.ContentType = "text/html";
string json = Request.Form["json"];
//反序列化DataTable
DataTable newdtb = Json2Dtb(json);
//序列化DataTable為JSON
string back = Dtb2Json(newdtb);
Response.Write(back);
Response.End();
}
///
/// DataTable轉Json
///
///
///
private string Dtb2Json(DataTable dtb)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach (DataRow row in dtb.Rows)
{
Dictionary<string, object> drow = new Dictionary<string, object>();
foreach (DataColumn col in dtb.Columns)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
return jss.Serialize(dic);
}
///
/// Json轉DataTable
///
///
///
private DataTable Json2Dtb(string json)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = jss.Deserialize<ArrayList>(json);
DataTable dtb = new DataTable();
if (dic.Count > 0)
{
foreach (Dictionary<string, object> drow in dic)
{
if (dtb.Columns.Count == 0)
{
foreach (string key in drow.Keys)
{
dtb.Columns.Add(key, drow[key].GetType());
}
}
DataRow row = dtb.NewRow();
foreach (string key in drow.Keys)
{
row[key] = drow[key];
}
dtb.Rows.Add(row);
}
}
return dtb;
}
再附一個下載檔案,覺得有用的可以下載看看
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/12639172/viewspace-673839/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- js通過ajax傳送header資訊php接收JSHeaderPHP
- 利用ASP傳送和接收XML資料的處理方法XML
- jQuery裡如何使用ajax傳送請求jQuery
- Go的Channel傳送和接收Go
- PHP傳送和接收POST資料PHP
- 學習AJAX必知必會(4)~JQuery傳送Ajax請求jQuery
- 使用python傳送和接收郵件Python
- 0229-UDP 傳送和接收UDP
- 0230-TCP 傳送和接收TCP
- asp.net 郵件傳送提醒功能(接收方包括QQ郵箱等)ASP.NET
- MPTCP 原始碼分析(四) 傳送和接收資料TCP原始碼
- 使用python傳送郵件和接收郵件Python
- VC UDP接收 傳送 廣播UDP
- Udp廣播的傳送和接收(iOS + AsyncUdpSocket)下篇UDPiOS
- SOCKET實現廣播(BoardCast)的傳送和接收 (轉)AST
- Ajax傳遞陣列 (PHP後臺接收)陣列PHP
- 如何傳送請求以及AJAX
- 【測試】echo傳送和接收TCP/UDP資料包|shell 傳送TCP/UDP資料包TCPUDP
- Udp接收和傳送的多執行緒進行(新手)UDP執行緒
- 非同步 SOCKET 程式設計 - 傳送和接收資料 (轉)非同步程式設計
- Jquery Ajax方法傳值到actionjQuery
- 網路核心之TCP是如何傳送和接收訊息的TCP
- stm32之CAN傳送、接收詳解
- 使用FormData+jQuery+AJAX傳送檔案至又拍雲,實現無重新整理上傳ORMjQuery
- 使用 SFTP 配置 WebSphere Partner Gateway V6.2 傳送和接收檔案FTPWebGateway
- UDP介紹及UDP傳送端和接收端廣播程式碼UDP
- 實現傳送多個Ajax請求
- ASP.NET MVC和AJAXASP.NETMVC
- jQuery datatable 使用方法jQuery
- 利用msmtp+mutt 傳送mailAI
- 關於jQuery在Asp.Net Mvc 框架下Ajax檔案上傳的實現jQueryASP.NETMVC框架
- ASP.NET之郵件傳送ASP.NET
- asp.net傳送郵件程式ASP.NET
- BGP檢視從鄰居接收/傳送的路由資訊路由
- asp.net jquery ajax資料操作 DropDownList級聯ASP.NETjQuery
- jQuery – AJAX get() 和 post() 方法jQuery
- vue中使用axios傳送ajax請求VueiOS
- 首頁 使用axios 傳送ajax請求iOS