2012年9月14日 星期五

ASP.NET MVC 3 - 加入 ASP.NET MVC 3 原始碼來偵錯

為什麼閒閒沒事要寫這一篇呢?

又為什麼沒事要加入 ASP.NET MVC 3 的原始碼來偵錯呢?

這是因為遇到了讓我覺得弔詭的事情,所以必須要追根究柢的來詳細地追查清楚,但又發覺到,加入 ASP.NET MVC 3 的原始碼這件事情跟原本加入 ASP.NET MVC 2 的情況又有些不同,於是就記錄一下這整個操作流程,以方便讓我這時常忘東忘西的腦袋可以有個地方來恢復記憶,也讓有需要這麼做的朋友提供一個參考。

PS. 其實寫這一篇是為了後續的文章先鋪路,不然下一篇文章會長長一大篇。


以下不會有太多的文字描述,大部分就看圖說故事!

我這邊是使用 VS2012,所以接下來的操作不管你是用 Visual Studio 2010 還是 Visual Studio 2012 都是一樣的,頂多只是介面的樣子不同而已。

 

Step.1 下載 ASP.NET MVC 3 原始碼

先到下面這個網頁中下載 ASP.NET MVC 3 RTM 的 Source Code

https://aspnet.codeplex.com/releases/view/58781

image

下載的原始碼是一個 zip 壓縮檔,所以先放在一個資料夾中(等一下我們也會在這個資料夾中建立一個 MVC 網站專案),將壓縮檔給解壓縮在剛才的資料夾中,解壓縮之後的內容如下,

image

 

Step.2 建立一個 ASP.NET MVC 3 的專案

在剛剛 ASP.NET MVC 3 原始檔的同一個資料夾中去建立一個 ASP.NET MVC 3 的 Web 應用程式

SNAGHTMLa6dfb7

image

image

 

Step.3 移除 MVC Web 專案的 ASP.NET MVC 的原始參考

為了要可以使用等一下加入的 ASP.NET MVC 3 原始碼專案參考,所以先移除原本 MVC Web 專案的原始參考,

要移除以下幾個參考:

    • System.Web.Mvc
    • System.Web.Razor
    • System.Web.WebPages
    • System.Web.Webpages.Deployment
    • System.Web.WebPages.Razor

image

 

Step.4 加入 ASP.NET MVC 3 原始檔專案

MVC Web 專案移除完原始參考之後,接著就是在方案中加入 ASP.NET MVC 3 原始檔專案,對照剛剛所移除的原始參考,所以我們需要加入一樣的 ASP.NET MVC 3 原始檔專案,

    • mvc3-rtm-sources / mvc3 / src / SystemWebMvc
    • mvc3-rtm-sources / webpages / src / System.Web.Razor
    • mvc3-rtm-sources / webpages / src / System.Web.WebPages
    • mvc3-rtm-sources / webpages / src / System.Web.WebPages.Deployment
    • mvc3-rtm-sources / webpages / src / System.Web.WebPages.Razor

在方案總管中使用加入現有專案的方式來加入 ASP.NET MVC 3 的原始檔專案,

image

SNAGHTMLcd98b9

image

以上為加入 System.Web.Mvc 專案的操作示範,其他專案的加入也是同樣的方式,依序加入原始檔專案後的方案內容,

image

為了可以區隔 MVC Web 專案與 ASP.NET MVC 原始檔專案,可以建立一個「方案資料夾」來做區隔,

image

建立好「方案資料夾」後,把剛才加入的原始檔專案給拉進方案資料夾中就可以了,

image

「方案資料夾」是在方案總管中建立一個只有方案總管才顯示的虛擬資料夾,用來做專案的區隔或是分類,在實際的檔案結構中是不會建立相對應名稱的實際資料夾。

image

 

Step.5 在 MVC Web 專案中加入專案的參考

方案加入原始檔專案之後,接著要做的就是讓已經移除相關原始參考的 MVC Web 專案引用方案中的原始檔專案參考,

image

SNAGHTMLf9c24a

加入完方案內的專案參考之後,可以看到原本 MVC Web 專案的參考又有了原版的參考,

image

現在我們重新建置整個方案,可以看到方案中所有專案的建置訊息,

image

但到了這一步還不算全部完成喔,還要進行最後一個修改步驟才能算是完成。

 

Step.6 修改 MVC Web 專案的 Web.Config

如果你只有執行前面五個步驟之後就興沖沖的按下「F5」執行 MVC Web 專案,此時你一定會得到錯誤的內容,

image

這是因為我們建立 MVC Web 專案時會預設使用原始的範本,而範本中的組件資料會含有 PublicKeyToken,因為我們是加入 ASP.NET MVC 的原始檔專案而非使用已經編譯好的公開發行組件,以致於專案所使用的組件與依據範本所建立的設定檔內容衝突,所以 MVC Web 專案執行時就會發生錯誤,此時我們就要手動來修改 MVC Web 專案中的兩個 Web.Config,一個是根目錄底下的 Web.Config,而另一個就是 View 目錄下的 Web.Config 檔案,

image

 

修改 View 目錄下的 Web.Config 內容,找一下 View / Web.Config 內容中有關 MVC 的內容,PublicKeyToken 的值都改成 null,

image

image

 

修改根目錄下的 Web.Config,與修改 View / Web.Config 一樣的動作,把有關 MVC 組件資訊的 PublicKeyToken 改為 null,

image

兩個 Web.Config 檔案都修改、儲存完之後,重新建置整個方案,再執行 MVC Web 專案,就可以看到正常執行的結果。

image

 


利用 ASP.NET MVC 原始碼進行偵錯

這邊就先利用一個簡單的例子來進行 ASP.NET MVC 原始碼的偵錯,其實這邊所說的「偵錯」並不是要對 ASP.NET MVC 原始碼的內容來抓 BUG,而是使用使用追蹤進入原始碼的方式來看 ASP.NET MVC 的內部運作情況,以下來示範一下對 Html.TextBox() 的偵錯觀察。

首先在 HomeController Index Action 方法加入一小段文字並放入 ViewBag,

image

Index ViewPage 中使用 HtmlHelper 的 TextBox 來放 ViewBag.DisplayText 的文字,並且在這邊置入一個中斷點,

image

接下來就是到 ASP.NET MVC 原始檔專案的 System.Web.Mvc,

image

而要追蹤的 TextBox,其原始碼程式位在 Html / InputExtensions.cs 檔案中,其實可以事先放置中斷點,也可以再慢慢步進到原始檔的程式位置,前面的事先放置,是在已知原始檔的程式位置時,而後者則是在毫無任何線索的情況下所採取的方式,我這邊已經知道要追蹤哪些程式,所以我就事先放置了幾個中斷點,

image

按下「F5」進入偵錯模式,執行之後,先停留在 Index.cshtml,因為有在 Index 的 View Page 中放中斷點,

image

接著按「F10」步進倒下一個中斷點,此時就進入到 System.Web.Mvc 的 InputExtensions.cs 裡,

image

一步一步進入下一個中斷點,最後到了 InputHelper() 這個 Method,這個 InputHelper() 是來建立各個 Html Input Element 的方法,所以進入到這裡就可以一步步地觀察前端的 Input TextBox 是如何建立產生的,

image

image

image

image

 


這邊介紹如何把 ASP.NET MVC 3 RTM 的原始檔專案加入到我們的開發專案當中,要特別介紹是因為與之前 ASP.NET MVC 2 的加入原始檔專案的方式有不同的地方,因為多了幾個專案也需要加入,不講的話,應該還是會有很多人搞不清楚,最後的也簡單的說明如何步進到 ASP.NET MVC 3 的原始碼程式中進行追蹤與偵錯,建議各位學習以及開發 ASP.NET MVC 專案的時候,把 ASP.NET MVC 3 的原始碼下載一份下來看,有很多操作上不了解的地方,或是想要了解 ASP.NET MVC 的架構與組成,就是直接看原始碼比較快!

 

寫完這一篇了,下一篇就要用 ASP.NET MVC 的原始碼來探詢一件令人弔詭的情況 …..

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。