1 一直在想在asp.net中怎么才能向在java中那样用struts那样做页面请求。
2
3 当然asp.net mvc就是类似struts的东西吧，不过还没来得及学习。
4
5 今天就用ashx来接收页面请求，并调用后台，然后返回数据给前台，用jquer .ajax提交请求，接收ashx返回的数据。
6
7
8
9 例子：
10
11 例子是要实现页面加载时从数据库读取数据，并把数据放到一个下拉列表中。（因为是用ajax，就建html页面就行了，一直不喜欢aspx页面，感觉它太臃肿了。）
12
13 一.准备工作：
14
15 1.建web应用程序aspnetAjax
16
17 2.建index.htm
18
19 3.建个js文件夹，把jquery.js放进去，
20
21 4.建ajax文件夹，里面放ashx
22
23 5.在js文件夹建index.js，一般我们都是一个页面对应一个js
24
25 6.在ajax文件夹，建IndexHandler.ashx，一般一个js页面对应一个一般用户控件，这样层次感很强，也很好维护。
26
27
28
29 二.html页面
30
31 html页面就简单了，我们要用ajax读后台做个下拉列表，所以页面就放个DIV就行了。其他的交给js.
32
33
34
35
36 HTML代码
37 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
38 <html xmlns="http://www.w3.org/1999/xhtml" >
39 <head>
40 <title>测试</title>
41
42 <script src="js/jquery-1.2.3-intellisense.js" type="text/javascript"></script>
43
44 <script src="js/index.js" type="text/javascript"></script>
45
46 </head>
47 <body>
48 企业性质<div id="vocaspec"> </div>
49 行业类型<div id="industr"> </div>
50 </body>
51 </html>
52
53
54
55
56
57 编写IndexHandler.ashx代码
58
59
60
61
62 代码
63 namespace aspnetAjax.ajax
64 {
65 /// <summary>
66 /// $codebehindclassname$ 的摘要说明
67 /// </summary>
68
69 public class IndexHandler : IHttpHandler
70 {
71
72 public void ProcessRequest(HttpContext context)
73 {
74 context.Response.ContentType = "application/json";
75 //接收提交过来的meth参数
76 string meth = context.Request.Params["meth"].ToString();
77 //根据参数调用不同的方法
78 switch (meth)
79 {
80 case "load":
81 loadjson(context);
82 break;
83 case "add":
84 add(context);
85 break;
86 }
87 }
88
89 public bool IsReusable
90 {
91 get
92 {
93 return false;
94 }
95 }
96
97 //页面加载方法，调用BLL，获得数据
98 private void loadjson(HttpContext context)
99 {
100 //实例BLL
101 VocaSpecSortBLL vocaSpec = new VocaSpecSortBLL();
102 BLL.Owner ownerbll = new GYXMGL.BLL.Owner();
103
104 DataSet ds = vocaSpec.GetList("");
105 DataSet dsindustr = ownerbll.Getcharcte();
106
107 //实例一个StringBuilder 用来拼接一个json数据
108 StringBuilder sbvoca = new StringBuilder();
109
110 if (ds != null && ds.Tables[0].Rows.Count > 0)
111 {
112 sbvoca.Append("{\"voce\":[");
113 int i = 1;
114 int count = ds.Tables[0].Rows.Count;
115 foreach (DataRow dr in ds.Tables[0].Rows)
116 {
117 if (i == count)
118 {
119 sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"}");
120 }
121 else
122 {
123 sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"},");
124 }
125 i++;
126 }
127 sbvoca.Append("]");
128 }
129 if (dsindustr != null && dsindustr.Tables[0].Rows.Count > 0)
130 {
131
132 sbvoca.Append(",\"industr\":[");
133 int i = 1;
134 int count = dsindustr.Tables[0].Rows.Count;
135 foreach (DataRow dr in dsindustr.Tables[0].Rows)
136 {
137 if (i == count)
138 {
139 sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"}");
140 }
141 else
142 {
143 sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"},");
144 }
145 i++;
146 }
147 sbvoca.Append("]");
148 }
149 sbvoca.Append("}");
150 context.Response.Write(sbvoca.ToString());
151
152 context.Response.End();
153 }
154
155 }
156 }
157
158
159
160
161
162 我们把index.js改下
163
164
165
166
167 代码
168 $(document).ready(function() {
169 $.ajax({
170 type: "POST",
171 url: "../ajax/NewOwnerHandler.ashx",
172 //我们用text格式接收
173 dataType: "text",
174 data: "meth=load",
175 success: function(msg) {
176 alert(msg);
177 //显示后台数据
178 $("#vocaspec").html(msg);
179 // $("#industr").html(industr);
180 }
181 });
182 });
183
184
185
186
187
188 我可以看到如下数据，就是ashx中response给我们的json格式数据，现在我们要把这些数据
189
190 显示在下拉列表中。就要遍历json中的数组。
191
192
193
194
195 代码
196 {
197 "voce":[{"code":"1","name":"农林水利"},{"code":"10","name":"军工"},{"code":"11","name":"农林"},{"code":"12","name":"水利(电)"},{"code":"13","name":"水电站"},{"code":"14","name":"输变线"},{"code":"15","name":"煤矿"},{"code":"16","name":"气田"},{"code":"17","name":"公路"},{"code":"18","name":"铁路"},{"code":"19","name":"民航"},{"code":"2","name":"能源"},{"code":"20","name":"信息产业"},{"code":"21","name":"化工"},{"code":"22","name":"机械"},{"code":"23","name":"冶金"},{"code":"24","name":"有色金属"},{"code":"25","name":"建材"},{"code":"26","name":"医药"},{"code":"27","name":"轻工"},{"code":"28","name":"农牧产品深加工"},{"code":"3","name":"交通"},{"code":"4","name":"通讯"},{"code":"5","name":"特色产业"},{"code":"6","name":"城市基础设施"},{"code":"7","name":"商贸流通"},{"code":"8","name":"旅游"},{"code":"9","name":"文体卫"}],
198 "industr":[{"code":"1","name":"国有"},{"code":"2","name":"私人"}]
199 }
200
201
202
203
204
205 修改index.js代码，遍历json数据把数据显示成下拉列表
206
207
208
209
210
211
212 代码
213 $(document).ready(function() {
214 $.ajax({
215 type: "POST",
216 url: "../ajax/NewOwnerHandler.ashx",
217 //json格式接收数据
218 dataType: "json",
219 //指点后台调用什么方法
220 data: "meth=load",
221
222 success: function(msg) {
223 //实例2个字符串变量来拼接下拉列表
224 var industr = "<select name=\"industr\"><option label=\"---请选择---\"></option>";
225 var vocaspec = "<select name=\"vocaspec\"><option label=\"---请选择---\"></option>";
226 //使用jquery解析json中的数据
227 $.each(msg.voce, function(n, value) {
228 vocaspec += ("<option value=\"" + value.code + "\" label=\"" + value.name + "\">");
229 vocaspec += ("</option>");
230 });
231 $.each(msg.industr, function(n, value) {
232 industr += ("<option value=\"" + value.code + "\" label=\"" + value.name + "\">");
233 industr += ("</option>");
234 });
235 industr += ("</select>");
236
237 $("#vocaspec").html(vocaspec);
238 $("#industr").html(industr);
239 }
240 });
241 });
242
243
244
245
246
247 ------------------------
248
249 ok,完结！@
250
251
252
253 --这个实例涉及到的知识点
254
255 1.使用一般处理程序，接收request。并可以使用response数据
256
257 string meth = context.Request.Params["meth"].ToString();
258
259 因为一般处理程序
260
261 public class IndexHandler : IHttpHandler
262
263 他实现IHttpHandler接口
264
265 2.json数据格式
266
267 3.使用jquery ajax,并用jquery解析json数据。
浙公网安备 33010602011771号