Code for transmitting and receiving DataTable using Jquery Ajax under Asp.net

Home

Web Front-end

JS Tutorial

Code for transmitting and receiving DataTable using Jquery Ajax under Asp.net_jquery

May 16, 2016 pm 06:19 PM

ajax datatable jquery

The server then deconstructs the GridView into a DataTable, adds a row to the DataTable, binds it to the GridView, and then sends it back to the client...
Can it be simpler?
When using Ajax data to request data, it is usually in a simple format, such as String, with less information. Of course, you can also request XML back, but XML data is much redundant, and getting it to the client for processing is much more troublesome than json.
Can it be simpler?
The above problems can be easily solved if the DataTable and JSON types can be easily converted to each other.
Advantages: 1) Avoid unnecessary postbacks;
2) Streamline the size of asynchronous request data;
3) Solve the problem of tedious data sending and receiving when the amount of data is large.
Since there are so many benefits, let’s get into the code.
Front-end code:

Copy code The code is as follows:

 
<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() { 
//Click botton1 
$("#botton1 ").click(function() { 
var url = "default.aspx?ajax=1"; 
var dtb = generateDtb(); 
//Serialized object
var postdata = JSON .stringify(dtb); 
//Asynchronous request
$.post(url, { json: postdata }, function(json) { 
createTable(json); 
}, "json") 
}); 
}); 
//Generate DataTable object
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 "henll"ow"; 
dtb.push(row); 
} 
return dtb; 
} 
//Display data in Json
function createTable(json ) { 
var table = $("<table border='1'></table>"); 
for (var i = 0; i < json.length; i ) { 
o1 = json[i]; 
var row = $("<tr></tr>"); 
for (key in o1) { 
var td = $("&lt ;td></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> ; 

Backend code:
/// <summary>

Copy code Code As follows:

 
/// 페이지가 로드될 때
/// </summary> 
/// <param name="sender"></param> / <param name="e"></param> 
protected void Page_Load(object sender, EventArgs e) 
{ 
//비동기 요청 여부 결정
if (Request. QueryString[ "ajax"] == "1") 
{ 
ProcessRequest() 
} 
} 
/// <summary> 
/// 비동기 요청 처리 
/// </summary> 
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(); 
/// <summary> 
/// DataTable을 Json으로 
/// </summary> param name="dtb"></param> 
/// <returns></returns> 
private string Dtb2Json(DataTable dtb) 
{ 
JavaScriptSerializer jss = new JavaScriptSerializer (); 
ArrayList dic = new ArrayList(); 
foreach(dtb.Rows의 DataRow 행) 
{ 
Dictionary<string, object>( ) ; 
foreach(dtb.Columns의 DataColumn col) 
{ 
drow.Add(col.ColumnName, row[col.ColumnName]) 
} 
dic.Add(drow) ; 
} 
return jss.Serialize(dic); 
/// 
/// Json을 DataTable로 
/// </summary> 🎜>/// <param name="json"></param> 
/// <returns></returns> 
private DataTable Json2Dtb(string json) 
{ 
JavaScriptSerializer jss = new JavaScriptSerializer(); 
ArrayList dic = jss.Deserialize<ArrayList>(json); 
DataTable dtb = new DataTable() 
{ 
foreach (Dictionary<string, object> drow in dic) 
{ 
if (dtb.Columns.Count == 0) 
{ 
foreach (drow의 문자열 키 . 키) 
{ 
dtb.Columns.Add(key, drow[key].GetType()) 
} 
} 
DataRow row = dtb.NewRow(); foreach(drow.Keys의 문자열 키) 
{ 
row[key] = drow[key] 
} 
dtb.Rows.Add(row) 
} 
 } 
return dtb; 
} 

 
다른 다운로드 파일이 첨부되어 있으니 

json.zip 
을 다운로드하세요.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn