ASP.NET vs MVC vs WebForms

?

許多ASP.NET開發人員開始接觸MVC認為MVC與ASP.NET完全沒有關系，是一個全新的Web開發，事實上ASP.NET是創建WEB應用的框架而MVC是能夠用更好的方法來組織并管理代碼的一種更高級架構體系，所以可以稱之為ASP.NET MVC。

我們可將原來的ASP.NET稱為 ASP.NET Webforms，新的MVC 稱為ASP.NET MVC.

ASP.NET Web Form

ASP.NET 在過去的十二年里，已經服務并成功實現Web 應用的開發。我們首先了解一下為什么ASP.NET能夠如此流行，并成功應用。

微軟編程語言從VB開始就能夠成為流行并廣泛應用，都源于其提供的強大的Visual studio能夠進行可視化的編程，實現快速開發。

使用VS時，開發人員能夠通過拖拽UI元素，并在后臺自動生成這些界面的代碼。稱為后臺代碼。在后臺代碼中開發人員可以添加操作這些UI元素的邏輯代碼。

clip_image002

因此微軟的可視化RAD架構體系有兩方面組成，一方面是UI，一方面是后臺代碼。因此ASP.NET Web 窗體，包含ASPX和ASPX.CS，WPF包含XAML/XAML.CS等。

ASP.NET Web Form存在的問題

我們不得不考慮的問題是，既然ASP.NET Web Form 如此成功且具有優勢，為什么微軟還要推出ASP.NET MVC?主要是因為ASP.NET Webform的性能問題。在Web應用程序中從兩方面來定義性能：

1. 響應時間：服務器響應請求的耗時

2. 帶寬消耗：同時可傳輸多少數據。

響應時間

我們可以理解為什么ASP.NET Webform比較慢，如圖我們做了一些小的加載測試。分別使用ASP.Net MVC和ASP.Net Webform,發現ASP.Net MVC的響應時間比Webform快了兩倍。

接下來我們在思考一個問題為什么ASP.NET MVC的性能更好？看看下面這個示例，簡單的UI代碼和UI的后臺代碼。

假如一個textbox的ASPX頁面：

<asp:TextBox ID="TextBox1" runat="server">

對應的UI后臺代碼：

   1:  protected void Page_Load(object sender, EventArgs e)

   2:  {

   3:        TextBox1.Text = "Make it simple";

   4:        TextBox1.BackColor = Color.Aqua;

   5:  }

運行結果：

如果查看HTML輸出，則會顯示如下代碼：

<input name="TextBox1" type="text" value="Make it simple" id="TextBox1" style="" />

我們再來思考上面提到的問題

1. 這種HTML生成方式是否很有效？我們是否為了獲取如此簡單的HTML而長時間的消耗服務器

2. 開發人員是否可以直接編寫HTML?很難實現嗎？

通過分析我們可以得知，每一次請求都有轉換邏輯，運行并轉換服務器控件為HTML輸出。如果我們的頁面使用表格，樹形控件等復雜控件，轉換就會變得很糟糕且非常復雜。HTML輸出也是非常復雜的。由于這些不必要的轉換從而增加了響應時間。該問題的解決方案就是擺脫后臺代碼，寫成純HTML代碼。

帶寬消耗

ASP.NET開發人員都非常熟悉Viewstates，因為它能夠自動保存post返回的狀態，減少開發時間。但是這種開發時間的減少會帶來巨大的消耗，Viewstate增加了頁面的大小。在做的加載測試中，與MVC 對比，我們發現Viewstate增加了兩倍的頁面存儲。以下是測試結果：

頁面尺寸的增加是因為viewstate產生了額外的字節。下圖就是Viewstate的截圖。許多人可能會不同意此觀點，但是眾所周知，開發人員是如何工作的，如果有選擇，他們肯定會采取別的選擇。

HTML 消耗

現在因為我們都是后臺代碼和ASP.NET web server控件的努力，我們對于怎樣得到HTML以及如何使他們更有效沒有更好的辦法。如下面展示的ASPX 代碼，你能確定會生成什么樣的HTML代碼嗎？

