程式師世界 >> 編程語言 >> C語言 >> 關於C語言 >> 用Visual C#實現MVC模式的簡要方法

用Visual C#實現MVC模式的簡要方法

編輯：關於C語言

visual　　在我們的開發項目中使用MVC（Model-VIEw-Control）模式的益處是，可以完全降低業務層和應用表示層的相互影響。此外，我們會有完全獨立的對象來操作表示層。MVC在我們項目中提供的這種對象和層之間的獨立，將使我們的維護變得更簡單使我們的代碼重用變得很容易（下面你將看到）。

　　作為一般的習慣，我們知道我們希望保持最低的對象間的依賴，這樣變化能夠很容易的得到滿足，而且我們可以重復使用我們辛辛苦苦寫的代碼。為了達到這個目的我們將遵循一般的原則“對接口編成，而不是對類”來使用MVC模式。

　　我們的使命，如果我們選擇接受它．．．

　　我們被委任構建一個ACME 2000 Sports Car項目，我們的任務是做一個簡單的Windows畫面來顯示汽車的方向和速度，使終端用戶能夠改變方向，加速或是減速。當然將會有范圍的擴展。

　　在ACME已經有了傳言，如果我們的項目成功，我們最終還要為ACME 2 Pickup Truck 和ACME 1 Tricycle開發一個相似的接口。作為開發人員，我們也知道ACME管理團隊最終將問“這樣是很棒的，我們能夠在我們的intranet上看到它？”所有的這些浮現在腦海中，我們想交付一個產品，使它能夠容易的升級以便能夠保證將來我們能夠有飯吃。

　　所以，同時我們決定“這是使用MVC的一個絕好情形”

　　我們的構架概要

　　現在我們知道我們要使用MVC，我們需要指出它的本質。通過我們的試驗得出MVC的三個部分：Model，Control和View。在我們的系統中，Model就是我們的汽車，VIEw就是我們的畫面，Control將這兩個部分聯系起來。

　　為了改變Model（我們的ACME 2000 sports car），我們需要使用Control。我們的Control將會產生給Model（我們的ACME 2000 sports car）的請求，和更新View，VIEw就是我們的畫面（UI）。

　　這看起來很簡單，但是這裡產生了第一個要解決的問題：當終端用戶想做一個對ACME 2000 sports car一個改變將會發生什麼，比如說加速或是轉向？他們將通過VIEw（our Windows form）用Control來提出一個變化的申請。

　　現在我們就剩下一個未解決問題了。如果View沒有必要的信息來顯示Model的狀態怎麼辦？我們需要再在我們的圖中加入一個箭頭：VIEw將能申請Model的狀態以便得到它要顯示的相關狀態信息。

　　最後，我們的最終用戶（司機）將會和我們的ACME Vehicle Control系統通過View來交互。如果他們想發出一個改變系統的申請，比如提高一點加速度，申請將會從VIEw開始發出由Control處理。

　　Control將會向Model申請改變並將必要的變化反映在View上。比如，如果一個蠻橫的司機對ACME 2000 Sports Car做了一個"floor it"申請，而現在行駛的太快不能轉向，那麼Control將會拒絕這個申請並在VIEw中通知，這樣就防止了在交通擁擠是發生悲慘的連環相撞。

　　Model (the ACME 2000 Sports Car) 將通知View 它的速度已經提高，而VIEw也將做適當的更新。

　　綜上，這就是我們將構建的概要：

　　開始

　　作為總是想的遠一點的開發人員，我們想讓我們的系統有一個長久並且良好的生命周期。這就是說能夠進可能的准備好滿足ACME的很多變化。為了做到這一點，我們知道要遵循兩條原則．．．“保證你的類低耦合”，要達到這個目標，還要“對接口編程”。

　　所以我們要做三個接口（正如你所猜測，一個Model接口，一個VIEw接口，一個Control接口）。

　　經過很多調查研究，和與ACME人的費力咨詢，我們得到了很多有關詳細設計的信息。我們想確定我們可以設置的最大速度在前進，後退和轉彎中。我們也需要能夠加速，減速，左轉和右轉。我們的儀表盤必須顯示當前的速度和方向。

