用.Net實現基於CSS的AJAX開發(1)

來源:互聯網
上載者:User
前面我介紹了我做的.net版的Ajax庫(.NET下的簡單AJAX處理庫 ),現在要介紹的是一種開發模式:樣式綁定式驅動開發。
   樣式驅動是我自己命名的,(我也不知道它叫什麼,嘿嘿)以便區別目前的請求驅動式開發(如struts、webwork等)和事件驅動式開發(如asp.net、JSF等)。
  本文:
  1 簡介
   首先,讓我們來看看傳統的WEB開發流程:
   ·請求驅動: 最常見的一類WEB架構實現了以請求驅動的流程。一個HTTP請求近來,被一個通用的分發器Servlet
  (Dispather Servlet)分析,再被分發到一個對應的應用處理器。處理器依次處理UI特有的控制邏輯,調用業務對象和處理會
  話狀態,準備一個模型,再轉寄到視圖。
   ·事件驅動: 事件驅動架構的設計目標是將案頭UI編程中著名的事件驅動模式搬到WEB環境中來。其特徵是;對於如何將
  表單提交到URL、如何將URL映射到控制器這些問題它們不關心;在事件驅動的架構中,表單組件和監聽器聯絡在一起,監聽器
  通過事件開調用。而且,這類架構通常不打算實現可插拔的試圖技術來呈現給特定的模型對象,而是把WEB頁看作一寫列介面組
  件的組合物,每個組件可以保持自己的狀態,並且知道如何呈現自己,甚至可能使用不同介面皮膚。
   從上面可以看到一個是傳統的MVC架構是開發,一個是以頁面為中心的快速應用開發(RAD)兩者各有各的好處。
  
   樣式驅動式開發在請求驅動開發或事件驅動開發的基礎上進行簡單的封裝,在介面層融合了以上兩者概念優勢,它以最前台
  的介面層為基礎,通過CSS樣式或HTC事件綁定介面元素來執行相應後台業務,從而達到執行相應請求,處理相應的事件的目的
  。
   樣式驅動的優勢在於只需把前台元素賦予特定的樣式,即可實現特殊的動能以及特定的業務處理,從而減少編碼量和編譯的
  次數,具有“一次編寫,到處綁定”的特點。比傳統開發複用性更強。尤其是在AJAX大行其道的今天,在請求驅動架構或事件
  驅動現有架構的基礎上利用樣式綁定式開發基於AJAX的應用,你會發現你的AJAX程式的開發效率會提高很多,尤其是當反覆應
  用同一(或相似)後台邏輯的情況會更明顯,同樣,樣式綁定式開發對於面向服務式開發也具有很大的優勢。
  
  2 基於ASP.NET的樣式驅動開發
  
   樣式驅動的操作不依賴與後台實現,asp.net的runat=server可以魔法搬地將前台元素轉化為背景元素,不過這樣的轉化
  依賴於特定的元素和後台,比如<input type=text runat=server> 這樣確實是將input元素擴充成後台可以使用的伺服器元素
  了,但是對於後台來講他要在頁面對應的裡進行特定的處理,而且input type=text只能是input type=text也不可能擴充自己
  的功能。樣式驅動則可以把一切元素、控制項或控制項中的元素利用JS的強大功能在前台轉換為你想要的功能和效果,然後再送入
  原請求或自訂請求,從而彌補asp.net的一些不足,“一次編寫,到處綁定”的特點也為我們省去了多個頁面類寫重複代碼的
  諸多困擾。
  
   也許你會說不是有使用者控制項嗎,很抱歉,使用者控制項跟前台嚴重耦合,你將它拿到一個項目中也許派不上一點用場。
  
   那WEB控制項陳列庫呢?雖然能重用,跟使用者控制項比不耦合了,但是局限性太強,複雜度高,我覺得叫一個普通程式員寫一個帶模
  板項的DataGird能排序的,可以刪除、修改、上移下移]可以查看詳細資料的控制項出來是一件很費事的事。
  
   又有人說了,真笨,我直接拖一個DATAGRID然後再這個基礎上加按紐,模板列,排序,詳細串連好不好啊,還用特意做個
  控制項嗎?有很抱歉的告訴你,如果是1000個DATAGIRD,每一個都有這些功能的一種或幾種,那麼你後台夠寫的了,即使你抽象
  出一層、封裝出一個專門的DataGirdBuilder類,也夠複雜的,各種重載方法,暈。
  
   那麼使用樣式綁定式的開發就簡單了,給DataGird個排序的樣式(比如CssClass=sort),後台幾句代碼,或者乾脆不寫(
  你的準備比較充足),就可以了,再加個列變為刪除按鈕(比如其中的一個列裡ItemStyle CssClass="delbtn"),就可以了,
  別的DataGrid不需要排序,那麼樣式去掉。而後頁面類裡乾乾靜靜。樣式綁定後變化的元素傳值到統一的業務對象進行處理,
  一切都很規矩。
  
  3 實現
   利用我之前做過的AJAX庫,再結合javascript指令碼構建一個這樣的庫不成問題。自然,跟做燒飯做菜一樣,這裡選料非常的
  重要,這裡我要選用來自Dean Edwards和Tino Zijdel的事件操作指令碼庫(common.js)和Neil Cro~~~~y製作的樣式基本操作庫(
  css.js)來做好我們這道美味,噢,當然,還有大名鼎鼎的prototype.js庫.
  
  
   好了,,前台的製作工序基本完成。
   然後就是利用我前一陣子做的AJAX庫了。
   假設是刪除,QueryString: command=delrow&JS產生的參數……
   則後台調用AjaxDelRow.cs
  
  protected override void DoAjax()
  ...{
   // 搜集參數
   string parlist = request.Params["pars"];
   string[] paritem = parlist.Split('|');
   Hashtable hash = new Hashtable(paritem.Length);
   for(int i=0;i<paritem.Length-1;i++)
   ...{
   string[] paritempart = paritem[i].Split('^');
   hash.Add(paritempart[0],paritempart[1]);
   }
  
   bool isDeled = false;
   string table = request.Params["table"];
   // 判斷來源
   if(table!=null)
   ...{
   if(table.Equals("dgBigclassmanage")) //DATAGRID的ID號
   ...{
   // 調用對應業務外觀的DAO來刪除
   // hash["0"]為datagrid的第0列,假設第0列傳過來是ID值
   isDeled = (new BusinessFacade()).DeleteById(hash["0"].ToString());
   }
   if(isDeled)
   ...{
   Output("true");
   }
   else
   ...{
   Output("false");
   }
  }
  AjaxDelRow製作流程請參考.NET下的簡單AJAX處理庫



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.