前言:
本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里。
目标:
a 熟悉简单JQuery Ajax的使用
b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll)
c 熟悉下handler的基本用法
1 简单效果图
2 前台代码
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
DialogAjax.aspx.cs
"
Inherits
=
"
JQueryTest_DialogAjax
"
%>
<! 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 href ="../JQueryUi/jquery-ui-1.8.5.custom.css" rel ="stylesheet" type ="text/css" />
< script src ="../JQueryUi/jquery-1.4.2.min.js" type ="text/javascript" ></ script >
< script src ="../JQueryUi/jquery-ui-1.8.5.custom.min.js" type ="text/javascript" ></ script >
< style type ="text/css" >
#divTb
{
width : 800px ;
border : 1px solid #aaa ;
margin : 0 auto ;
}
.even { background : #CCCCCC ; }
.odd { background : #FFFFFF ; }
</ style >
< script type ="text/javascript" >
// 获取发布模块类型
function getModuleInfo() {
$.ajax({
type: " GET " ,
dataType: " json " ,
url: " ../Handler/TestHandler.ashx?Method=GetModuleInfo " ,
// data: { id: id, name: name },
success: function (json) {
var typeData = json.Module;
$.each(typeData, function (i, n) {
var tbBody = ""
var trColor;
if (i % 2 == 0 ) {
trColor = " even " ;
}
else {
trColor = " odd " ;
}
tbBody += " <tr class=' " + trColor + " '><td> " + n.ModuleNum + " </td> " + " <td> " + n.ModuleName + " </td> " + " <td> " + n.ModuleDes + " </td></tr> " ;
$( " #myTb " ).append(tbBody);
});
},
error: function (json) {
alert( " 加载失败 " );
}
});
}
$( function () {
getModuleInfo();
});
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div id ="divTb" >
< table id ="myTb" style =" width:100%" >
</ table >
</ div >
</ form >
</ body >
</ html >
<! 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 href ="../JQueryUi/jquery-ui-1.8.5.custom.css" rel ="stylesheet" type ="text/css" />
< script src ="../JQueryUi/jquery-1.4.2.min.js" type ="text/javascript" ></ script >
< script src ="../JQueryUi/jquery-ui-1.8.5.custom.min.js" type ="text/javascript" ></ script >
< style type ="text/css" >
#divTb
{
width : 800px ;
border : 1px solid #aaa ;
margin : 0 auto ;
}
.even { background : #CCCCCC ; }
.odd { background : #FFFFFF ; }
</ style >
< script type ="text/javascript" >
// 获取发布模块类型
function getModuleInfo() {
$.ajax({
type: " GET " ,
dataType: " json " ,
url: " ../Handler/TestHandler.ashx?Method=GetModuleInfo " ,
// data: { id: id, name: name },
success: function (json) {
var typeData = json.Module;
$.each(typeData, function (i, n) {
var tbBody = ""
var trColor;
if (i % 2 == 0 ) {
trColor = " even " ;
}
else {
trColor = " odd " ;
}
tbBody += " <tr class=' " + trColor + " '><td> " + n.ModuleNum + " </td> " + " <td> " + n.ModuleName + " </td> " + " <td> " + n.ModuleDes + " </td></tr> " ;
$( " #myTb " ).append(tbBody);
});
},
error: function (json) {
alert( " 加载失败 " );
}
});
}
$( function () {
getModuleInfo();
});
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div id ="divTb" >
< table id ="myTb" style =" width:100%" >
</ table >
</ div >
</ form >
</ body >
</ html >
<%
@ WebHandler Language
=
"
C#
"
Class
=
"
TestHandler
"
%>
using System;
using System.Web;
using System.Collections.Generic;
using System.Text;
using DataDAL;
using DataEnity;
public class TestHandler : IHttpHandler {
HttpRequest Request;
HttpResponse Response;
public void ProcessRequest (HttpContext context) {
// 不让浏览器缓存
context.Response.Buffer = true ;
context.Response.ExpiresAbsolute = DateTime.Now.AddDays( - 1 );
context.Response.AddHeader( " pragma " , " no-cache " );
context.Response.AddHeader( " cache-control " , "" );
context.Response.CacheControl = " no-cache " ;
context.Response.ContentType = " text/plain " ;
Request = context.Request;
Response = context.Response;
string method = Request[ " Method " ].ToString();
System.Reflection.MethodInfo methodInfo = this .GetType().GetMethod(method);
methodInfo.Invoke( this , null );
}
public void GetModuleInfo()
{
StringBuilder sb = new StringBuilder();
string jsonData = string .Empty;
List < Module > lsModule = ModuleDAL.GetModuleList();
sb.Append( " {\ " Module\ " :[ " );
for ( int i = 0 ; i < lsModule.Count; i ++ )
{
jsonData = " {\ " ModuleNum\ " : " + " \ "" + lsModule[i].ModuleNum + " \ "" + " ,\ " ModuleName\ " : " + " \ "" + lsModule[i].ModuleName + " \ "" + " ,\ " ModuleDes\ " : " + " \ "" + lsModule[i].ModuleDes + " \ "" + " }, " ;
sb.Append(jsonData);
}
if (lsModule.Count > 0 )
sb = sb.Remove(sb.Length - 1 , 1 );
sb.Append( " ]} " );
Response.Write(sb);
}
public bool IsReusable
{
get {
return false ;
}
}
}
using System;
using System.Web;
using System.Collections.Generic;
using System.Text;
using DataDAL;
using DataEnity;
public class TestHandler : IHttpHandler {
HttpRequest Request;
HttpResponse Response;
public void ProcessRequest (HttpContext context) {
// 不让浏览器缓存
context.Response.Buffer = true ;
context.Response.ExpiresAbsolute = DateTime.Now.AddDays( - 1 );
context.Response.AddHeader( " pragma " , " no-cache " );
context.Response.AddHeader( " cache-control " , "" );
context.Response.CacheControl = " no-cache " ;
context.Response.ContentType = " text/plain " ;
Request = context.Request;
Response = context.Response;
string method = Request[ " Method " ].ToString();
System.Reflection.MethodInfo methodInfo = this .GetType().GetMethod(method);
methodInfo.Invoke( this , null );
}
public void GetModuleInfo()
{
StringBuilder sb = new StringBuilder();
string jsonData = string .Empty;
List < Module > lsModule = ModuleDAL.GetModuleList();
sb.Append( " {\ " Module\ " :[ " );
for ( int i = 0 ; i < lsModule.Count; i ++ )
{
jsonData = " {\ " ModuleNum\ " : " + " \ "" + lsModule[i].ModuleNum + " \ "" + " ,\ " ModuleName\ " : " + " \ "" + lsModule[i].ModuleName + " \ "" + " ,\ " ModuleDes\ " : " + " \ "" + lsModule[i].ModuleDes + " \ "" + " }, " ;
sb.Append(jsonData);
}
if (lsModule.Count > 0 )
sb = sb.Remove(sb.Length - 1 , 1 );
sb.Append( " ]} " );
Response.Write(sb);
}
public bool IsReusable
{
get {
return false ;
}
}
}