　　實現所有這些需求是非常苛刻的，但是我們確信我們能夠做到．．．

　　首先，我們考慮一下基本的項目。我們需要一些東西來表示方向和轉動請求。我們做了兩個枚舉類型：AbsoluteDirection 和 RelativeDirection。

public enum AbsoluteDirection
{
　North=0, East, South, West
}
public enum RelativeDirection
{
　Right, Left, Back
}

　　下面來解決Control接口。我們知道Control需要將請求傳遞給Model，這些請求包括：Accelerate, Decelerate, 和 Turn。我們建立一個IVehicleControl接口，並加入適當的方法。

public interface IVehicleControl
{
　void Accelerate(int paramAmount);
　void Decelerate(int paramAmount);
　void Turn(RelativeDirection paramDirection);
}

　　現在我們來整理Model接口。我們需要知道汽車的名字，速度，最大速度，最大倒退速度，最大轉彎速度和方向。我們也需要加速，減速，轉彎的函數。

public interface IVehicleModel
{
　string Name{ get; set;}
　int Speed{ get; set;}
　int MaxSpeed{ get;}
　int MaxTurnSpeed{ get;}
　int MaxReverseSpeed { get;}
　AbsoluteDirection Direction{get; set;}
　void Turn(RelativeDirection paramDirection);
　void Accelerate(int paramAmount);
　void Decelerate(int paramAmount);
}

　　最後，我們來整理View接口。我們知道VIEw需要暴露出Control的一些機能，比如允許或禁止加速，減速和轉彎申請。

public interface IVehicleVIEw
{
　void DisableAcceleration();
　void EnableAcceleration();
　void DisableDeceleration();
　void EnableDeceleration();
　void DisableTurning();
　void EnableTurning();
　}

　　現在我們需要做一些微調使我們的這些接口能夠互相作用。首先，任何一個Control都需要知道它的View和Model，所以在我們的IvehicleControl接口中加入兩個函數："SetModel" 和"SetVIEw"：

public interface IVehicleControl
{
　void RequestAccelerate(int paramAmount);
　void RequestDecelerate(int paramAmount);
　void RequestTurn(RelativeDirection paramDirection);
　void SetModel(IVehicleModel paramAuto);
　void SetView(IVehicleView paramVIEw);
}

　　下一個部分比較巧妙。我們希望VIEw知道Model中的變化。為了達到這個目的，我們使用觀察者模式。

　　為了實施觀察者模式，我們需要將下面的函數加入到Model（被VIEw觀察）：AddObserver, RemoveObserver, 和 NotifyObservers。

　　．．．並且將下面的函數加入到View（被Model觀察）中。這樣做的目的是Model會有一個View的引用。當Model發生變化時，將會調用NotifyObservers()方法，傳入一個對其自身的引用並調用Update()通知VIEw這個變化。

public class IVehicleVIEw
{
　void DisableAcceleration();
　void EnableAcceleration();
　void DisableDeceleration();
　void EnableDeceleration();
　void DisableTurning();
　void EnableTurning();
　void Update(IVehicleModel paramModel);
}

　　這樣我們就將我們的接口聯系起來了。在下面的代碼中我們只需要引用我們這些接口，這樣就保證了我們代碼的低耦合。任何顯示汽車狀態的用戶界面都需要實現IVehicleVIEw，我們所有的ACME都需要實現IVehicleModel，並且我們需要為我們的ACME汽車制作Controls，這些Control將實現IVehicleControl接口。

　　下一步．．．在common中都需要什麼

　　我們知道所有的汽車都做相同的動作，所以我們接下來做一個基於“骨架”的共有的代碼來處理這些操作。這是一個抽象類，因為我們不希望任何人在“骨架”上開車（抽象類是不能被實例化的）。我們稱其為Automobile。我們將用一個ArrayList (from System.Collections)來保持跟蹤所有感興趣的Views（記住觀察者模式了嗎？）。我們也可以用老式的數組來記錄對IVehicleView的引用，但是現在我們已經很累了想快點結束這篇文章。如果你感興趣，看一下在觀察者模式中AddObserver, RemoveObserver, 和NotifyObservers，這些函數是怎樣和IVehicleView互相作用的。任何時間當有速度或方向變化時，Automobile通知所有的IVehicleVIEws。

