.net環境下基於ajax的mvc方案

06-04

1、問題背景現在，越來越多人開始嘗試基於Ajax進行無刷新的Web開發，不過，在.Net環境下，應用Ajax並不是非常方便，這主要可能是由以下一些原因造成的：·由於Ajax基於javascript的本質，使得開發者必須對javascript非常了解，起碼，其javascript能力足以實現對callback返回內容對頁面的更新，所以開發的門檻就有一定程度的上升·當基於Ajax機制進行開發時，原有的基於postback方式下時，asp.net由後台邏輯代碼（Model），aspx頁面(View)、aspx.cs(Controller)構成的MVC構架其實失效了，當callback返回數據時，要麼在client端用javascript解析返回內容以實現更新，要麼則必須在server端構造好比較完整的html代碼，再直接由javascript將該構造好的html設置給某個頁面對象，很顯然，這樣一來，要實現一個最簡單的callback功能，都要不少代碼，並且是相對比較亂的代碼，即使在即將到來的asp.net2.0該問題依然不會得到有效解決2、本文目的本文旨在充分利於現有的asp.net本身的特點和ajax的特性，提出一個用於在asp.net環境下進行基於ajax的web開發的MVC方案，以實現以下主要目的：·Asp.Net環境下用於Ajax的清晰的MVC構架·降低編程人員對過多javascript編碼的依賴以降低編程門檻·靈活的支持ajax模式下的常用開發方式3、問題分析如何實現以上幾個主要目的呢？　１）要對xmlhttprequest對更良好的封裝，以使調用方式更簡單；　２）盡量在server端進行更新數據的構造，但是也要避免每次返回數據都手工構造，因此，就想到可以充分使用UserControl，由UserControl作為"View"，對應的由ascx.cs文件作為"Controller"，這樣構成的MVC也是比較清晰的；　4、問題解決基於以上思想，本人實現了以下一個組類庫以簡化該過程：源碼及範例下載代碼簡析：１）首先在client端，AjaxHelper.js封裝了xmlhttprequest，並提供一個將現有的<form>序列化為形如param1=v1&param2=v2&...形式用於post的參數；Updater(ajaxTemplate, output, params, onComplete)函數，用於實現一次callback調用ajaxTemplate（必選）：指定執行需要功能的UserControl路徑output（可選）：填充返回數據的指定標籤的引用或ID值params（可選）：形如param1=v1&param2=v2&...的post參數onComplete（可選）：可用於對返回數據進行特殊處理的回調函數，函數格式function(str)，str為返回的數據SerializeForm(form)函數，用於序列化<form>form：可以是對指定<form>的引用或ＩＤ值２）在server端，Ajax.aspx文件封裝了對由客戶端ajaxTemplate指定的UserControl的調用，其餘的具體邏輯功能則在特定的UserControl及其ascx.cs內實現；３）這樣，具體執行一次callback時，編程人員只需在頁面引用AjaxHelper.js，並在指定的位置通過javascript:Updater(ajaxTemplate, output, params, onComplete)進行調用，如果需要對某一form進行提交，則可調用javascript:SerializeForm(form)序列化該form並傳給params，當然也可以手動構造params，並指定將返回數據通過設置output應用的頁面或通過onComplete自定義處理。４）由於充分使用UserControl，意味著，可以充分利用asp.net原有的web伺服器端控制項和數據綁定機制，這樣其實，已經很大程度上簡化了返回數據的構造，在ascx.cs中，通過Request.Form[ParamName]就能訪問到client端傳入的params，再訪問邏輯代碼獲取源數據。5、範例包含在源碼中的範例實現了一個簡單的無刷新獲取博客園首頁內容到一個textarea的功能，詳見源碼！部分範例源碼：Default.aspx

@Pagelanguage="c#"Codebehind="Default.aspx.cs"AutoEventWireup="false"Inherits="CN.Teddy.AjaxHelper.WebForm1"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">

<HTML>

<HEAD>

<title>WebForm1</title>

<metaname="GENERATOR"Content="MicrosoftVisualStudio.NET7.1">

<metaname="CODE_LANGUAGE"Content="C#">

<metaname="vs_defaultClientScript"content="JavaScript">

<metaname="vs_targetSchema"content="http://schemas.microsoft.com/intellisense/ie5">

<scripttype="text/javascript"language="javascript"src="js/AjaxHelper.js"></script>

</HEAD>

<body>

<formid="Form1"method="post"runat="server">

<divid="view2">loading

</div>

<scripttype="text/javascript">

Updater(『AjaxTemplate/GetPageSrc『,『view2『,『url=http://www.cnblogs.com『);

</script>

</form>

</body>

</HTML>

AjaxHelper.js摘要：

varAjaxHelperUrl=newString("Ajax.aspx");

varUpdater=function(ajaxTemplate,output,params,onComplete)

{

if(typeofoutput==『string『)

{

output=$(output);

}

newAjax.Request(『Ajax.aspx『,{onComplete:function(transport){if(output!=null){output.innerHTML=FormatContent(transport.responseText);}if(onComplete!=null){onComplete(FormatContent(transport.responseText))}},parameters:params+『&AjaxTemplate=『+ajaxTemplate});

}

varSerializeForm=function(form)

{

returnForm.serialize(form);

}

varFormatContent=function(str)

{

varcontent=newString(str);

varprefix=newString("");

content=content.substring(content.indexOf(prefix,0)+prefix.length,content.length-9);

returncontent;

}UserControl GetPageSrc.ascx.cs摘要：

privatevoidPage_Load(objectsender,System.EventArgse)

{

lbUrl.Text=Request.Form["url"];

System.Net.WebClientclient=newSystem.Net.WebClient();

client.Headers.Add("User-Agent","Mozilla/4.0(compatible;MSIE6.0;WindowsNT5.1;.NETCLR1.1.4322)");

try

{

txtPageSource.Text=newSystem.IO.StreamReader(client.OpenRead(lbUrl.Text),System.Text.Encoding.UTF8).ReadToEnd();

}

catch(Exceptionex)

{

throwex;

}

Enjoy!//文章結束 posted on 2005-06-11 18:55 Teddy『s Knowledge Base 閱讀(2646) 評論(31) 編輯收藏 Feedback#re: .Net環境下基於Ajax的MVC方案 2005-06-12 21:33 賀星河寫得不錯：）關於Ajax技術的討論，我建議你可以和李錕（MSN：unruly_wind@sina.com）多多交流，他對此已經有很多的經驗，尤其是對http://maps.google.com的應用研究，當然，如果能夠得到你的聯繫方式更好了 #re: .Net環境下基於Ajax的MVC方案 2005-06-12 21:39 Teddy『s Knowledge Base 我的msn: teddyma#vip.sina.com(#請替換成@)，希望能和任何有共同興趣的朋友交流！ #re: .Net環境下基於Ajax的MVC方案 2005-06-13 14:36 ahnan 有研究過 ASP.NET 2.0 中的 Script Callback 嗎？有研究過 Ajax.NET, Ajax Library for .NET 嗎？我覺得你可以從上述方法中了解更多ajax 在 .NET 的應用實踐。 #re: .Net環境下基於Ajax的MVC方案 2005-06-13 14:42 Teddy『s Knowledge Base to ahnan: 你說的兩個東西都是對xmlhttprequest的不同封裝實現而已，我都花時間研究過，這兩個封裝和我的代碼在callback機制上本質是一樣的，我的代碼中的ajax封裝，基於prototype1.2的一個ajax實現，是與後台語言獨立的，調用方式也比你說的這兩個簡單，並且我的框架可以很容易的移植到非.net平台。而最重要的是，你說的這兩個ajax實現，會造成本文要解決的問題之一asp.net原有的mvc構架在這兩種應用模式下會被破壞，我的框架的設計初衷就是解決這一問題，重新搭建一個清晰的mvc。 #re: .Net環境下基於Ajax的MVC方案 2005-06-14 00:01 逐靈 Ajax Library for .NET 我剛剛看過它的一些功能演示和簡單的使用方法，第一感覺就是必須在Client端進行數據的綁定，覺得這比較麻煩。剛剛看過Teddy的，使數據在Server端綁定，確定方便了不少。不過剛剛沒有調試成功，現在正在找原因。個人愚見，沒仔細研究過，說錯了請指正。 #re: .Net環境下基於Ajax的MVC方案 2005-06-14 00:56 逐靈看了半天終於明天了Js裡面的運行過程，只是，好像沒辦法成功訪問ajdx.aspx文件。這是什麼原因呢？ #re: .Net環境下基於Ajax的MVC方案 2005-06-14 01:21 逐靈終於知道是怎麼回事了。 js裡面默認是用『Post『方式傳遞參數的，可是，不知道是因為什麼原因，合使用Post參數導致根本無法訪問到ajax.aspx文件，於是我改成用『get『方式，就可以了。請問這是什麼原因呢？發現『post『不行是因為我期間把請求源碼的地址改為『http://www.skycn.com『，它會返回一個關於『post『的錯誤頁面，於是就發現了這個問題。你們調試是不是這樣的呢？ #re: .Net環境下基於Ajax的MVC方案 2005-06-14 09:37 Teddy『s Knowledge Base 照道理get可以post應該也可以的，用post的話好處是可以避免用戶直接從地址欄訪問ajax.aspx，當然，也可以改一下js使得可以在get和post之間進行選擇。你的情況我沒遇到過，不過，通過get方式傳遞對參數長度有限制，一般應該在255個字元之內，post應該能大一點，你可以再試試能不能找到post錯誤的真正原因，找到原因的話希望能共享一下！ #re: .Net環境下基於Ajax的MVC方案 2005-06-15 16:12 jlzhou 感謝Teddy『s share! Net環境下基於Ajax的MVC方案，有沒有更新版呢？ #re: .Net環境下基於Ajax的MVC方案 2005-06-15 16:21 Teddy『s Knowledge Base 目前還沒有更新的版本，我的一個個人項目會完全基於該方案進行開發，會在開發的過程中不斷的完善這個方案，目標是能達到像 http://backbase.com/index.php 這個網站這樣的用戶體驗，由於我這個方案數據的填充構造基於UserControl，可以更多利用asp.net原有控制項的數據綁定能力，代碼量應該能減少不少！ #re: .Net環境下基於Ajax的MVC方案 2005-06-15 16:39 jlzhou 調試不能通過，只有一個loading...顯示就不動了。 #re: .Net環境下基於Ajax的MVC方案 2005-06-15 16:52 Teddy『s Knowledge Base 根據你調試機器的網速，loading的時間可能有長短，只要能編譯通過，就應該能正常運行的，我這兒在一個新的環境又試了下完全沒問題，建議按如下步驟調試該範例： 1、下載並解壓縮到某路經比如：d:AjaxHelper 2、為AjaxHelper目錄建一個虛擬目錄AjaxHelper 3、用VS.Net打開AjaxHelper.sln 4、編譯 5、將Default.aspx設為起始頁 6、按F5運行 7、頁面顯示loading...時請稍作等待，此時正在下載指定的網頁源碼 8、下載源碼完畢頁面會顯示源碼內容 #re: .Net環境下基於Ajax的MVC方案 2005-06-15 16:56 jlzhou 感謝指點，我就是按照上述步驟做的，可是還是不行，我再研究一下。再次感謝！ #re: .Net環境下基於Ajax的MVC方案 2005-06-15 20:10 jlzhou 又折騰了半天，死活都不行！我真笨！ #re: .Net環境下基於Ajax的MVC方案 2005-06-15 20:49 Teddy『s Knowledge Base 不要氣餒，你可以單步調試一下，包括對js，整個工程除了js之外手寫的有效的代碼可能還不到10行，應該比較容易能找出原因的。或者說說看你主要在哪一步出錯，是編譯不通過，還是運行時腳本報錯呢？ #re: .Net環境下基於Ajax的MVC方案 2005-06-15 21:25 jlzhou 哪也沒報錯，就是瀏覽器只有loading顯示，然後再也沒有任何動靜了。 #re: .Net環境下基於Ajax的MVC方案 2005-06-15 21:29 jlzhou 我剛剛修改了ajax.aspx的文件名，也不報錯，看來沒有callback來訪問這個文件。 #re: .Net環境下基於Ajax的MVC方案 2005-06-15 21:31 jlzhou 基本鎖定是js的問題。 #re: .Net環境下基於Ajax的MVC方案 2005-06-15 21:48 jlzhou 我的IE版本是6.0.2800.1106.xpsp2 #re: .Net環境下基於Ajax的MVC方案 2005-06-15 21:53 Teddy『s Knowledge Base 那確實比較奇怪，前面有位朋友也遇到過比較奇怪的問題，你參考他說的解決辦法試試，另外，你也可以看看默認情況下瀏覽default.aspx的ie的encoding是什麼，可以試試encoding在gb2312和utf-8間切換試試。另外在就是你可以在頁面的Updater函數前後加上try{}catch(ex){window.alert(ex)},看看是什麼錯誤！ #re: .Net環境下基於Ajax的MVC方案 2005-06-15 22:10 jlzhou 還是不行，加上 try{Updater(『AjaxTemplate/GetPageSrc『, 『view2『, 『url=http://www.smartprise.com『);}catch(ex){window.alert(ex)} 也不報錯，就是loading沒完。我的QQ是9842766 #re: .Net環境下基於Ajax的MVC方案 2005-06-15 22:13 jlzhou 默認情況下瀏覽default.aspx的ie的encoding是utf8，試試encoding在gb2312和utf-8間切換，IE右上角的小窗口圖標動個不停，IE窗口裡什麼都沒有。 #re: .Net環境下基於Ajax的MVC方案 2005-06-15 22:17 Teddy『s Knowledge Base 建議你還是對js進行下單步調試，這樣執行js過程中的錯誤都能被捕獲，需要先在ie的選項里開啟腳本調試，然後再vs.net裡面對js設斷點就可以了。不好意思，因馬上有點事要離開現在不能和你qq交流，如果還解決不了，明天白天和你qq吧，不過我很少qq，一般只用msn。 #re: .Net環境下基於Ajax的MVC方案 2005-06-16 09:06 藍色閃電呵呵，原來就是JS+XmlHttp+.NET的組合！用了這個技術很久，突然今天發現它有個新名字：Ajax，有意思！上面的兄弟： try{Updater(『AjaxTemplate/GetPageSrc『, 『view2『, 『url=http://www.smartprise.com『);}catch(ex){window.alert(ex)} 沒用的，訪問不到頁面並不是JS代碼發生異常，catch不到錯誤的！ #re: .Net環境下基於Ajax的MVC方案 2005-06-16 10:19 Teddy『s Knowledge Base 為AjaxHelper又寫了點使用範例，請訪問 http://www.cnblogs.com/teddyma/archive/2005/06/16/175298.html #re: .Net環境下基於Ajax的MVC方案 2005-06-19 11:48 microhf 好東西呀 #re: .Net環境下基於Ajax的MVC方案 2005-06-20 11:26 Teddy『s Knowledge Base 最近更新AjaxHelper0.4，新版本兼容0.3並新增支持Sps下的WebPart開發 http://www.cnblogs.com/teddyma/archive/2005/06/19/176859.html #re: .Net環境下基於Ajax的MVC方案 2005-06-30 13:18 tangle 調試成功，非常好用，感謝共享 #re: .Net環境下基於Ajax的MVC方案 2005-07-03 09:58 思源有發覺嗎？用Ajax做網站不能夠很好的被搜索引擎檢索，雖然是個很好的技術 #re: .Net環境下基於Ajax的MVC方案 2005-07-03 11:29 Teddy『s Knowledge Base @思源: 是不是search egine friendly的問題，其實看你的整個網站結構設計，比如，我可以通過site map和url rewrite重寫的形式暴露整個站點的頁面結構給搜索引擎，完全可以達到需要的效果！ #re: .Net環境下基於Ajax的MVC方案 2005-07-03 12:53 思源是的，不過覺得Ajax在OA或站點後台方面，可以帶來不少好處，個人觀點
推薦閱讀：

※三個簡單卻高分的球鞋搭配方案小白鞋購買指南
※一份思路清晰的用戶成長體系設計方案
※萬家文化披露趙薇找銀行借錢遭拒過程新交易方案資金槓桿降至8.8倍(17.2.16)
※梁振英重申在基本法起草時兩個普選方案中均無「公民提名」
※冬季保暖疊穿＇腫＇成熊？這7種搭配方案你必須Get到！

TAG:環境 | 方案 |