iT邦幫忙

DAY 28
3

ASP.NET 由淺入深系列 第 28

91之ASP.NET由淺入深 不負責講座 Day28 - jQuery with Ajax in ASP.NET

前面幾篇文章提到了AJAX的概念,以及過渡時期偽裝型AJAX的UpdatePanel,
那究竟真正的ajax該怎麼寫呢?XMLHttpRequest?CallBack?

既然是從JavaScript為出發點去對Server進行Request,且將response的結果bind到DOM上,
那我們當然就從jQuery當作切入點囉。

jQuery幫我們把Ajax的功能包裝起來,讓我們可以很方便、直覺的使用Ajax的功能。

然而網路上與書籍的範例,大部分server端的處理都是PHP的,我們這篇文章就要介紹怎麼用jQuery的Ajax跟ASP.NET做結合。
jQuery官網,請參考:http://jquery.com/
我們這篇文章直接用實例來進行說明:

1.需求
範例的需求是,我們有兩個textbox,一個是ID,一個是Name, 當輸入ID改變時,要帶出Name的資料。(學會之後,就可以擺脫AutoPostBack=true,Text_Changed的方式啦...)

2.Server端處理Request方式
我把ID帶Name的程式碼,分別用三種方式來處理
(1).ashx(泛型處理常式)
(2).aspx(一般網頁頁面)
(3).asmx(Web Service)
為方便各位下載sample code後可以直接跑,
這邊的Name,就是取first name,加上js傳過來的第二個參數MiddleName:『middle』字樣,
last name的部分,則是測試Session值能否被Server端讀取到,所以再補上Session的值『91』來紀念代表從server端回傳的Name。

3.Server端處理Request作法,及Response方式
(1).ashx
-先新增一個泛型處理常式檔案,記得引用System.Web.SessionState與實作IReadOnlySessionState,我們才能在程式碼裡面讀到Session。
-接參數的部分,使用context.Request.Form["參數名稱]
-最後return的值,則是使用context.Response.Write(回傳值)
-圖示程式碼

(2).aspx
-先新增一個.aspx,接著只保留第一行<%@ Page %>那行
-在Page_Load的事件撰寫要處理的程式碼
-接參數的部分,使用的是Request.Form["參數名稱]
-最後return的值,則是直接Response.Write(回傳值)
-圖示程式碼

(3).asmx
-先新增一個.asmx,接著把[System.Web.Script.Services.ScriptService]取消註解
-新增一個public的method,叫做GetFullName,method上頭加上[WebMethod(EnableSession=true)],才能使用Session
-return的資料直接return即可,雖然return的型別是string,但是javascript實際接到的是xml格式的字串
-圖示程式碼

4. .aspx上的sample code
有了這三種處理ID回傳Name的程式後, 來看看我們的頁面要怎麼撰寫。網頁的部分,用三組來當試驗:

    <form id="form1" runat="server">
    <div>
        .ashx: first name<asp:TextBox ID="txtIDbyAshx" runat="server"></asp:TextBox>
        full name<asp:TextBox ID="txtNamebyAshx" runat="server"></asp:TextBox><br />
        
        .aspx: first name<asp:TextBox ID="txtIDbyAspx" runat="server"></asp:TextBox>
        full name<asp:TextBox ID="txtNamebyAspx" runat="server"></asp:TextBox><br />
        
        .ashx: first name<asp:TextBox ID="txtIDbyAsmx" runat="server"></asp:TextBox>
        full name<asp:TextBox ID="txtNamebyAsmx" runat="server"></asp:TextBox><br />
    </div>
    </form>

5.Client端使用jQuery的ajax功能,注意的地方:
(1)註冊在change事件
(2)Ajax option
-type:使用post
-url的部分,web service需加上method名稱
-傳入參數的部分,可用json,或一般字串使用『&』串接,如同一般的post或QueryString
-ajax成功的話,會進入success,失敗會進入error
-成功回傳的字串,在success的function(回傳值)
-web service回傳為XML格式,需自行parse使用

(3)圖示程式碼:

6.結論
ajax的能力未來一定得具備,因為不管是一般的html、畫面冗重的Web form、或是ASP.NET MVC,要等待Post的過程,對User來說都是種折磨。

既然沒有多難,就順手把它學起來吧!

In 91 it!! Sample Code: jQueryAjax.zip


上一篇
91之ASP.NET由淺入深 不負責講座 Day27 - AJAX.NET(3) UpdatePanel簡介
下一篇
91之ASP.NET由淺入深 不負責講座 Day29 - 泛型
系列文
ASP.NET 由淺入深30

2 則留言

0
player
iT邦大師 1 級 ‧ 2010-10-25 19:33:57

因為 .asmx(Web Service) 限定只能輸出成 XML的格式
如果要輕量化, 改用JSON的話
通常是使用 .ashx(泛型處理常式) 的方式去實做

例如使用Json.NET
http://json.codeplex.com/

此外在Web Service, 可以有多種的存取模式
Get, Post, 與 SOAP
記得應該是在 Web.Config 裡做設定
如果要方便測試的話, 可以把 Get 或 Post 打開

HTTP GET 及 HTTP POST 預設為停用
http://support.microsoft.com/kb/819267

就是91 iT邦研究生 4 級 ‧ 2010-10-26 09:24:24 檢舉

謝謝補充喔!
:P 如果沒要開給外部系統呼叫的話,我自己最常用的也是.ashx。

0
rup4ru88
iT邦新手 5 級 ‧ 2011-09-02 18:59:55

請問為什麼都用ashx?
我剛學,我都用aspx,因為我用ashx好像沒辦法輸出控制項?

就是91 iT邦研究生 4 級 ‧ 2011-09-23 20:04:47 檢舉

因為ashx就只是個http handler,乾淨、單純。
如果你需要Render server control的話,當然還是使用.aspx囉。

我要留言

立即登入留言