public abstract class Automobile: IVehicleModel
{
　"Declarations "#region "Declarations "
　private ArrayList aList = new ArrayList();
　private int mintSpeed = 0;
　private int mintMaxSpeed = 0;
　private int mintMaxTurnSpeed = 0;
　private int mintMaxReverseSpeed = 0;
　private AbsoluteDirection mDirection = AbsoluteDirection.North;
　private string mstrName = "";
　#endregion
　"Constructor"#region "Constructor"
　public Automobile(int paramMaxSpeed, int paramMaxTurnSpeed, int paramMaxReverseSpeed, string paramName)
　{
　　this.mintMaxSpeed = paramMaxSpeed;
　　this.mintMaxTurnSpeed = paramMaxTurnSpeed;
　　this.mintMaxReverseSpeed = paramMaxReverseSpeed;
　　this.mstrName = paramName;
　}
　#endregion
　"IVehicleModel Members"#region "IVehicleModel Members"
　public void AddObserver(IVehicleView paramVIEw)
　{
　　aList.Add(paramVIEw);
　}
　public void RemoveObserver(IVehicleView paramVIEw)
　{
　　aList.Remove(paramVIEw);
　}
　public void NotifyObservers()
　{
　　foreach(IVehicleView vIEw in aList)
　　{
　　　vIEw.Update(this);
　　}
　}
　public string Name
　{
　　get
　　{
　　　return this.mstrName;
　　}
　　set
　　{
　　　this.mstrName = value;
　　}
　}
　public int Speed
　{
　　get
　　{
　　　return this.mintSpeed;
　　}
　}
　public int MaxSpeed
　{
　　get
　　{
　　　return this.mintMaxSpeed;
　　}
　}
　public int MaxTurnSpeed
　{
　　get
　　{
　　　return this.mintMaxTurnSpeed;
　　}
　}
　public int MaxReverseSpeed
　{
　　get
　　{
　　　return this.mintMaxReverseSpeed;
　　}
　}
　public AbsoluteDirection Direction
　{
　　get
　　{
　　　return this.mDirection;
　　}
　}
　public void Turn(RelativeDirection paramDirection)
　{
　　AbsoluteDirection newDirection;
　　switch(paramDirection)
　　{
　　　case RelativeDirection.Right:
　　　　newDirection = (AbsoluteDirection)((int)(this.mDirection + 1) %4);
　　　　break;
　　　case RelativeDirection.Left:
　　　　newDirection = (AbsoluteDirection)((int)(this.mDirection + 3) %4);
　　　　break;
　　　case RelativeDirection.Back:
　　　　newDirection = (AbsoluteDirection)((int)(this.mDirection + 2) %4);
　　　　break;
　　　default:
　　　　newDirection = AbsoluteDirection.North;
　　　　break;
　　}
　　this.mDirection = newDirection;
　　this.NotifyObservers();
　}
　public void Accelerate(int paramAmount)
　{
　　this.mintSpeed += paramAmount;
　　if(mintSpeed >= this.mintMaxSpeed) mintSpeed = mintMaxSpeed;
　　this.NotifyObservers();
　}
　public void Decelerate(int paramAmount)
　{
　　this.mintSpeed -= paramAmount;
　　if(mintSpeed <= this.mintMaxReverseSpeed) mintSpeed = mintMaxReverseSpeed;
　　this.NotifyObservers();
　}
　#endregion
}

　　現在我們的"ACME Framework"已經做好了，我們只需要設立有形的類和接口。首先讓我們看看最後兩個類：Control 和 Model...

　　這裡我們有形的AutomobileControl實現IVehicleControl接口。我們的AutomobileControl也將設置View來依賴Model 的狀態（當有向Model的申請時檢測SetVIEw方法）。

