站长论坛

标题: .net ajax 与Ext2框架在.net程序中的应用 [打印本页]

作者: ajax 时间: 2008-10-25 23:57
标题: .net ajax 与Ext2框架在.net程序中的应用
本来想写一个初学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 位置加入 [NextPage]

Code
<head runat="server">
<title>母版5</title>
</head>
<body>
<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<table class="pageCenterFull">
<tr>

<td id="tbMain" runat="server" class="tbMain" align="center">

<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate></asp:UpdatePanel> </td>
</tr>
</table>


<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 
4 <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
5</asp:ScriptManagerProxy>
6 
7 <asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
8 具体应用
9
10<ContentTemplate></asp:UpdatePanel></asp:Content>
11
12

[NextPage]还有一点需要注意的：异步调用刷新页面时如果需要注册脚本来弹出提示或作其他的，这样的语法： 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框架的运用：

[NextPage]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的引用，还有调试动态加载树的时候遇到的的错误，这也是个比较奇怪的问题，直接请求静态页面就报错，请求动态页面就正常。

欢迎光临站长论坛 (http://www.tzlink.com/bbs/)