<asp:Label ID="Label1"?runat="server"?Text="I am label">
?

  
 <asp:Literal ID="Literal1" runat="server" Text="I am a literal">

<asp:Panel ID="Panel1"?runat="server">I am a panel
?
?

Lable標簽會生成DIV標簽還是SPAN標簽？運行后生成的HTML代碼的結果如下：label生成了span標簽，Literal生成了轉換為了簡單的文本，而panel轉換為了DIV標簽。

?<span?id="Label1">I am label</span>I am a literal

I am a panel

因此與其生成HTML代碼，還不如直接編寫HTML代碼，并實現HTML控件。

所以該問題的解決方案是：不使用服務器控件，直接編寫HTML代碼。

直接編寫HTML代碼的好處在于web設計者可以與開發人員緊密合作及時溝通。設計人員可以使用他們喜愛的設計工具來設計HTMl代碼，像dream weaver,前端頁面等，設計獨立。如果我們使用服務器控件，這些設計者工具可能不會識別。

? ? ? ?2. 后臺代碼類的重用性

如果仔細觀察一些專業的ASP.NET Webform項目，你會發現后臺代碼類往往都包含了大量的代碼，并且這些代碼也是非常復雜的。而現在，后臺代碼類繼承了“System.Web.UI.Page”類。但是這些類并不像普通的類一樣能夠到處復用和實例化。換句話來講，在Weform類中永遠都不可能執行以下代碼中的操作：

? ?1: WebForm1 obj = new WebForm1();obj.Button1_Click();

```
??3. 單元測試
```

既然無法實例化后臺代碼類，單元測試也是非常困難的，也無法執行自動化測試。必須手動測試。

解決方案

既然講了ASP.Net Webform存在的兩大問題即服務器控件和后臺代碼，以下是根源圖，

clip_image009

那么解決方案是什么？

就是我們需要將后臺代碼遷移到獨立的簡單的類庫，并且拜托ASP.Net服務器控件，并寫一些HTML示例。

ASP.NET Webform 和MVC 比較，如下圖：

clip_image010

Microsoft Asp.Net MVC 是如何彌補Web Form存在的問題的?

后臺代碼和服務器控件是一切問題的根源。所以如果你查看當前的WebForm體系結構，開發者正在使用的包含3層體系結構。三層體系結構是由UI包含ASPX及CS 后臺代碼。

UI，業務邏輯以及包含數據訪問的中間層

clip_image011

Asp.Net MVC 由Model，View，Controller三部分組成。Controller中包含后臺代碼邏輯，View是ASPX，如純HTML代碼，Model是中間層。通過上圖可獲得這三部分的關系。

所以會發現MVC的改變有兩點，View變成簡單的HTML，后臺代碼移到簡單的.NET類中，稱為控制器。

以下是ASP.NET MVC 請求流的通用步驟：

Step 1：首先獲取控制器。

Step 2：依賴行為控制器創建Model對象，Model通過轉換調用數據訪問層。

Step 3：數據填充Model之后，傳遞到View 顯示層，實現顯示的目的。

clip_image012

到這里我們就已經了解了ASP.Net MVC的各個組件。下面我們做一些小的實驗深入了解MVC的各組件。首先我們從Controller 控制器開始，因為Controller是MVC體系架構的核心部分。

你是否真的理解Asp.Net MVC的Controller(控制器)？

為了我們能夠更好的理解Controller，我們首先需要理解Controller中涉及的專業術語：用戶交互邏輯。

什么是用戶交互邏輯？

場景1

你是否想過當用戶輸入URL摁下回車鍵時，會發生什么事情？

clip_image013

瀏覽器首先需要給服務器發送請求，服務器再做出響應。

clip_image014

通過這些請求之后，客戶端正嘗試與服務器交互，服務器能夠反饋響應，因為服務器端存在一些判斷邏輯來處理這些請求。這些能夠處理用戶請求以及用戶交互行為的業務邏輯稱為用戶交互邏輯。

場景2

有一種常見的情況，服務器端發送的請求是HTML請求。HTML請求是由一組輸入控件和提交按鈕組成的。