　　注意，我們只是有對IVehicleModel的引用（而不是抽象類Automobile ）和對IVehicleView的引用（而不是具體的VIEw），這樣保證對象間的低耦合。

public class AutomobileControl: IVehicleControl
{
　private IVehicleModel Model;
　private IVehicleView VIEw;
　public AutomobileControl(IVehicleModel paramModel, IVehicleView paramVIEw)
　{
　　this.Model = paramModel;
　　this.View = paramVIEw;
　}
　public AutomobileControl()
　{}
　IVehicleControl Members#region IVehicleControl Members
　public void SetModel(IVehicleModel paramModel)
　{
　　this.Model = paramModel;
　}
　public void SetView(IVehicleView paramVIEw)
　{
　　this.View = paramVIEw;
　}
　public void RequestAccelerate(int paramAmount)
　{
　　if(Model != null)
　　{
　　　Model.Accelerate(paramAmount);
　　　if(View != null) SetVIEw();
　　}
　}
　public void RequestDecelerate(int paramAmount)
　{
　　if(Model != null)
　　{
　　　Model.Decelerate(paramAmount);
　　　if(View != null) SetVIEw();
　　}
　}
　public void RequestTurn(RelativeDirection paramDirection)
　{
　　if(Model != null)
　　{
　　　Model.Turn(paramDirection);
　　　if(View != null) SetVIEw();
　　}
　}
　#endregion
　public void SetVIEw()
　{
　　if(Model.Speed >= Model.MaxSpeed)
　　{
　　　VIEw.DisableAcceleration();
　　　VIEw.EnableDeceleration();
　　}
　　else if(Model.Speed <= Model.MaxReverseSpeed)
　　{
　　　VIEw.DisableDeceleration();
　　　VIEw.EnableAcceleration();
　　}
　　else
　　{
　　　VIEw.EnableAcceleration();
　　　VIEw.EnableDeceleration();
　　}
　　if(Model.Speed >= Model.MaxTurnSpeed)
　　{
　　　VIEw.DisableTurning();
　　}
　　else
　　{
　　　VIEw.EnableTurning();
　　}
　}
}

　　這裡是我們的ACME200SportsCar類（從抽象類Automobile繼承，實現了IVehicleModel接口）：

public class ACME2000SportsCar:Automobile
{
　public ACME2000SportsCar(string paramName):base(250, 40, -20, paramName){}
　public ACME2000SportsCar(string paramName, int paramMaxSpeed, int paramMaxTurnSpeed, int paramMaxReverseSpeed):
　base(paramMaxSpeed, paramMaxTurnSpeed, paramMaxReverseSpeed, paramName){}
}

　　現在輪到我們的VIEw了．．．

　　現在終於開始建立我們MVC最後一個部分了．．．VIEw！

　　我們要建立一個AutoView來實現IVehicleView接口。這個AutoVIEw將會有對Control和Model接口的引用。

public class AutoView : System.Windows.Forms.UserControl, IVehicleVIEw
{
　private IVehicleControl Control = new ACME.AutomobileControl();
　private IVehicleModel Model = new ACME.ACME2000SportsCar("Speedy");
}

　　我們也需要將所有的東西包裝在UserControl的構造函數中。

public AutoVIEw()
{
　// This call is required by the Windows.Forms Form Designer.
　InitializeComponent();
　WireUp(Control, Model);
}
public void WireUp(IVehicleControl paramControl, IVehicleModel paramModel)
{
　// If we're switching Models, don't keep watching
　// the old one!
　if(Model != null)
　{
　　Model.RemoveObserver(this);
　}
　Model = paramModel;
　Control = paramControl;
　Control.SetModel(Model);
　Control.SetVIEw(this);
　Model.AddObserver(this);
}

　　下面，加入我們的Button和一個label來顯示ACME2000 Sports Car的狀態還有狀態條用來為所有的Buttons來顯示編碼。

