ASP.NET AJAX Framework 觀念與實作篇-ScriptManager 和 ScriptManagerProxy

    在您安裝了 ASP.NET AJAX 1.0的TOOLKIT(擴充套件),就可以很不費任何力氣,甚至程式開發人員可以連一行JavaScript都不用撰寫,就可以輕鬆的享受AJAX的非同步傳輸,也是因為這樣在微軟在2007年初推出了ASP.NET AJAX FrameWork,我就深深的愛上它,也很認真的去苦苦專研,雖然WEB RIA的新時代也來臨了,身為追求技術的愛好者,當然又需苦命的埋頭苦讀,微軟的新技術SIVERLIGHT…,但根據多位微軟的技術專家前輩的研判RIA的高峰期可能快者還需一兩年,也或許更久…而至少AJAX也是目前的主流WEB應用。

   在開發ASP.NET  AJAX 的 PAGE頁面第一個過程就是需要從工具箱DRAG-DROP ScriptManager控制項
ScriptManage_20081006
,而且一定要在所有控制項之前(一個頁面僅只能有一個ScriptManager),否者會發生例外(EXCEPTION),這個觀念相信很多人都有,而ScriptManager主要的作用就是要把ASP.NET AJAX CLIENT LIBRARY(JavaScript 函式庫)傳送到CLIENT端的BROWSER,所以UpdatePanel、UpdateProgress都需要這些JavaScrip Library,來實施Ajax的運作過程,而另外一個主體物件ScriptManagerProxy,它是在什麼情形下,最適合拿來應用呢?沒錯,就是在一個頁面需要兩個ScriptManager的情況,如MasterPage主板頁面的網頁(ContentPage也需要個別的JavaScript檔(.js檔)的函式),還有另外一種情形也常需要運用ScriptManager和ScriptManagerProxy的配合運用,就是客製UserControl(使用者控制項)並且UserControl的單獨頁面還會使用到JavaScript檔(.js檔)的函式。我這樣描述可能大家都亂了,我設計一個實作過程…

    首先簡單的新增Button UserControl (檔名為BtnUserControl.ascx)和JavaScript檔案(檔名為JScript.js)
 
BtnUserControlMake

BtnUserControlJS
,而BtnUserControl.ascx的功能就是很簡單的呼叫JavaScript檔(JScript.js)的函式。

接下來在BtnUserControl.ascx從工具箱拖拉一個Button控制項,它主要是用途是按下後在client端產生警告訊息(alert),畫面與程式碼如下

 BtnUserControl.ascx設計畫面與過程
 
BtnUserControlOK 

<%@ Control Language="C#" AutoEventWireup="true" 
CodeFile="BtnUserControl.ascx.cs"
 Inherits="BtnUserControl" %>

<asp:Button ID="Button1" runat="server" Text="請按我" 
    OnClientClick="JavaAlert('OneNet魔力小子!!')" />
<!-- 去呼叫 JScript.js 檔案裡的 函式 JavaAlert() ></script>  -->

在從工具箱拖曳ScriptManagerProxy控制項
BtnUserControlMake2

設定ScriptManagerProxy控制項的Scripts屬性為Jscript.js,用來載入JavaScript的宣告函式
BtnUserControlMake3 

Jscript.js的程式畫面

BtnUserControlJS_ok

 

再來在預設Default.aspx從工具箱拖曳一個UpdatePanel控制項至頁面,
再將剛剛新增的BtnUserControl.ascx拖曳至UpdatePanel控制項內
ScriptManageDefaultPage

最後執行結果
BtnUserControl_view_OK

原理:
ScriptManageProxy控制項是ScriptManager一種代理script元件,在ScriptManageProxy控制項的Scripts屬性所設定的JavaScript檔定義,最後都會在UserControl(使用者控制項)載入頁面時,自動被附加到ScriptManage的scripts屬性……


posted on 2008/10/7 02:07 | 我要推薦 | 閱讀數 : 2162 | 文章分類 [ ASP.NET AND AJAX ] 訂閱

Comments on this entry:

# re: ASP.NET AJAX Framework 觀念與實作篇-ScriptManager 和 ScriptManagerProxy
by Andy at 2009/7/20 下午 03:29 回覆

請問一下 魔力小子:
照你的方式測試都OK沒問題,但我有一個問題想請問您一下,上面的範例的 OnClientClick="JavaAlert('OneNet魔力小子!!')" 事件是寫在控制項裡面,如果我是寫在 Service 端的 OnClient 事件裡面 就沒辦法 正常Alert 出來訊息。

protected void Button1_Click(object sender, EventArgs e)
{
Response.Write("JavaAlert('TEST')");

}


請問如何解決呢 ??

  
# re: ASP.NET AJAX Framework 觀念與實作篇-ScriptManager 和 ScriptManagerProxy
by hatelove at 2009/7/20 下午 04:34 回覆

to Andy :

Andy可能要先瞭解一下網頁的生命週期,client端與server端的順序。

寫在aspx上Button的OnClientClick,在Render至網頁上時,變會註冊在button上的client端onclick事件上,呼叫javascript的function,然後去找相關的js有沒對應的function執行。

而您的寫法,是在server端的Button「OnClick」事件(不是OnClient唷),沒法子正常alert訊息的原因,是因為client端的code已經都執行完了,才會postback回server端,跑server端的事件週期。

加上您用response.write 只會print在頁面上,而不會呼叫js的alert。

建議您多瞭解一些client端與server端在Web form的模式底下執行的流程。

  
# re: ASP.NET AJAX Framework 觀念與實作篇-ScriptManager 和 ScriptManagerProxy
by Andy at 2009/7/20 下午 05:03 回覆

To:魔力小子
最近把專案移植到 VS 2005 AJAX ,USERCONTROL 裡面的 Alert 訊息都出不來,看到您的文章彷彿找到救星;
網頁生命週期這我暸,之所以要這麼寫是因為要到 SERVICE端執行程式,依照執行結果顯示不同訊息之前的寫法都是
Response.Write("<Script>alert('請輸入查詢條件【商品名稱】!');</Script>");
之前沒包 AJAX 是正常的,可是有了 ScriptManager控制項後使用("<Script>alert('TEST!');</Script>
會有問題。
  
# re: ASP.NET AJAX Framework 觀念與實作篇-ScriptManager 和 ScriptManagerProxy
by hatelove at 2009/7/20 下午 05:15 回覆

to Andy :

包了ajax,所有js都要透過scripmanager去註冊,

例如

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "LoadAjaxScript", _AJAXScript.ToString(), false);

其中_AJAXScript.ToString()即為您要寫的<Script>alert('請輸入查詢條件【商品名稱】!');</Script>

  
# re: ASP.NET AJAX Framework 觀念與實作篇-ScriptManager 和 ScriptManagerProxy
by Andy at 2009/7/22 下午 12:32 回覆

謝謝!可以了 !
  

回應:

標題:
姓名:
電子郵件: (將不會被顯示)
個人網頁:
 
 
Please add 1 and 2 and type the answer here: