在asp.net web form项目中使用json
jquery 、json 、ajax 、 前端控件(比如jquery ui 、 jquery easy ui 等)这些技术在网页前端编程中都是十分重要的,
而网页编程,比如PHP等,都是以标准的http get / post方式实现的,
而微软的asp.net web form创新性的把http get/post换成了事件驱动的方法,这个按钮对应一个事件,那个东西对应另一个事件.......
这种“事件驱动”的方法让网页编程变得想桌面程序开发一样,不需要理会get/post乱七八糟的东西,
在某种意义上,是方便了开发人员!!
当然这种“事件驱动”的方式也会带来别的问题,比如查看aspx页面的网页源代码时,一定会看到“__VIEWSTATE”这个单词,
viewstate这个东西还是有很多深奥的问题的,笔者也解释不清楚!!!
虽然asp.net web form看起来有很多问题存在,但是本人还是非常喜欢asp.net web form的。
废话说多了,不好意思!
下面我们以jquery easy ui中的combogrid控件作为例子,说说asp.net web form怎么使用json.
最终的效果图是:
首先,要说一下json是什么东西??
[{"Name":"阿萨德","TeacherNo":"sp001"},
{"Name":"Tom","TeacherNo":"sp002"},
{"Name":"山东省","TeacherNo":"sp003"}]
上面这个字符串就是一个json!!
json简单来说,就是一个有标准格式的字符串
这串字符的规律是
[ {键:值 , 键:值} , {....} ]
很简单但是很明确!!
我们的程序中有个类叫做Teacher
public class Teacher
{
public string Name { get; set; }
public string TeacherNo { get; set; }
}//end class
要形成上面的json字符串的话,就先创建3个Teacher对象,
然后放在一个List<Teacher>里面,
然后写一个foreach语句,
然后一个个属性拼起来,
string json ="[";
foreacr( var item in list)
{
string string ="Name"+item.Name;
//别的大概也是这样
}
json+="]";
最开始学网页编程的时候,我也是这样傻乎乎的拼出来的,
时不时会拼错,
这里介绍一个神器:json.net
网址是http://json.codeplex.com/
官网可以下载,并且有很多用例,够详细了。
这东西超好用,对于json的序列化和反***都非常好用!!!
说完了json,然后我想说说asp.net web form 中的ashx文件,
他的中文叫做“一般处理程序”,
在新建项的时候可以找到!
.ashx类似.aspx文件,用于处理传入到服务器的HTTP请求,
但它不会像.aspx文件那样要返回处理结果和大量HTML,
它可以返回简单的字符串、图片等。
我一般都是用它来返回json或者接受ajax的post方法的。
上面介绍了一大堆技术,我也是一个新手,所有说错了,别怪我啊。。
下面开始说怎么做出combogrid的效果吧!
项目的所有文件如图(有些是没有的)
首先新建一个类文件,写Teacher类
public class Teacher
{
public string Name { get; set; }
public string TeacherNo { get; set; }
}//end class
第二,新建一个ashx文件,名为Handler1(就是默认的名字)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
namespace webFormAjax
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string json = JsonConvert.SerializeObject(TeacherList());
context.Response.Write(json);
}
public bool IsReusable
{
get
{
return false;
}
}
private List<Teacher> TeacherList()
{
Teacher t1 = new Teacher { Name = "阿萨德", TeacherNo = "sp001" };
Teacher t2 = new Teacher { Name = "Tom", TeacherNo = "sp002" };
Teacher t3 = new Teacher { Name = "山东省", TeacherNo = "sp003" };
List<Teacher> list = new List<Teacher>();
list.Add(t1);
list.Add(t2);
list.Add(t3);
return list;
}
}//end class
}
这里就用到了上面说的Json.net,
这个Newtonsoft.Json动态链接库下载之后,引用就可以了。
只要用JsonConvert.SerializeObject就可以把一个List变成
[{"Name":"阿萨德","TeacherNo":"sp001"},
{"Name":"Tom","TeacherNo":"sp002"},
{"Name":"山东省","TeacherNo":"sp003"}]
是不是很简单呢??嘻嘻,就是这么好用!!
这里还有一个要说明的:
Handler1里面的Response.Write就是用来输出json串的!
第三步,新建一个web form ,叫做WebForm1
后台代码不需要改动,我们看看前台代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="webFormAjax.WebForm1" %>
<!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>
<script src="Content/jquery.min.js" type="text/javascript"></script>
<script src="Content/jquery.easyui.min.js" type="text/javascript"></script>
<link href="Content/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="Content/themes/metro/easyui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('#text1').combogrid({
panelWidth: 450,
idField: 'TeacherNo',
textField: 'Name',
url: 'Handler1.ashx',
columns: [[
{ field: 'TeacherNo', title: '教工号', width: 60 },
{ field: 'Name', title: '名字', width: 100 }
]]
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="text1" />
</div>
</form>
</body>
</html>
前端代码说明:
首先,引用jquery和easyui的js文件
然后针对input控件写一段脚本,
脚本里面就是让input控件变成combogrid,
然后他的数据来源(url)就是填刚刚写的Handler1。
因为Handler1输出的就是Response.Write(json)。
另外可以看到grid里面的列名就是Teacher的属性名!
具体的easyui 控件是怎么用的,这里就不介绍了,
具体看easyui官网http://www.jeasyui.com/
总结:输出json靠的是Handler1的Response.Write