本來想寫一個初學 ajax的系列文章的但是完成了一篇後發現關於 ajax系列的文章早已是成泛濫之勢況且本人也沒那麼好的文筆去與牛人們媲美所以轉念一想倒不如踏踏實實地學習一段時間等運用到項目中之後寫一篇貨真價實的應用性的文章也算是為大家探探路這也是寫此篇文章的初衷隨著項目的深入我會繼續完善這篇文章希望能夠為園子裡的兄弟們做個參考
一 下面先對 ajax做一個簡單的介紹:
ajax 的 前身就是我們大家熟悉的Atlas 後來被正式的納入到vs框架中來通過對 ajax的應用 我們可以方便的將ajax的特性引入到項目中來顯著的提高用戶體驗其實 ajax的特點也是繼承了微軟產品一貫的特點簡單易用功能強大只需要掌握 ajax的幾個關鍵控件就可以應用到項目中來了 下面簡單的介紹一下 ajax的幾個關鍵控件
ScriptManager ScriptManager控件算是 ajax 控件中最重要的一個了所有的腳本都是通過ScriptManager來管理的 它的使用因該注意以下幾點 a 在一個頁面中有且只能有一個ScriptManager控件而且因該將它作為頁面的第一個控件（否則容易報莫名的異常 sys什麼什麼的）作為 的核心控件它對ajax控件中用到的腳本作統一的調度管理因此一些屬性的設置也至關重要AsyncPostBackTimeout 這個屬性決定了異步請求的時間限制如果你有比較復雜的異步請求調用就需要將這個屬性的值設置的大一些否則就小一些默認是毫秒AsyncPostBackError 是個事件代理當頁面中的異步請求調用出現異常就會觸發這個事件我們可以在這個事件中作我們自定義的處理AllowCustomErrorsRedirect這個屬性是bool型的設置當異常出現時是否給允許跳轉頁面 但是大部分的應用不必要設置這麼多內容我們要做的只是將控件拖放到頁面中
ScriptManagerProxy ScriptManagerProxy控件算是ScriptManager的助手當有母板頁存在的時候也就是它大派用場的地方了前面提到過每個頁面中只能放置一個ScriptManager控件但是在母板頁結構的應用中Contentpage裡如果有需要管理的腳本怎麼辦？？ 我們可以在母板頁中放置一個ScripManager頁面然後再在各個contentpage中放置 ScriptManagerProxy控件讓它來代理
ScriptManager的工作對ContentPage中的腳本進行管理這也許就是ScriptManagerProxy控件名稱的來由吧
UpdatePanel第三個要介紹的當然就是大名鼎鼎的UpdatePanel控件了 這個玩意兒真是有點意思不管你是什麼控件只要你往UpdatePanel控件的<ContentTemplate>中一放立馬搖身一變支持異步調用了UpdatePanel控件的屬性有UpdateModeTriggers等 updateMode用來設定異步觸發的時機（具體不再詳述）Triggers屬性用來設定UpdatePanel可以更新的控件（我們可以不將控件放置在UpdatePanel控件的<ContentTemplate>中而通過對Triggers屬性的設置來實現異步刷性的效果）
UpdateProgress: 做了異步刷信頁面可就不刷新了不能讓用戶干等著阿至少要讓用戶知道程序正在運行中不是?? 這時候UpdateProgress控件的作用就體現出來了通過對ProgressTemplate模板的設置我們可以在異步調用過程中顯示提示信息告訴用戶系統正在運行中另外DisplayAfter屬性也十分重要哦通過設置時限可以設定異步調用後多長時間顯示ProgressTemplate中的內容默認的可能是毫秒一些快的操作幾乎沒反應我是將DisplayAfter屬性設置為 一異步調用馬上就顯示ProgressTemplate 哈
至此 ajax的控件就介紹完了那麼在項目中究竟是怎麼用的呢? 我在項目中的做法是:
首先在Masterpage頁面中先添加ScriptManager控件然後在ContentPlaceHolder 位置加入 [NextPage]
Code
<head runat=server>
<title>母版</title>
</head>
<body>
<form id=form runat=server>
<! ScripManager控件放在最前面>
<asp:ScriptManager ID=ScriptManager runat=server>
</asp:ScriptManager>
<table class=pageCenterFull>
<tr>
<! 二級導航區域 >
<td id=tbMain runat=server class=tbMain align=center>
<! 將ContentPlaceHolder放在UpdatePanel控件的ContentTemplate中 >
<asp:UpdatePanel ID=UpdatePanel runat=server><ContentTemplate>
<! 頁面實質內容區域即除導航指示外的區域 >
<asp:ContentPlaceHolder ID=ContentPlaceHolder runat=server>
</asp:ContentPlaceHolder>
</ContentTemplate></asp:UpdatePanel> </td>
</tr>
</table>
<!這裡放 UpdateProgress 控件其中的內容在異步調用開始時現實在頁面中 DisplayAfter設置為一旦觸發異步調用馬上顯示 >
<asp:UpdateProgress ID=UpdateProgress runat=server DisplayAfter=>
<ProgressTemplate>
<div id=loadingmask class=LoadingMask>
</div>
<div id=loading class=LoadingLoading>
<div class=loadingindicator>
</div>
<div>
Loading</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
這樣寫效率暫且不論首先有一個好處所有用到這個母板頁的頁面都自動的具有了ajax的特性
在Contentpage頁面中添加ScriptManagerProxy 和UpdatePanel 控件細化頁面中異步調用的粒度
Code
<%@ Page Language=C# MasterPageFile=~/PageTemplates/PageTemplatemaster AutoEventWireup=true Inherits=BasePage Title=單位管理 %>
<asp:Content ID=Content ContentPlaceHolderID=ContentPlaceHolder Runat=Server>
<!在Content頁前部添加ScriptManagerProxy管理用到的代碼>
<asp:ScriptManagerProxy ID=ScriptManagerProxy runat=server>
</asp:ScriptManagerProxy>
<!頁面內部添加一個或多個UpdatePanel控件做更細粒度的異步刷新調用>
<asp:UpdatePanel ID=UpdatePanel runat=server><ContentTemplate>
具體應用
<ContentTemplate></asp:UpdatePanel></asp:Content>
[NextPage]還有一點需要注意的 異步調用刷新頁面時如果需要注冊腳本來彈出提示或作其他的這樣的語法 PageClientScriptRegisterStartupScript(thisGetType() Exist alert(已存在相同用戶！); true); 是不起作用的我們因該
用 ScriptManagerRegisterStartupScript(updatePanel thisGetType() key js true);這樣的語法來注冊 我在實際的應用中在Basepage中添加了這兩個方法
Code
using System;
using SystemData;
using SystemConfiguration;
using SystemWeb;
using SystemWebSecurity;
using SystemWebUI;
using SystemWebUIWebControls;
using SystemWebUIWebControlsWebParts;
using SystemWebUIHtmlControls;
namespace {
/**//// <summary>
/// 模板頁面的基類
/// </summary>
public class BasePage: SystemWebUIPage
{
public void Alert(string key string MsgUpdatePanel updatePanel)
{
string js = ExtonReady(function() {ExtMessageBoxalert(提示 + Msg + );});
ScriptManagerRegisterStartupScript(updatePanel thisGetType() key js true);
}
public void RegisStartupScript(string key string Msg UpdatePanel updatePanel)
{
// string js = alert( + Msg + );
ScriptManagerRegisterStartupScript(updatePanel thisGetType() key Msg true);
}
}
}
這樣調用注冊腳本方法時就比較方便了
至此 雖然不怎麼漂亮但是初步的ajax轉型就算成功了大家可能也發現了我注冊腳本中有ExtonReady(function() {ExtMessageBoxalert(提示 + Msg + );}) 一句這好像不是javascript語法哦 呵呵 為了系統美觀我在這裡應用了Ext腳本框架Ext最近可是足夠火而且它那美觀 超酷的界面也確實是令人愛不釋手但是真想把它玩兒轉了也不是一件容易的事情考慮到我也是剛剛接觸這個框架如果全上它的功能還真是有點招架不住考察後決定先從簡單入手先將Ext框架的提示框loading 以及tree控件功能利用起來雖然比較簡單但也是走了不少彎路記錄下來也算給大家一個參考吧
二 Ext框架的運用
[NextPage]Ext框架的核心文件有如下幾個: extalljsextbasejsextlangzh_CNjs以及Resources文件夾下的所有文件使用的時候要將他們都引用到頁面中來
Code
<script type=text/javascript src=<%=BCEngineSteedUtilitySysConfigApplicationPath%>/Ext/Js/extbasejs></script>
<script type=text/javascript src=<%=BCEngineSteedUtilitySysConfigApplicationPath%>/Ext/Js/extalljs></script>
<link rel=stylesheet type=text/css <%=BCEngineSteedUtilitySysConfigApplicationPath%>/Ext/Css/extallcss>
然後在注冊腳本時我們就可以用
Code
public void Alert(string key string MsgUpdatePanel updatePanel)
{
string js = ExtonReady(function() {ExtMessageBoxalert(提示 + Msg + );});
ScriptManagerRegisterStartupScript(updatePanel thisGetType() key js true);
}
這樣的語法來注冊對話框腳本
另外在做Tree的時候也遇到了比較奇怪的問題比如 總報 的錯誤經過研究是因為 Ie的問題需要在頁面中在 加上
<script type=text/javascript src=Ext/JS/localXHRjs></script>對LocalXhrjs的引用還有調試動態加載樹的時候遇到的 的錯誤這也是個比較奇怪的問題直接請求靜態頁面就報錯請求動態頁面就正常
From:http://tw.wingwit.com/Article/program/ASP/201311/21845.html
