首頁 »
2009/12/29

Web Application Toolkit for FAQs 程式開發與架構解析

Web Application Toolkit for FAQs
本篇為祭司的微軟教學及錄影文章【邊做邊學 Web Application Toolkit 系列 4 - Web Application Toolkit for FAQs 程式開發與架構解析】。使用 Web Application Toolkit for FAQs 這個套件來架設 FAQs 網站十分快速容易,管理上也非常方便,幾乎不會遭遇太多困難,但如果欲探究其背後程式架構與運作原理,筆者個人覺得它堪稱是融合各種新技術的最佳典範,可為學習者挑戰自己對新技術理解與熟悉度的學習教材,本篇將為您揭開其中神秘的技術面紗。


【邊做邊學 Web Application Toolkit 系列 4 - Web Application Toolkit for FAQs 程式開發與架構解析】教學錄影請看微軟官方網站之網址:
http://msdn.microsoft.com/zh-tw/ee939373.aspx

一.程式架構解析
FAQs 程式專案主體是用 ASP.NET MVC 1.0 架構所設計,而後端資料管理維護介面及工作是用 Dynamic Data 所建構,UI 互動又運用了 ASP.NET AJAX 4.0 與 jQuery,而 URL 網址則使用 ASP.NET Routing 的自訂 Pattern 等等。因此對一般程式設計師而言,不熟 MVC、Dynamic Data 或 Routing 技術與原理,想要看懂這個專案,或進一步客製化修改程式就有相當高的門檻,所以本小節先概要解析整個專案組成技術,說明如下:
  • ASP.NET MVC 部分:ASP.NET MVC 主要是由 Model、View 與 Controller 三個功能區塊所組成,對應到專案的 Models、Views、Controllers 三個目錄,Model 主要負責是資料模型及資料來源存取程式,View 則是負責展現層 UI 的生成,Controller 則是輸入及輸出的控制器,擔任 View 與 Model 二者間互動的橋樑。
  • ASP.NET AJAX 4.0 與 jQuery:在 Scripts 資料夾中包含三大類的 JavaScript 檔,有 ASP.NET AJAX 4.0、jQuery 與 AjaxControlToolkit,透過 Ajax 來提供較佳之 Client 端使用者互動經驗,例如資料的呈現與更新。
  • ASP.NET Routing:ASP.NET Routing 是 Url 網址路由的一種技術,主要是在 Global.asax 註冊 Routing,定義您所需的 Routing Pattern,然後 Url 網址列輸入的路徑就可以導引到相對應的網址,而不一定是特定的 .aspx 實體檔。
  • Faqdb 資料庫:在 App_Data 資料夾中的 Faqdb.mdf 資料庫,主要是存放 Membership 及 FAQs 相關的資料表。
  • Models 資料夾:原本的 ASP.NET MVC 資料存取主要是在 Models 中撰寫相關程式,由 Model 來統籌,但在這 Models 資料夾中只定義相關的 Entities,例如 FaqModel、FaqItem 等等,它們只是代表資料的 Entity 型別,而非真正的資料存取程式。
  • Repository 資料夾:FAQs Toolkit 中真正的資料存程式是在 Repository 資料夾,裡面主體 LINQ to SQL 資料模型,而 FaqRepository.cs 類別提供對 LINQ to SQL 資料存取所需的種種方法,供 Controller 等程式呼叫。
  • Extensions 資料夾:Extensions 資料夾中則是一些 C# 3.0 或 VB 9 的 Extensions 擴充程式定義。
  • Helpers 資料夾:這裡只有 SlugHelper.cs 檔,裡面定義了三個 Slug 輔助的方法。
  • Dynamic-Data 部分:在 Dynamic-Data 資料夾中包括了 PageTemplates、FieldTemplates 與 CustomTemplates 三個資料夾,這三個資料夾是 Dynamic-Data 技術必定會產生的樣板,而 PageTemplates 資料夾中放的是生成 Page 頁面相關的 .aspx 程式,FieldTemplates 資料夾中放的是產生 Field 資料欄位樣板的 .ascx 控制項,CustomTemplates 資料夾是客製化 Page 頁面的 .aspx 程式。


圖1 FAQ Toolkit 專案目錄及程式

二.FAQ 資料庫與 LINQ to SQL 資料模型解說

在切入 FAQs Toolkit 專案程式之前,讓我們先來了解一下 FAQ 資料庫與 LINQ to SQL 資料模型(Data Model),以下是說明:

  1. Faqdb 資料庫

    Faqdb 資料庫中可分為兩大類資料表,一是 ASP.NET 帳號的 Membership 資料表,二是 FAQs 相關資料表,下面為資料庫的關係圖。


    圖2 Faqdb 資料庫

     

  2. Repository 資料夾下的資料模型及各個程式作用

    FAQ s Toolkit 的資料存取程式並不是用傳統的 ADO.NET,而是使用 LINQ to SQL 的 O/R Mapping 技術,透過 LINQ to SQL 或 Entity Framework 新世代技術存取資料庫,好處是不必理會資料庫連線等底層的宣告,又可以以 LINQ 語法輕鬆存取資料庫程式。

  • LINQ to SQL 資料模型

    使用 LINQ to SQL 第一個步驟是建立 dbml 的資料模型,這裡在 FaqDataContext.dbml 資料模型中加入了 Faq、Topic 與 RelatedFaq 三個 Entities,而所謂的 Entity 其實是宣告一堆 Properties 屬性的 Class,裡面可以保存從資料庫讀取的資料,某種程度來講,你可以視之為資料庫的 Faq、Topic 與 RelatedFaq 資料表對應。


    圖3 LINQ to SQL 資料模型

     

  • LINQ to SQL 資料存取程式

    Repository 資料夾中共有 IFaqRepository.cs、FaqRepository.cs、Faq.cs、Topic.cs、RelatedFaq.cs 五支程式,其中真正負責資料存取的是 FaqRepository.cs 程式,以下列舉其中一個讀取所有 Topic 的方法,它是以 LINQ to SQL 語法所撰寫;而其他的方法也都是用 LINQ to SQL 語法所撰寫,您可直接參考原始程式,在此就不另行列出了。

C# 語法:
public Topic RetrieveTopic(string topicSlug)
{
using (var faqDb = new FaqDataContext(this.connectionString))
{
faqDb.DeferredLoadingEnabled = false;

return faqDb.Topics.SingleOrDefault(t => t.Slug == topicSlug);
}
}
VB 語法:
Public Function RetrieveTopic(ByVal topicSlug As String) As Topic Implements IFaqRepository.RetrieveTopic
Using faqDb = New FaqDataContext(Me.connectionString)
faqDb.DeferredLoadingEnabled = False

Return faqDb.Topics.SingleOrDefault(Function(t) t.Slug = topicSlug)
End Using
End Function

至於 Faq.cs、Topic.cs、RelatedFaq.cs 這三支程式是 Dynamic Data 所用到的,裡面就是附加一些 MetaData 宣告,對 Scaffolding 進行一些設定,例如以下為 Topic.cs 程式宣告:

C# 語法:
[MetadataType(typeof(TopicMetadata))]
public partial class Topic
{
private class TopicMetadata
{
[ScaffoldColumn(false)]
public object Id { get; set; }

[UIHint("TopicNameText")]
public object Name { get; set; }

[DisplayName("FAQs")]
public object Faqs { get; set; }
}
}
VB 語法:
 

三.ASP.NET MVC 主程式

FAQs Toolkit 程式的主體是以 ASP.NET MVC 來設計的,包括所有呈現給一般使用的者的頁面都是由 MVC 來負責,MVC Framework 運作的方式和傳統的 ASP.NET WebForm 是不同的,所有的 Url Request 請求都是由 Controller 集中處理,Controller 程式本身再決定以哪個 View 來回應顯示給前端使用者,因此 Request 和 .aspx 實體檔案之間不會存在絕對的對應關係。


圖4 MVC 關係圖

例 如在網址列輸入一段 Url「http://localhost:6312/Faq/bidding-and-buying」,其中 Faq 代表 FaqController,「bidding-and-buying」代表傳入 FaqController 中方法的參數,至於實際上是呼叫哪一個方法,則必須從 AppRoutes.cs 中的 Routing Pattern 和 FaqController 程式來合併判斷,例如查詢 AppRoutes.cs 中的 RegisterRoutes 方法,Url 符合以下的「Faq/{topicSlug}」Routing Pattern,其中「controller = "Faq"」表示呼叫 FaqController,「action = "ListFaqs"」,可以判定它是呼叫 ListFaqs 方法,最終 ListFaqs 方法又會呼叫 ViewFaqListFaqs.aspx 程式來生成頁面,MVC 運作的模式大致上是如此。


圖5 ASP.NET Routing Pattern

ListFaqs 方法程式:
public ActionResult ListFaqs(string topicSlug)
{
var model = new FaqModel>();

var topic = this.faqRepository.RetrieveTopic(topicSlug);

model.BreadcrumbItems = new[]
{
new BreadcrumbItem { Selected = false, Title = "Home", Class = "Topics", Link = this.BuildUrlFromExpression(c => c.Index()) },
new BreadcrumbItem { Selected = true, Title = "Topic: " + topic.Name, Link = this.BuildUrlFromExpression(c => c.Rss(topic.Slug)), RssEnabled = true }
};

var faqs =
this.faqRepository.
RetrieveFaqs(topicSlug).
Select(f => this.GetFaq(f, true));

model.Items = faqs;

return this.GetProperActionResult(model, View(model));
}

四.Dynamic Data 與後台管理功能

在 ASP.NET MVC 主體程式之外,又混合運用 Dynamic Data 機制,但這豈不是增加了程式的複雜度?表面上看去的確如此,因為您必須同時懂 MVC 與 Dynamic Data 兩種技術原理,本身就具備了一定難度。

然 而 FAQs Toolkit 使用 Dynamic Data 真正的原因,是著眼點在於快速建構管理人員所需的後台表單與資料 CRUD 維護功能,因為 Dynamic Data 可提供現成的 Scaffolding 機制就可以迅速構構完成。如果使用 ASP.NET MVC 機制,必須撰寫大量程式,故為了達到事半功倍的效果,才策略性引入 Dynamic Data 機制簡化程式開發工作與時程。

五.Ajax 與 JavaScript 程式

FAQs Toolkit 中運用了 ASP.NET AJAX 4.0、jQuery 與 AjaxControlToolkit 三大 Ajax 技術,用以提供較佳之 Client 端使用者互動經驗,同時也示範了新一代 Ajax 程式語法,其中最具代表性的是 ViewFaq ClientSideTemplates.ascx 程式,它使用了 ASP.NET AJAX 4.0的AJAX Template 語法,其中 {{Uri}} 和 {{Name}} 就是動態資料繫結的資料欄位,如此便可製造出 JavaScript 的 DataBinding 資料繫結效果。


     



View Questions by Topic



六.結論

FAQs Toolkit 做為一個快速 FAQs 常見問題架設網站是十分容易的,但就程式面而言,它是十分複雜的,因為它同時運用多種異質技術於一身,不是隨便看一眼便能了解的。不過由於它融合多種新世 代技術於一身,可算是十分不錯的 ASP.NET 4.0 與 ASP.NET AJAX 4.0 範例程式,建議您可以先從單一技術理解,例如先搞懂 MVC,再來學習 Dynamic Data 如何運用,弄清 ASP.NET Routing 是如何設定與運作,最後把 ASP.NET AJAX 4.0 及 jQuery 語法熟悉一下,然後再集大成,您便可完全領略 FAQs Toolkit 程式設計精神與典範了。



Web Application Toolkit for FAQs 簡介與操作示範←上一篇 │首頁│ 下一篇→Web Application Toolkit for Template Driven Email簡介與操作示範
本文引用網址: