程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> C# >> C#基礎知識 >> 用Visual C#完成MVC模式地簡要辦法

用Visual C#完成MVC模式地簡要辦法

編輯:C#基礎知識

  在我們的開發項目中使用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。

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);
 void AddObserver(IVehicleView paramView);
 void RemoveObserver(IVehicleView paramView);
 void 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只允許我們來每次加速或減速最大5mph,小意思!做一個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...你不會感到遺憾!

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved