WebDevHelper介绍
WebDevHelper是微软公司ASP.NET Team架构师Nikhil Kothari在业余时间的小作品(赞叹人家架构师对技术的执著,加上对编码的热爱……),其中包含一些辅助Web开发的小工具,包括DOM查看、HTTP Trace、JavaScript Console、ASP.NET ViewState查看等杂项功能。今天Nikhil Kothari刚刚发布了WebDevHelper一个最新版本——(Version 0.8.5.1, 8/23/2007),其中非常引人注目的就是对ASP.NET AJAX开发的有力支持。
下载安装WebDevHelper
WebDevHelper的下载相关链接如下:
在ASP.NET AJAX中使用WebDevHelper查看UpdatePanel信息
双击Log窗口中某一次由UpdatePanel引发的异步更新记录,将弹出这一次HTTP请求的详细信息窗口。其中可以选择以局部更新模式查看HTTP Response信息,对于UpdatePanel来说,这些详细的信息非常有用:
在ASP.NET AJAX中使用WebDevHelper查看JSON信息
双击Log窗口中某一条对服务器端Web Method异步调用的记录,将弹出这一次HTTP请求的详细信息窗口。其中可以选择以JSON模式查看HTTP Response信息,显得更加直观清晰:
总结
除了UpdatePanel和JSON两种模式显示的HTTP Response,这个WebDevHelper在其他方面确实乏善可陈。其他集成的东西似乎都如鸡肋一般:HTTP Trace/Debug没有Fiddler强,DOM查看也没有DevToolbar厉害……但有了这两个亮点,也不失为一个非常有用的工具。
JSON的结构基于下面两点
这里假设我们需要创建一个User对象,并具有以下属性
您可以使用以下JSON形式来表示User对象:
然后如果把这一字符串赋予一个JavaScript变量,那么就可以直接使用对象的任一属性了。
完整代码:
实际使用时可能更复杂一点,比如我们为Name定义更详细的结构,使它具有FirstName和LastName:
{"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"}
完整代码:
<script>var User = {"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"};
alert(User.Name.FirstName);
</script>
现在我们增加一个新的需求,我们某个页面需要一个用户列表,而不仅仅是一个单一的用户信息,那么这里就需要创建一个用户列表数组。
下面代码演示了使用JSON形式定义这个用户列表:
[
{"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"},
{"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"}, "Email":"xxx◎xxx.com"},
{"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"}, "Email":"xxx2◎xxx2.com"}
]
完整代码:
<script>
var UserList = [
{"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"},
{"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"}, "Email":"xxx◎xxx.com"},
{"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"}, "Email":"xxx2◎xxx2.com"}
];
alert(UserList[0].Name.FirstName);
</script>
事实上除了使用"."引用属性外,我们还可以使用下面语句:
alert(UserList[0]["Name"]["FirstName"]); 或者 alert(UserList[0].Name["FirstName"]);
现在读者应该对JSON的使用有点认识了,归纳为以下几点:
小节:
本文通过一个实例演示,初步了解了JSON 的强大用途。可以归结如下:
参考资料:
http://www.json.org/
http://www.cnblogs.com/Truly/archive/2006/12/31/608896.html
http://www.json.org/json-zh.html
这是我们见过的混淆最多的一组概念。不过当去年AJAX技术如火如荼,AJAX框架层出不穷,而微软又推出ASP.NET AJAX框架之后,这四个概念之间的混淆也愈发严重起来了。我们经常能看到这样的问题:
这是非常典型的概念混淆,上面两句话的AJAX与AJAX.NET都应该使用ASP.NET AJAX替换。我们在学习AJAX相关技术时需要理解以下概念:
AJAX是Asynchronous JavaScript and XML缩写。这个概念代表的是一种技术,当您在说“我在项目中使用了AJAX技术时”,只是代表了您使用客户端XMLHttpRequest对象与服务器端进行异步通信。不过因为随着AJAX技术的运用往往会带来丰富的客户端效果,因此对AJAX技术的广义理解也可以认为这是一种操作客户端DOM而带来丰富效果的技术。
AJAX框架是一套辅助开发人员使用AJAX技术的代码包(库,etc.)。一个AJAX框架的目的一般是对XMLHttpRequest对象的使用进行封装,并提供一些操作DOM元素或者实现特殊效果的“捷径”。成熟的AJAX框架有很多,它们可以被分为“以客户端为中心”和“面向特定服务器技术”两大类。前者的优秀代表有(排名不分先后):Prototype、jQuery、Mootools、YUI、Dojo、EXTJS 2.0等等;而后者的典型代表有Anthem.NET、AJAX.NET、MagicAjax.NET和微软ASP.NET AJAX(最初为Atlas)(这几个对比参考);当然,也有优秀的AJAX框架面向其他服务器技术,呵呵这个我还没有了解。
AJAX.NET (Professional)是ASP.NET平台上著名的AJAX框架,诞生于2005年2月(虽然正式命名为AJAX.NET则是在两个月之后),作者为Michael Schwarz。同年10月,Michael为AJAX.NET提供了更丰富的功能(主要是安全性方面),并将其改名为AJAX.NET Professional。AJAX.NET提供的最主要的(也是唯一)的功能就是异步调用服务器端方法,可谓非常纯粹的“基于数据”的AJAX使用方式。这个框架是一个个人作品,有支持.NET 1.1和2.0的版本,它并不属于微软官方,目前已经停止更新。
ASP.NET AJAX的Code Name为“Atlas”,在CTP向Beta版转移时曾经发生过翻天覆地的变化。ASP.NET AJAX中包含了UpdatePanel等控件,可以非常透明地为现有的ASP.NET WebForms应用程序添加AJAX效果。此外还提供了客户端异步调用Web Services的方法,使开发人员也能够使用面向数据的方式使用AJAX技术。值得一提的是ASP.NET AJAX的“附属品”相当丰富。例如ASP.NET AJAX名为“Microsoft AJAX Library”的客户端部分是一个纯客户端AJAX框架,提供了面向对象类型系统、浏览器兼容层、异步通信层等多种基础组件;ASP.NET AJAX的开源扩展包“AJAX Control Toolkit”包含了数十个可以直接使用的AJAX服务器端控件,这样开发人员能够轻松地添加丰富的客户端效果。同时,官方还为ASP.NET AJAX提供了“非正式”地扩展包,其中的History等优秀控件也将加入未来版本的ASP.NET AJAX框架中。ASP.NET AJAX是官方出品的AJAX框架,目前已经被集成到ASP.NET 3.5中去了,因此其版本号也从ASP.NET AJAX 1.0一下子“跃升为”ASP.NET AJAX 3.5。如果您看到了这些版本号也请不要疑惑,其实ASP.NET AJAX 3.5相对于ASP.NET AJAX 1.0来说只是修补了一些细小bug,几乎没有任何变化。
<!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 type="text/javascript">
var XmlHttp = new ActiveXObject("Microsoft.XMLhttp");
function sendAJAX()
{
XmlHttp.Open("POST","receive.aspx",true);
XmlHttp.send(null);
XmlHttp.onreadystatechange=ServerProcess;
}
function ServerProcess()
{
if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')
{
document.getElementById('nameList').innerHTML =XmlHttp.responsetext;
}
}
setInterval('sendAJAX()',1000);
</script>
</head>
<body>
<div id="nameList"></div>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
PerformanceCounter myMemory = new PerformanceCounter();
myMemory.CategoryName = "Memory";
myMemory.CounterName = "Available KBytes";
string txtResult = "-->当前可用内存:" +myMemory.NextValue().ToString() + "KB";
Response.Write(DateTime.Now.ToLongTimeString() + txtResult);
}1、在B机上安装设备仿真程序
(1)先确保B机上已安装了Windows Install 3.0以上版本。
(2)Visual Studio 2005 安装光盘上的 wcu\ARM\vs_emulator.exe是设备仿真程序的安装向导,双击运行,然后按照提示进行操作。设备仿真程序默认安装在C:\Program Files\Microsoft Device Emulator\1.0文件夹下。DeviceEmulator.exe是设备仿真器程序,dvcemumanager.exe是设备仿真器管理器。
2、将A机上的内核映像文件复制到B机
设备仿真程序要模拟哪一种设备,就需要用到这种设备的内核映像文件(扩展名为bin)。在B机C:\Program Files\Microsoft Device Emulator\1.0文件夹下新建一个images文件夹,并根据需要将下面A机中的映像文件复制到这里。
Pocket PC 2003 SE的映像文件默认安装在C:\Program Files\Microsoft Visual Studio 8\SmartDevices\Emulators\Images\PocketPC\2003\2052文件夹下,文件名是PPC_2003_SE_CHS_ARMv4.bin。
Pocket PC 2003 SE VGA的映像文件默认安装在C:\Program Files\Microsoft Visual Studio 8\SmartDevices\Emulators\Images\PocketPC\2003\VGAPortrait\2052文件夹下,文件名PPC_2003_SE_VGA_CHS_ARMv4.bin。
Smartphone 2003 SE的映像文件默认安装在C:\Program Files\Microsoft Visual Studio 8\SmartDevices\Emulators\Images\Smartphone\2003\2052文件夹下,文件名SP_2003_SE_CHS_ARMv4.bin。
Smartphone 2003 SE QVGA的映像文件默认安装在C:\Program Files\Microsoft Visual Studio 8\SmartDevices\Emulators\Images\Smartphone\2003\QVGA\2052文件夹下,文件名SP_2003_SE_QVGA_CHS_ARMv4.bin。
因为我在A机中安装了Windows Mobile 5.0 Pocket PC SDK和Windows Mobile 5.0 Smartphone SDK,所以也可以找到相应映像文件。
中文CHS Windows Mobile 5.0 Pocket PC的映像文件默认安装在C:\Program Files\Windows CE Tools\wce500\Windows Mobile 5.0 Emulator Images for Pocket PC - CHS\Deviceemulation\0804文件夹下。
中文CHS Windows Mobile 5.0 Smartphone的映像文件默认安装在C:\Program Files\Windows CE Tools\wce500\Windows Mobile 5.0 Emulator Images for Smartphone - CHS\Deviceemulation\0804文件夹下。
英文Windows Mobile 5.0 Pocket PC的映像文件默认安装在C:\Program Files\Windows CE Tools\wce500\Windows Mobile 5.0 Pocket PC SDK\Deviceemulation\0409文件夹下。
英文Windows Mobile 5.0 Smartphone的映像文件默认安装在C:\Program Files\Windows CE Tools\wce500\Windows Mobile 5.0 Smartphone SDK\Deviceemulation\0409文件夹下。
3、将A机上的外观文件复制到B机
在设备仿真程序运行时,还可以为仿真程序指定外观文件,以获得更逼真的效果。每一种外观由三个bmp或png文件和一个xml 文件组成,并且保存在同一个文件夹下。xml文件是外观定义文件,三个bmp或png 图像文件分别显示仿真程序的默认外观、所有按钮均为按下状态的仿真程序外观和由一种颜色填充的每个按钮的区域。
在 B机的C:\Program Files\Microsoft Device Emulator\1.0文件夹下新建一个skins文件夹,并将A机中相应的外观文件复制到这里。
PocketPC2003和Smartphone 2003的外观文件在C:\Program Files\Microsoft Visual Studio 8\SmartDevices\Skins文件夹中。
Windows Mobile 5.0 Pocket PC的外观文件在C:\Program Files\Windows CE Tools\wce500\Windows Mobile 5.0 Pocket PC SDK\Deviceemulation文件夹下除0409子文件夹外其它的文件夹中。
Windows Mobile 5.0 Smartphone的外观文件在C:\Program Files\Windows CE Tools\wce500\Windows Mobile 5.0 Smartphone SDK\Deviceemulation文件夹下除0409子文件夹外其它的文件夹中。
4、在B机上安装Microsfot ActiveSync 4.2简体中文版
这主要是为了便于设备仿真程序与B机之间进行数据同步。
5、在B机上创建桌面快捷方式
(1)为C:\Program Files\Microsoft Device Emulator\1.0\dvcemumanager.exe创建桌面快捷方式“设备仿真器管理器”。
(2)C:\Program Files\Microsoft Device Emulator\1.0文件夹下DeviceEmulator.exe是设备仿真器程序,应该带参数运行。
主要开关参数如下:
os_image_file_name:指定仿真程序要使用的内核映像的路径和文件名称(*.bin 或 *.nb0)。除非使用 /s 开关启动,否则为必需的参数。
/skin skin_file_name:加载指定的外观文件。
/s filename:指定保存状态文件。如果没有指定任何 ROM 映像,则必须有 /s filename,仿真程序将从指定的保存状态文件还原。当该仿真程序退出时,它会将新状态保存到保存状态文件的最前面。
只要弄清楚了某种设备的映像文件和对应的外观文件,就可以创建该设备仿真程序的快捷方式。
以Pocket PC 2003 SE为例,先为DeviceEmulator.exe创建桌面快捷方式“Pocket PC 2003 SE”,然后修改该快捷方式的“目标”为:
"C:\Program Files\Microsoft Device Emulator\1.0\DeviceEmulator.exe" images\PPC_2003_SE_CHS_ARMv4.bin /skin skins\PocketPC_2003\2052\PocketPC_2003_Skin.xml
(3)如果弄不清映像文件与外观文件的对应关系,可打开A机的Visual Studio 2005查看。
依次点击“工具”—>“选项”—>“设备工具”—>“设备”,见图1:

图1
选中某一设备,点击“属性”按钮,见图2:

图2
点击“仿真器选项”按钮,可看到该种设备的映像文件名称,见图3:

图3
在“显示”选项卡中,可看到对应的外观文件,见图4:

图4
(4)如果在B机桌面了创建了多个设备仿真程序的快捷方式方式,会显得比较凌乱,应该把它们组织到程序菜单中比较好。
好了,客户的电脑上也有了Pocekt PC 2003模拟器。什么时候想测试程序,只要点击菜单启动模拟器,再通过ActiveSync将应用程序布署到模拟器上运行就行了。但每次测试时,都要部署一遍,并且客户对电脑操作又不太熟练,感觉还是有点儿麻烦。因此,客户又提出来,能不能再简单点儿呢?
答案是肯定的。只要用上前面提到的“/s”开关参数,就能解决这个问题。
6、将A机上的设备仿真程序保存状态文件复制到B机
设备仿真程序使用 .dess扩展名的文件,来保存设备仿真程序中所有的 RAM、ROM 和设置信息。因此,.dess 文件是还原保存状态时必需的唯一文件。我在A机上调试程序时,会将程序部署到A机上的设备仿真程序中。调试通过后,关闭设备仿真程序时,系统询问“退出之前保存仿真程序状态吗?”,此时选择“是”,将产生一个保存状态文件,默认情况下位于C:\Documents and Settings\<username>\Application Data\Microsoft\Device Emulator 下,文件名为{B
(1)在B机D盘上新建一个Emulator文件夹。
(2)将A机上的{B
(3)在B机的桌面上创建快捷方式“我的Pocekt PC
"C:\Program Files\Microsoft Device Emulator\1.0\DeviceEmulator.exe" /s d:\emulator\{B
这样,客户只要双击桌面上的“我的Pocekt PC