ajax 与Ext2框架在.net程序中的应用

最新推荐文章于 2024-05-07 14:23:27 发布

feer111

最新推荐文章于 2024-05-07 14:23:27 发布

阅读量452

点赞数

分类专栏： asp.net 文章标签： ajax 框架 ext .net asp.net triggers

asp.net 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

feer111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax 与Ext2框架在.net程序中的应用

一 .下面先对asp.net ajax做一个简单的介绍: asp.net ajax 的前身就是我们大家熟悉的Atlas ，后来被正式的纳入到vs框架中来。通过对asp.net ajax的应用，我们可以方便的将ajax的特性引入到项目中来，显著的提高用户体验。其实asp.net ajax的特点也是继承了微软产品一贯的特点，简单易用。功能强大。只需要掌握asp.net ajax的几个关键控件，就
复制链接

扫一扫