在asp.net web form项目中使用json

来源：互联网发布：js实现继承的方法编辑：程序博客网时间：2024/05/20 22:39

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

阅读全文

0 0