一直在想在asp.net中怎么才能向在java中那样用struts那样做页面请求。
当然asp.net mvc就是类似struts的东西吧,不过还没来得及学习。
今天就用ashx来接收页面请求,并调用后台,然后返回数据给前台,用jquer .ajax提交请求,接收ashx返回的数据。
例子:
例子是要实现页面加载时从数据库读取数据,并把数据放到一个下拉列表中。(因为是用ajax,就建html页面就行了,一直不喜欢aspx页面,感觉它太臃肿了。)
一.准备工作:
1.建web应用程序aspnetAjax
2.建index.htm
3.建个js文件夹,把jquery.js放进去,
4.建ajax文件夹,里面放ashx
5.在js文件夹建index.js,一般我们都是一个页面对应一个js
6.在ajax文件夹,建IndexHandler.ashx,一般一个js页面对应一个一般用户控件,这样层次感很强,也很好维护。
二.html页面
html页面就简单了,我们要用ajax读后台做个下拉列表,所以页面就放个DIV就行了。其他的交给js.
<!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> <title>测试</title> <script src="js/jquery-1.2.3-intellisense.js" type="text/javascript"></script> <script src="js/index.js" type="text/javascript"></script> </head> <body> 企业性质<div id="vocaspec"> </div> 行业类型<div id="industr"> </div> </body> </html>
编写IndexHandler.ashx代码
namespace aspnetAjax.ajax { /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> public class IndexHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; //接收提交过来的meth参数 string meth = context.Request.Params["meth"].ToString(); //根据参数调用不同的方法 switch (meth) { case "load": loadjson(context); break; case "add": add(context); break; } } public bool IsReusable { get { return false; } } //页面加载方法,调用BLL,获得数据 private void loadjson(HttpContext context) { //实例BLL VocaSpecSortBLL vocaSpec = new VocaSpecSortBLL(); BLL.Owner ownerbll = new GYXMGL.BLL.Owner(); DataSet ds = vocaSpec.GetList(""); DataSet dsindustr = ownerbll.Getcharcte(); //实例一个StringBuilder 用来拼接一个json数据 StringBuilder sbvoca = new StringBuilder(); if (ds != null && ds.Tables[0].Rows.Count > 0) { sbvoca.Append("{\"voce\":["); int i = 1; int count = ds.Tables[0].Rows.Count; foreach (DataRow dr in ds.Tables[0].Rows) { if (i == count) { sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"}"); } else { sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"},"); } i++; } sbvoca.Append("]"); } if (dsindustr != null && dsindustr.Tables[0].Rows.Count > 0) { sbvoca.Append(",\"industr\":["); int i = 1; int count = dsindustr.Tables[0].Rows.Count; foreach (DataRow dr in dsindustr.Tables[0].Rows) { if (i == count) { sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"}"); } else { sbvoca.Append("{\"code\":\"" + dr[0] + "\",\"name\":\"" + dr[1] + "\"},"); } i++; } sbvoca.Append("]"); } sbvoca.Append("}"); context.Response.Write(sbvoca.ToString()); context.Response.End(); } } }
我们把index.js改下
$(document).ready(function() { $.ajax({ type: "POST", url: "../ajax/NewOwnerHandler.ashx", //我们用text格式接收 dataType: "text", data: "meth=load", success: function(msg) { alert(msg); //显示后台数据 $("#vocaspec").html(msg); // $("#industr").html(industr); } }); });
显示在下拉列表中。就要遍历json中的数组。
{ "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":"文体卫"}], "industr":[{"code":"1","name":"国有"},{"code":"2","name":"私人"}] }
修改index.js代码,遍历json数据把数据显示成下拉列表
$(document).ready(function() { $.ajax({ type: "POST", url: "../ajax/NewOwnerHandler.ashx", //json格式接收数据 dataType: "json", //指点后台调用什么方法 data: "meth=load", success: function(msg) { //实例2个字符串变量来拼接下拉列表 var industr = "<select name=\"industr\"><option label=\"---请选择---\"></option>"; var vocaspec = "<select name=\"vocaspec\"><option label=\"---请选择---\"></option>"; //使用jquery解析json中的数据 $.each(msg.voce, function(n, value) { vocaspec += ("<option value=\"" + value.code + "\" label=\"" + value.name + "\">"); vocaspec += ("</option>"); }); $.each(msg.industr, function(n, value) { industr += ("<option value=\"" + value.code + "\" label=\"" + value.name + "\">"); industr += ("</option>"); }); industr += ("</select>"); $("#vocaspec").html(vocaspec); $("#industr").html(industr); } }); });
------------------------
ok,完结!@
--这个实例涉及到的知识点
1.使用一般处理程序,接收request。并可以使用response数据
string meth = context.Request.Params["meth"].ToString();
因为一般处理程序
public class IndexHandler : IHttpHandler
他实现IHttpHandler接口
2.json数据格式
3.使用jquery ajax,并用jquery解析json数据。
http://www.cnblogs.com/tianlong/archive/2010/08/08/1795240.html