clip_image015

當用戶點擊“Save”按鈕之后會發生什么？

如果你的回答是有一些事件處理器來處理button點擊事件，那么很抱歉回答是錯誤的。

在Web編程中是沒有事件的概念的，Asp.net Web forms 根據我們的行為自動添加了處理代碼，所以給我們帶來的錯覺認為是事件驅動的編程。這只是一種抽象的描述。

當點擊Button時，一個簡單的HTTP請求會發送到服務器。差別在于Customer Name,Address以及Age中輸入的內容將隨著請求一起發送。最終，如果是有個請求，服務器端則有對應的邏輯，使服務器能夠更好響應請求。簡單來說是將用戶交互邏輯寫在服務器端。

在Asp.Net MVC中，C代表Controller，就是用來處理用戶交互邏輯的。

實驗一：簡單的MVC Hello world，著重處理Controller。

Step1 創建一個Asp.Net MVC 5項目

打開Visual studio 2013 點“文件”->新建->項目。

clip_image016

Step 1.2 選擇Web 應用，輸入項目名稱，選擇存放路徑，點擊確定。

clip_image017

Step 1.3 選擇MVC 模板

clip_image018

Step 1.4 選擇Change Authentication（改變授權），彈出對話框中選擇“No Authentication”，并點擊確定。

clip_image019

Step 2 –創建控制器
Step 2.1，在資源管理器中，右擊controller文件夾，選擇添加->Controller(控制器)

clip_image020

Step 2.2 選擇空 MVC 5 Controller 并點擊添加

clip_image021

Step 2.3 輸入控制器的名稱”TestController“，點擊添加。

在這一步驟中，要特別注意千萬不能刪除名稱中的” Controller”關鍵字。名稱中必須包含Controller關鍵字。

clip_image022

Step 3. 創建行為方法

打開新建的TestController 類，可以發現已生成的Index 方法，將該方法刪除，并且添加新方法命名為GetString ，代碼如下：

   1:  public class TestController : Controller

   2:  {

   3:      public string GetString()

   4:     {        return "Hello World is old now. It’s time for wassup bro ;)";

5:

   6:    }

   7:  }

Step 4. 運行并測試?按 F5 鍵，在地址欄中以“ControllerName/ActionName”這樣的形式輸入，需要注意的輸入控制器名稱時，不能輸入”Controller“只輸入”Test”。

clip_image023

實驗一：Q&A

1. TestController 和Test之間的關系是什么？

TestController是類名稱，而Test是Controller的名稱，請注意，當你在URL中輸入controller的名稱，不需要輸入Controller這個單詞。

2. Action（行為）方法是什么？

Action 方法簡單的來說就是一個Controller內置的public類型的方法，能夠接收并處理用戶的請求，上例中，GetString 方法返回了一個字符串類型的響應。

注意：在Asp.Net Web Forms中默認的返回請求是HTML的，如果需要返回其他類型的請求，就必須創建HTTP 處理器，重寫內容類型。這些操作在Asp.net中是很困難的。在Asp.net MVC中是非常簡單的。如果返回類型是”String“直接返回，不需要發送完整的HTML。

3. 如果從Action 方法中返回對象值會出現什么意外情況？

請瀏覽以下代碼

   1:  namespace WebApplication1.Controllers

   2:  {

   3:      public class Customer

   4:      {

   5:          public string CustomerName { get; set; }

   6:          public string Address { get; set; }

   7:      }

   8:      public class TestController : Controller

   9:      {

  10:          public Customer GetCustomer()

  11:          {

  12:              Customer c = new Customer();

  13:              c.CustomerName = "Customer 1";

  14:              c.Address = "Address1";

  15:              return c;

  16:          }

  17:      }

  18:  }

?輸出結果如下所示：?

當返回類型如“Customer”這樣類似的對象時，將調用ToString()方法，返回“NameSpace.ClassName”形式的類名。

4. 如果需要獲得上面例子中的屬性值，要如何操作？

簡單重寫類的“ToString”方法，如下：

   1:  public override string ToString()

   2:  {

   3:       return this.CustomerName+"|"+this.Address;

   4:  }

運行結果：

clip_image025

5. Action 方法是否只能用Public修飾符來修飾？

答案是肯定的，每個公有方法都會自動稱為Action 方法。

6. 非public方法是什么？

類的方法都比較簡單，并且并不是公共可用的。無法在Web中調用。

7. 如果我們需要其他函數來完成一些特定功能，但不是Action Method要如何實現？

使用NonAction屬性修飾，如下：

   1:  [NonAction]

   2:  public string SimpleMethod()

   3:  {

   4:     return "Hi, I am not action method";

   5:  }

當嘗試給以上Action 方法發送請求時，會獲得以下結果：?

clip_image026

View部分

Controller是處理用戶請求，并做出響應，通常情況下響應都是以顯示在瀏覽器中，使用HTML代碼，瀏覽器才可識別。HTML有圖像，文本，輸入控件等。通常稱為用戶界面的設計即UI層，在ASP.net MVC稱為View。

實驗二——深入理解View

在實驗二中，創建一個簡單的MVC應用，僅僅具有Controller和簡單的字符串類型的返回值。讓我們來了解MVC中的View部分吧。

Step1 –創建新的Action 方法

在TestController中添加新的Action 方法，如下：

   1:  public ActionResult GetView()

   2:  {

   3:     return View("MyView");

   4:  }

Step 2 創建View
Step 2.1 右擊上述創建的Action 方法，選擇“添加View”

clip_image027

Step 2.2 在添加View的對話框中輸入View名稱“MyView”，取消選擇“使用布局”的復選框，點擊添加。

clip_image028

資源管理器重的Views/Test文件夾中會添加一個新的View文件。

clip_image029

Step3 在View中添加內容

打開MyView.cshtml 文件，并添加以下內容：

@{Layout = null;}
<!DOCTYPE html>
<html><head><meta name="viewport" content="width=device-width" /> <title>MyView</title> </head><body>Welcome to MVC 5 Step by Step learning
</body></html>

Step 4. 運行?按F5鍵運行應用

clip_image030

實驗二：Q&A

1. 為什么View會放在Test的文件夾中？

View是與放置在特定目錄下的Controller相關。這個特定文件夾是以”ControllerName”命名的，并且放在View文件夾內

2. 在多個控制器中無法重用View嗎？

當然可以，我們需要在將這些文件放在特定的Shared文件夾中。將View 放在Shared文件夾中所有的Controller都可用。

clip_image031

3. 單個Action 方法中可引用多個View嗎？

可以，ASP.NET MVC的view和Controller不是嚴格的匹配的，一個Action Method可以引用多個view，而一個View也可以被一個Action方法使用如下代碼所示：

   1:  public ActionResult GetView()

   2:  {

   3:      if(Some_Condition_Is_Matching)

   4:      {

   5:         return View("MyView");

   6:      }

   7:      else

   8:      {

   9:         return View("YourView");

  10:      }

  11:  }

4. View函數的功能是什么？

?創建 ViewResult 對象將會渲染成視圖來給用戶反饋

ViewResult 創建了ViewPageActivator 對象
ViewResult 選擇了正確的ViewEngine，并且會給ViewEngine的構造函數傳ViewPageActivator對象的參數
ViewEngine 創建View類的對象
ViewEngine 調用View的RenderView 方法。

5. ActionResult和 ViewResult的關系是什么？

ActionResult是抽象類，而ViewResult是ActionResult的多級孩子節點，多級是因為ViewResult是ViewResultBase的子類，而ViewResultBase是ActionResult的孩子節點。

6. 什么是ContentResult？

ViewResult是HTML響應而ContentResult是標準的文本響應，僅返回字符串類型。區別就在于ContentResult是ActionResult的子類。

要進行ASP.ET MVC的開發，不但需要具備MVC的知識，還需要高效的工具來幫助開發。

使用?ComponentOne Studio Enterprise?中提供的?ComponentOne Studio ASP.NET MVC?版本，您能獲取快速的輕量級控件來滿足用戶所有需求。