private void btnAccelerate_Click(object sender, System.EventArgs e)
{
　Control.RequestAccelerate(int.Parse(this.txtAmount.Text));
}
private void btnDecelerate_Click(object sender, System.EventArgs e)
{
　Control.RequestDecelerate(int.Parse(this.txtAmount.Text));
}
private void btnLeft_Click(object sender, System.EventArgs e)
{
　Control.RequestTurn(RelativeDirection.Left);
}
private void btnRight_Click(object sender, System.EventArgs e)
{
　Control.RequestTurn(RelativeDirection.Right);
}

　　加入一個方法來更新接口．．．

public void UpdateInterface(IVehicleModel auto)
{
　this.label1.Text = auto.Name + " heading " + auto.Direction.ToString() + " at speed: " + auto.Speed.ToString();
　this.pBar.Value = (auto.Speed>0)? auto.Speed*100/auto.MaxSpeed : auto.Speed*100/auto.MaxReverseSpeed;
}

　　最後我們實現IVehicleVIEw接口的方法。

public void DisableAcceleration()
{
　this.btnAccelerate.Enabled = false;
}
public void EnableAcceleration()
{
　this.btnAccelerate.Enabled = true;
}
public void DisableDeceleration()
{
　this.btnDecelerate.Enabled = false;
}
public void EnableDeceleration()
{
　this.btnDecelerate.Enabled = true;
}
public void DisableTurning()
{
　this.btnRight.Enabled = this.btnLeft.Enabled = false;
}
public void EnableTurning()
{
　this.btnRight.Enabled = this.btnLeft.Enabled = true;
}
public void Update(IVehicleModel paramModel)
{
　this.UpdateInterface(paramModel);
}

　　我們終於結束了！！！

　　現在我們可以來測試ACME2000 Sports Car了。一切按計劃進行，然後我們找到ACME的主管人員，但他想要開一個載貨卡車而不是運動車。

　　幸運的是我們用的是MVC!我們需要做的所有工作就是建立一個新的ACMETruck類，包裝一下，完事！

public class ACME2000Truck: Automobile
{
　public ACME2000Truck(string paramName):base(80, 25, -12, paramName){}
　public ACME2000Truck(string paramName, int paramMaxSpeed, int paramMaxTurnSpeed, int paramMaxReverseSpeed):
base(paramMaxSpeed, paramMaxTurnSpeed, paramMaxReverseSpeed, paramName){}
}

　　在AutoVIEw中，我們只需要建立卡車包裝一下！

private void btnBuildNew_Click(object sender, System.EventArgs e)
{
　this.autoVIEw1.WireUp(new ACME.AutomobileControl(), new ACME.ACME2000Truck(this.txtName.Text));
}

　　如果我們想要一個新Control只允許我們來每次加速或減速最大５mph，小意思！做一個SlowPokeControl（和我們的AutoControl相同，但是在申請加速度中做了限制）。

public void RequestAccelerate(int paramAmount)
{
　if(Model != null)
　{
　　int amount = paramAmount;
　　if(amount > 5) amount = 5;
　　Model.Accelerate(amount);
　　if(View != null) SetVIEw();
　}
}
public void RequestDecelerate(int paramAmount)
{
　if(Model != null)
　{
　　int amount = paramAmount;
　　if(amount > 5) amount = 5;
　　Model.Accelerate(amount);
　　Model.Decelerate(amount);
　　if(View != null) SetVIEw();
　}
}

　　如果我們想讓我們的ACME2000 Truck變得遲鈍，只需要在AutoVIEw中包裝。

private void btnBuildNew_Click(object sender, System.EventArgs e)
{
　this.autoVIEw1.WireUp(new ACME.SlowPokeControl(), new ACME.ACME2000Truck(this.txtName.Text));
}

　　最後，如果我們需要一個在web上的接口，我們要做的所有工作就是建立一個Web項目在UserControl中實現IVehicleVIEw接口。

　　結論

　　正如你所看到的，使用MVC來構建代碼控制接口耦合性很低，很容易適應需求的改變。它也能使變化的影響減小，而且你可以在任何地方重用你的虛函數和接口。有很多時候我們可以在我們的項目中實現伸縮性，特別是在那些需求變化的時候，但是這需要下次再說了。

　　於此同時，做下一個項目的時候記住MVC．．．你不會感到遺憾！