ASP.NET MVC 精要 - 建立檢視頁面(2)

在第一篇「ASP.NET MVC 精要 - 建立MVC專案(1)」裏面,我們第一次看到了控制器的運作,這一篇持續從控制器討論與檢視的互動。當按下F5執行專案,於瀏覽器中的預設網址列字串附加控制器名稱Hello/ HelloMessage,完整位址字串如下:

http://localhost:xxx/Hello/HelloMessage

出現以下的畫面,其中顯示 SayHello() 回傳的訊息字串。



MVC 根據要求的網址,解析對應的控制器(Hello),找到其相關的方法(HelloMessage),執行之後回傳結果給瀏覽器。檢視網頁的原始碼,內容如下:



如你所見,回傳的結果並非網頁,而是控制器 return 的字串,這與我們對網站運作的理解有些差異,它應該是一個網頁才對,而這必須經由檢視的建立開始作討論。MVC 針對網址列字串進行解析格,並找到對應的控制器,執行其中特定的方法完成應,為了順利導向正確的控制器執行方法,必須遵守MVC的網址列格式如下:

/[Controller]/[ActionName]/[Parameters]

其中的 Controller 是控制器檔案類別名稱去掉 Controller 字尾的識別字串,而 ActionName 則是方法名稱,最後你還可以指定參數傳入。現在嘗試輸入 http://localhost:xxx/Hello,出現以下的畫面:



如果網址列沒有輸入動作名稱預設會執行Index()方法,因此這個範例是找到HelloController控制器類別的Index()方法,它的內容如下:

public ActionResult Index()
{
return View();
}

其回傳的是 View() ,表示一個對應的檢視檔案,你必須建立一個對應此Index() 的專屬檢視檔案,接下來我們新增一個檢視來修正這個問題。於Index()方法大括弧的範圍區域中按下滑鼠右鍵展開功能選單,如下圖:



在選單中的第一個功能項目「新增檢視」按一下,出現以下「加入檢視」對話方塊:



請注意其中的第一個欄位「檢視名稱」為 Index ,保留所有的預設值設定,按一「加入」按鈕,將其加入至專案中,回到方案總管,找到Views資料夾,其中多了一個Hello子資料夾如下,裏面是新建立的View檔案Index.cshtml。



編輯區域呈現的是 Index.cshtml 這個檔案,將其修改如下:

@{
    ViewBag.Title = "Index";
}
<h1>Index</h1>
<h2>第一個 MVC 專案</h2>

現在於瀏覽器檢視 http://localhost:52153/Hello,得到以下的輸出內容:



由於這一次網址列只有控制器名稱Hello,因此執行的是HelloController類別的動作方法 Index,其回傳對應的檢視,也就是前述新增的檢視檔案Index.cshtml。.cshtml副檔名的檔案是一種Razor檢視引擎所建立的樣板檔案,經過最佳化的處理,令HTML檔案的內容更利於網路的傳輸。

到目前為止,我們體驗了兩種不同類型的控制器回傳值,無論是HelloMessage()動作方法回傳的字串,或是預設 Index() 方法回傳的檢視檔內容,瀏覽器均會忠實呈現回傳的內容,由於網址列對應至某個控制器的動作方法,控制器負責接收要求並執行對應的方法功能,並回傳必要的結果資訊,因此我們只需將瀏覽器所要呈現的內容,直接回傳即可,不需要是一個 HTML網頁。

儘管如此,沒有建立對應的檢視很難進行實際的網頁開發工作,控制器的用途在於瀏覽器傳送進來的要求處理而非最後的畫面呈現,特別是對於複雜的網頁而言,我們需要建立專屬的網頁檔案來處理,而這一部份便是 MVC 架構裏面的 V 所負責的事, V 為 View 的縮寫,中文翻作檢視,這一節我們初步體驗了最單純的檢視設計,接下來進入另外一個階段,建立資料模型。

沒有留言: