ephebe

2012-07-24

強固圖與MVC

  • 3851
  • 0
  • 2012-07-31

這段日子正在練習ASP.Net MVC，而我一向很喜歡思考用圖形來表現軟體。之前使用MVP模式時，也嘗試採用State Machine Diagram來表現UI的互動。到了MVC時代，Robustness Diagram似乎正符合它的需要。

源起

這段日子正在練習ASP.Net MVC，而我一向很喜歡思考用圖形來表現軟體。之前使用MVP模式時，也嘗試採用State Machine Diagram來表現UI的互動。到了MVC時代，Robustness Diagram似乎正符合它的需要。

ProtoTyping

我是拿NPetshop為樣本來修改，理由是它比較單純，沒有牽涉太多的技術。使用Pencil(http://pencil.evolus.vn/en-US/Home.aspx)繪出一點輪廓。

這是Home

這是Products

這是Items

這是Item

強固圖(Robustness Diagram)

強固圖是個不錯的分析圖形，分為三個部分。邊界類別(Boundary)，實體類別(Entity)，控制類別(Control)。為了三層架構，所以採用Entity就是Service層，Control意謂的是MVC的Controller類別，Boundary當然就是MVC的View了。圖形是用Dia(http://projects.gnome.org/dia/)畫的。

Home的左邊是Category與Item的列表，獨立成一個叫TreeMenu的Partial View。從Home或TreeMenu
都可以連到Products，連接線上的Category代表Url上參數。
這是Products，按下後可連至Items。
在Products與Items的上面，共用_Layout。_Layout裏面有兩個Partial View，BarFunction、BarCategory。BarCategory如同TreeMenu一樣，按下後會連至Products。BarFunction則有一個Search按鈕，按下後依據輸入的是product name或是item name，連至對應的頁面。

ASP.NET MVC RenderAction

使用RenderAction的好處就是，PartialView可以指定處理的Controller與Action，封裝性比較好。我所有的PartialView都是RenderAction。

ASP.NET MVC Area

我把NPetshop切分成幾個Area，ItemSelect、會員權限、Shopping，進貨。

ItemSelect的Area，包含了Products、Items、Item

Home頁面，有一個附屬的Partial View，TreeMenu，而且兩者共用HomeController。_Layout也算是共用的Partial View，但沒有自己的Controller，所以BarCategory、BarFunction雖然是它的PartialView，但有自己的Controller。

後記

這並不是一篇討論架構層面的文章，我想強調的是在設計ASP.Net MVC頁面時，可以使用的工具與觀念。其實在ASP.Net MVC中，不論Controller、View、PartialView、Area都可以抽換，所以怎麼規畫一個重複使用而且低藕高聚的頁面，是一個有趣的探討。