|
1、問題背景
現(xiàn)在，越來越多人開始嘗試基于Ajax進行無刷新的Web開發(fā)，不過，在.Net環(huán)境下，應用Ajax并不是非常方便，這主要可能是由以下一些原因造成的： ·由于Ajax基于javascript的本質，使得開發(fā)者必須對javascript非常了解，起碼，其javascript能力足以實現(xiàn)對callback返回內容對頁面的更新，所以開發(fā)的門檻就有一定程度的上升 ·當基于Ajax機制進行開發(fā)時，原有的基于postback方式下時，asp.net由后臺邏輯代碼（Model），aspx頁面(View)、aspx.cs(Controller)構成的MVC構架其實失效了，當callback返回數據時，要么在client端用javascript解析返回內容以實現(xiàn)更新，要么則必須在server端構造好比較完整的html代碼，再直接由javascript將該構造好的html設置給某個頁面對象，很顯然，這樣一來，要實現(xiàn)一個最簡單的callback功能，都要不少代碼，并且是相對比較亂的代碼，即使在即將到來的asp.net2.0該問題依然不會得到有效解決 2、本文目的 本文旨在充分利于現(xiàn)有的asp.net本身的特點和ajax的特性，提出一個用于在asp.net環(huán)境下進行基于ajax的web開發(fā)的MVC方案，以實現(xiàn)以下主要目的： ·Asp.Net環(huán)境下用于Ajax的清晰的MVC構架 ·降低編程人員對過多javascript編碼的依賴以降低編程門檻 ·靈活的支持ajax模式下的常用開發(fā)方式 3、問題分析 如何實現(xiàn)以上幾個主要目的呢？ ?。保┮獙mlhttprequest對更良好的封裝，以使調用方式更簡單； ２）盡量在server端進行更新數據的構造，但是也要避免每次返回數據都手工構造，因此，就想到可以充分使用UserControl，由UserControl作為"View"，對應的由ascx.cs文件作為"Controller"，這樣構成的MVC也是比較清晰的； 4、問題解決 基于以上思想，本人實現(xiàn)了以下一個組類庫以簡化該過程： 源碼及范例下載 代碼簡析： １）首先在client端，AjaxHelper.js封裝了xmlhttprequest，并提供一個將現(xiàn)有的<form>序列化為形如param1=v1¶m2=v2&...形式用于post的參數； Updater(ajaxTemplate, output, params, onComplete)函數，用于實現(xiàn)一次callback調用 ajaxTemplate（必選）：指定執(zhí)行需要功能的UserControl路徑 output（可選）：填充返回數據的指定標簽的引用或ID值 params（可選）：形如param1=v1¶m2=v2&...的post參數 onComplete（可選）：可用于對返回數據進行特殊處理的回調函數，函數格式function(str)，str為返回的數據 SerializeForm(form)函數，用于序列化<form> form：可以是對指定<form>的引用或ＩＤ值 ２）在server端，Ajax.aspx文件封裝了對由客戶端ajaxTemplate指定的UserControl的調用，其余的具體邏輯功能則在特定的UserControl及其ascx.cs內實現(xiàn)； ３）這樣，具體執(zhí)行一次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、范例 包含在源碼中的范例實現(xiàn)了一個簡單的無刷新獲取博客園首頁內容到一個textarea的功能，詳見源碼！ 部分范例源碼： Default.aspx   <% @ Page language="c#" Codebehind="Default.aspx.cs" AutoEventWireup="false" Inherits="CN.Teddy.AjaxHelper.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>WebForm1</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <script type="text/javascript" language="javascript" src="js/AjaxHelper.js"></script> </HEAD> <body> <form id="Form1" method="post" runat="server"> <div id="view2">loading </div>  <script type="text/javascript">  Updater(‘AjaxTemplate/GetPageSrc‘, ‘view2‘, ‘url=http://www.cnblogs.com‘); </script>  </form> </body> </HTML> AjaxHelper.js摘要：  var AjaxHelperUrl = new String("Ajax.aspx");    var Updater = function(ajaxTemplate, output, params, onComplete)  {  if (typeof output == ‘string‘)  {  output = $(output);  }    new Ajax.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 });  }    var SerializeForm = function(form)  {  return Form.serialize(form);  }    var FormatContent = function(str)  {  var content = new String(str);  var prefix = new String("<!--AjaxContent-->");  content = content.substring(content.indexOf(prefix, 0) + prefix.length, content.length - 9);  return content;  }UserControl GetPageSrc.ascx.cs摘要：  private void Page_Load(object sender, System.EventArgs e)   { lbUrl.Text = Request.Form["url"];  System.Net.WebClient client = new System.Net.WebClient (); client.Headers.Add("User-Agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)"); try  { txtPageSource.Text = new System.IO.StreamReader(client.OpenRead(lbUrl.Text), System.Text.Encoding.UTF8).ReadToEnd(); } catch(Exception ex)  { throw ex; } } Enjoy! //文章結束 Feedback寫得不錯：） 關于Ajax技術的討論，我建議你可以和李錕（MSN：unruly_wind@sina.com）多多交流，他對此已經有很多的經驗，尤其是對http://maps.google.com的應用研究，當然，如果能夠得到你的聯(lián)系方式更好了 終于知道是怎么回事了。 js里面默認是用‘Post‘方式傳遞參數的，可是，不知道是因為什么原因，合使用Post參數導致根本無法訪問到ajax.aspx文件，于是我改成用‘get‘方式，就可以了。請問這是什么原因呢？ 發(fā)現(xiàn)‘post‘不行是因為我期間把請求源碼的地址改為‘http://www.‘，它會返回一個關于‘post‘的錯誤頁面，于是就發(fā)現(xiàn)了這個問題。 你們調試是不是這樣的呢？ 目前還沒有更新的版本，我的一個個人項目會完全基于該方案進行開發(fā)，會在開發(fā)的過程中不斷的完善這個方案，目標是能達到像 http:///index.php 這個網站這樣的用戶體驗，由于我這個方案數據的填充構造基于UserControl，可以更多利用asp.net原有控件的數據綁定能力，代碼量應該能減少不少！ 還是不行，加上 try{Updater(‘AjaxTemplate/GetPageSrc‘, ‘view2‘, ‘url=http://www.‘);}catch(ex){window.alert(ex)} 也不報錯，就是loading沒完。 我的QQ是9842766 呵呵，原來就是JS+XmlHttp+.NET的組合！ 用了這個技術很久，突然今天發(fā)現(xiàn)它有個新名字：Ajax，有意思！ 上面的兄弟： try{Updater(‘AjaxTemplate/GetPageSrc‘, ‘view2‘, ‘url=http://www.‘);}catch(ex){window.alert(ex)} 沒用的，訪問不到頁面并不是JS代碼發(fā)生異常，catch不到錯誤的！ 最近更新AjaxHelper0.4，新版本兼容0.3并新增支持Sps下的WebPart開發(fā) http://www.cnblogs.com/teddyma/archive/2005/06/19/176859.html |
|
|
