本来想写一个初学asp.net ajax的系列文章的.但是完成了一篇后发现关于asp.net ajax系列的文章早已是成泛滥之势.况且本人也没那么好的文笔去与牛人们媲美,所以转念一想,倒不如踏踏实实地学习一段时间等运用到项目中之后写一篇货真价实的应用性的文章.也算是为大家探探路,这也是写此篇文章的初衷。随着项目的深入，我会继续完善这篇文章，希望能够为园子里的兄弟们做个参考。
一 .下面先对asp.net ajax做一个简单的介绍:
asp.net ajax 的 前身就是我们大家熟悉的Atlas ，后来被正式的纳入到vs框架中来。通过对asp.net ajax的应用 ，我们可以方便的将ajax的特性引入到项目中来，显著的提高用户体验。其实asp.net ajax的特点也是继承了微软产品一贯的特点，简单易用。功能强大。只需要掌握asp.net ajax的几个关键控件，就可以应用到项目中来了。 下面简单的介绍一下asp.net ajax的几个关键控件：
1 ScriptManager： ScriptManager控件算是asp.net ajax 控件中最重要的一个了，所有的脚本都是通过ScriptManager来管理的
，它的使用因该注意以下几点： a 在一个页面中，有且只能有一个ScriptManager控件，而且因该将它作为页面的第一个控件（否则容易报莫名的异常 sys.什么什么的。）作为asp.net 的核心控件，它对ajax控件中用到的脚本作统一的调度管理。因此，一些属性的设置也至关重要，AsyncPostBackTimeout 这个属性决定了异步请求的时间限制，如果你有比较复杂的异步请求调用，就需要将这个属性的值设置的大一些，否则就小一些，默认是90秒。AsyncPostBackError 是个事件代理，当页面中的异步请求调用出现异常，就会触发这个事件，我们可以在这个事件中作我们自定义的处理，AllowCustomErrorsRedirect这个属性是bool型的，设置当异常出现时，是否给允许跳转页面。 但是大部分的应用不必要设置这么多内容，我们要做的只是将控件拖放到页面中。
2 ScriptManagerProxy： ScriptManagerProxy控件算是ScriptManager的助手。当有母板页存在的时候也就是它大派用场的地方了，前面提到过，每个页面中只能放置一个ScriptManager控件，但是在母板页结构的应用中，Contentpage里如果有需要管理的脚本怎么办？？ 我们可以在母板页中放置一个ScripManager页面，然后再在各个contentpage中放置 ScriptManagerProxy控件，让它来"代理"
ScriptManager的工作对ContentPage中的脚本进行管理。这也许就是ScriptManagerProxy控件名称的来由吧。
3 UpdatePanel：第三个要介绍的当然就是大名鼎鼎的UpdatePanel控件了 ，这个玩意儿真是有点意思，不管你是什么控件，只要你往UpdatePanel控件的<ContentTemplate>中一放，立马摇身一变支持异步调用了，UpdatePanel控件的属性有UpdateMode，Triggers等 。updateMode用来设定异步触发的时机（具体不再详述），Triggers属性用来设定UpdatePanel可以更新的控件（我们可以不将控件放置在UpdatePanel控件的<ContentTemplate>中，而通过对Triggers属性的设置来实现异步刷性的效果）。
4 UpdateProgress: 做了异步刷信页面可就不刷新了,不能让用户干等着阿,至少要让用户知道程序正在运行中不是?? 这时候UpdateProgress控件的作用就体现出来了.通过对ProgressTemplate模板的设置,我们可以在异步调用过程中显示提示信息告诉用户系统正在运行中.另外DisplayAfter属性也十分重要哦,通过设置时限可以设定异步调用后多长时间显示ProgressTemplate中的内容.默认的可能是500毫秒,一些快的操作几乎没反应,我是将DisplayAfter属性设置为0 ,一异步调用马上就显示ProgressTemplate 哈.
至此,asp.net ajax的控件就介绍完了.那么在项目中究竟是怎么用的呢? 我在项目中的做法是:
1 首先在Masterpage页面中先添加ScriptManager控件,然后在ContentPlaceHolder 位置加入
Code
<head runat="server">
<title>母版5</title>
</head>
<body>
<form id="form1" runat="server">
<!-- ScripManager控件放在最前面-->
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table class="pageCenterFull">
<tr>
<!-- 二级导航区域 -->
<td id="tbMain" runat="server" class="tbMain" align="center">
<!-- 将ContentPlaceHolder放在UpdatePanel控件的ContentTemplate中 -->
<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
<!-- 页面实质内容区域即除导航指示外的区域 -->
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate></asp:UpdatePanel> </td>
</tr>
</table>
<!--这里放 UpdateProgress 控件,其中的内容在异步调用开始时现实在页面中 DisplayAfter设置为0一旦触发异步调用马上显示 -->
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
<ProgressTemplate>
<div id="loading-mask" class="LoadingMask">
</div>
<div id="loading" class="Loading-Loading">
<div class="loading-indicator">
</div>
<div>
Loading</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
这样写效率暂且不论,首先有一个好处,所有用到这个母板页的页面都自动的具有了ajax的特性.
2 在Contentpage页面中添加ScriptManagerProxy 和UpdatePanel 控件细化页面中异步调用的粒度。
Code
1<%
@ Page Language="C#" MasterPageFile="~/PageTemplates/PageTemplate2.master" AutoEventWireup="true" Inherits="BasePage" Title="单位管理" %>
2<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
3 <!--在Content页前部添加ScriptManagerProxy管理用到的代码-->
4 <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
5</asp:ScriptManagerProxy>
6 <!--页面内部添加一个或多个UpdatePanel控件,做更细粒度的异步刷新调用-->
7 <asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
8 具体应用
9
10<ContentTemplate></asp:UpdatePanel></asp:Content>
11
12
还有一点需要注意的： 异步调用刷新页面时如果需要注册脚本来弹出提示或作其他的，这样的语法： Page.ClientScript.RegisterStartupScript(this.GetType(), "Exist", "alert('已存在相同用户！');", true); 是不起作用的。我们因该
用 ScriptManager.RegisterStartupScript(updatePanel, this.GetType(), key, js, true);这样的语法来注册： 我在实际的应用中在Basepage中添加了这两个方法
Code
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace {
/**//// <summary>
/// 模板页面的基类
/// </summary>
public class BasePage: System.Web.UI.Page
{
public void Alert(string key ,string Msg,UpdatePanel updatePanel)
{
string js = "Ext.onReady(function() {Ext.MessageBox.alert('提示', '" + Msg + "');})";
ScriptManager.RegisterStartupScript(updatePanel, this.GetType(), key, js, true);
}
public void RegisStartupScript(string key, string Msg, UpdatePanel updatePanel)
{
// string js = "alert('" + Msg + "')";
ScriptManager.RegisterStartupScript(updatePanel, this.GetType(), key, Msg, true);
}
}
}
这样，调用注册脚本方法时就比较方便了。
3 至此 ，虽然不怎么漂亮，但是初步的ajax转型就算成功了。大家可能也发现了。我注册脚本中有Ext.onReady(function() {Ext.MessageBox.alert('提示', '" + Msg + "');}) 一句，这好像不是javascript语法哦。 呵呵 ，为了系统美观，我在这里应用了Ext2.0脚本框架，Ext2.0最近可是足够火，而且它那美观 超酷的界面也确实是令人爱不释手。但是真想把它玩儿转了也不是一件容易的事情。考虑到我也是刚刚接触这个框架，如果全上它的功能还真是有点招架不住，考察后决定先从简单入手，先将Ext框架的提示框，loading 以及tree控件功能利用起来。虽然比较简单，但也是走了不少弯路，记录下来，也算给大家一个参考吧 。
二 . Ext框架的运用：
Ext框架的核心文件有如下几个: ext-all.js,ext-base.js,ext-lang-zh_CN.js以及Resources文件夹下的所有文件，使用的时候要将他们都引用到页面中来：
Code
<script type="text/javascript" src="<%=BC.Engine.Steed.Utility.SysConfig.ApplicationPath%>/Ext/Js/ext-base.js"></script>
<script type="text/javascript" src="<%=BC.Engine.Steed.Utility.SysConfig.ApplicationPath%>/Ext/Js/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="<%=BC.Engine.Steed.Utility.SysConfig.ApplicationPath%>/Ext/Css/ext-all.css">
然后在注册脚本时我们就可以用
Code
public void Alert(string key ,string Msg,UpdatePanel updatePanel)
{
string js = "Ext.onReady(function() {Ext.MessageBox.alert('提示', '" + Msg + "');})";
ScriptManager.RegisterStartupScript(updatePanel, this.GetType(), key, js, true);
}
这样的语法来注册对话框脚本。
另外，在做Tree的时候也遇到了比较奇怪的问题，比如 总报 ：
的错误，经过研究是因为 Ie7的问题，需要在页面中在 加上
<script type="text/javascript" src="Ext/JS/localXHR.js"></script>对LocalXhr.js的引用，还有调试动态加载树的时候遇到的
的错误，这也是个比较奇怪的问题，直接请求静态页面就报错，请求动态页面就正常。
三 最后效果：
呵呵 语无伦次的说了这么多，也不知道大家能看明白多少，废话不说了，把应用后系统的效果图贴出来秀一把。
loading 效果：
提示框效果：
这次应用改造还在进行中，大家如果看到哪里不妥欢迎指正，也欢迎大家一起探讨。
posted on 2008-07-09 00:38
DreamsHunter 阅读(1880)
评论(23) 编辑 收藏 所属分类:
新技术学习
评论
| 2008-07-09 01:14
不错啊!我觉得Ext2是个好东西,很强大!
| 2008-07-09 01:50
有了ExtJS2，基本上可以不用Asp.net AJAX了。另外，越来越反感把JS代码写到CS里了。
| 2008-07-09 05:15
@cnodin: 个人感觉Extjs的功能强大自不用说,但如果全部掌握并且应用自如还是需要些功夫的,从这方面看asp.net ajax的简单易用正好弥补了这个缺点,吸取各个方面的优点,做一个好系统,这就是我的初衷 :)
| 2008-07-09 05:16
@飞天小鱼: 确实很强大 . 难道是web操作系统的雏形么?? 呵呵
| 2008-07-09 08:14
Ext 几百k的js也太大了。
| 2008-07-09 08:16
貌似 只用ext2.0就可以了`` 不需要asp.net ajax了`
| 2008-07-09 09:24
更正个笔误：AsyncPostBackTimeout 默认是90s 不是90ms吧？
| 2008-07-09 09:26
@阿斯顿发撒甩掉发生非
呵呵 谢谢@阿斯顿发撒甩掉发生非兄的指正 .果然是笔误.
| 2008-07-09 09:38
我来好好学了，师哥厉害，小弟仰慕好咦！！
| 2008-07-09 09:41
@幽幽鹏
兄弟过奖过奖 .呵呵 瞎写而已.
| 2008-07-09 09:48
支持楼主，期待下文！
| 2008-07-09 10:52
排版在ff下面看起来怎么那么别扭啊。
| 2008-07-09 11:10
居中的文本看起来太费劲了。
| 2008-07-09 11:23
个人觉得如果将asp.net ajax和ext2.0混合来使用是很畸形的事情。
两者都是ajax的框架，ext2.0的UI表现更加标准规范，风格统一。
asp.net ajax我喜欢他的是后台实体类可以在前台js直接实例化。使用起来很方便。
EXT，我更喜欢他的是UI的表现力。毕竟他的控件，如:TREE，grid等的数据源是JSON,数组,或者xml等，那么放在asp.net ajax里面的话，我们就得拼接出这些控件能识别的格式（其实就是字符串）到前台。
如果在.net下想拥有比较好的UI表现，ASP.NET + EXT2.0这个选择应该不错。
| 2008-07-09 11:49
@john11111
asp.net ajax的一个优点就是不影响对其他ajax框架的应用,这样的话各取所长,我倒是觉得没有什么畸形的地方,毕竟没有所谓的标准. 何谈畸形呢? 只要达到效果,我觉得都可以哈.
| 2008-07-09 16:39
| 2008-07-09 16:44
谢谢@cnodin@gmail.com提供资料.
| 2008-07-10 09:14
我个人觉得ext2太重了，js、css文件有点大，但其UI控件实在太好了，不知有没有人，将其一些常用的UI的html代码整理出来？
| 2008-07-10 09:22
@要有好的心情
Ext的Ui都是通过脚本生成出来的. 剥离html好像效果不大.
| 2008-07-10 15:14
脚本生成的也可以剥离出html源文件，有个小工具叫fullsource，就两个文件：fullsource.html 和 FullSource.inf。主要是用
var win = external.menuArguments;
win.document.documentElement.outerHTML;来得到html。
我只整理了Ext 的form的html，效果还不错。
我看一些Ext演示网站，总感觉有点停顿。
| 2008-07-10 15:15
我看一些Ext演示网站，总感觉有点停顿。
| 2008-07-10 17:36
@要有好的心情
实际上我只用到了Ext的一部分功能，它的ExtForm ，Grid 会不会引起效率问题我也不确定所以，没敢直接使用 。 呵呵 我q 86394464 欢迎讨论
| 2008-07-11 11:13
微软的fans们（我也是），赶快也弄个象Ext的UI一样强的东西来吧，轻量级一点，这样我就不用整天为如何建立页面布局和theme发愁了