掉進 ASP.NET MVC 馬里亞納海溝的第二天：URL 特性 + Controller 和 View 的關係

發表於 更新於 分類於
AdSense

MVC 結構

MVC 的結構如下圖：

一開始瀏覽器在向網頁伺服器要求時，一定會先經過 Controller。因此可知：

沒有 Controller 只有 View 是無法產生畫面的。
一定要有 Controller 才能產生畫面。如：前一天的 Hello World，沒有 View 也沒關係。

MVC URL 特性

MVC 網址並不是依照資料夾名稱，而是由 Controller 前面的名稱和該控制器底下的 Action Method 名稱組合而成，以斜線分開。

由 MVC 網址特性，也可以感受到程式利用 Controller 和 Action 來操縱 View 的特性。

透過網址呼叫特定 Action，回傳特定資料，並且呈現在瀏覽器畫面上。

新增 Controller 和命名

在稍微了解 URL 的特性之後，接著我們來建立一個新的 Controller 和為它命名 (決定出現在網址的控制器名字)：

  1. 滑鼠右鍵點擊方案總管中 Controllers 資料夾 >> Add >> Controller。
  2. 選擇 Empty 控制器。
  3. 為控制器命名，只更改 Default，保留後面的 Controller，變成 XxxController (第一個字建議大寫)。MVC 網址中就會以 Xxx 組合而成。

MVC Routing 方式

在 Global.asax 檔案中，可以看到 RegisterRoutes() 方法。對方法：點擊右鍵 >> Go To Definition。

會打開 App_Start 資料夾底下的 RouteConfig.cs 檔案，可以看到在 RegisterRoutes() 方法中，有一個 routes.MapRoute();。其中第 17 行 name: "Defualt", 表示下方定義的是預設的路由位置，並且網址可以不顯示。

因此，如果網址中沒有顯示 controller 和 action 的名字，表示預設導向至 Home 控制器底下的 Index 方法。

如果 Home 控制器底下沒有 Index 方法，上方會出現 404 錯誤。

如何接收網址中的 ID 和查詢字串？

定義 Action method 時，可以定義接收 ID 的 parameter，如下圖。如果網址中沒有 ID 和查詢字串，畫面即不顯示，不會出錯。

接收 ID

網址中有 ID 時，呈現在畫面：

接收查詢字串

網址中有 ID 和查詢字串時，以 Request.QueryString[查詢字串的key] 來接收查詢字串的 value，呈現在畫面：

或是以 Action method 的 parameter 來接收查詢字串的 value，如下：

Controller 和 View 的關係

Controllers 資料夾 中的控制器，會對應到 Views 資料夾 中的視圖資料夾，而且名稱會對應，如下圖：

因為，我們在新增一個 Controller 時，程式會依照你的命名，產生一個相同名字的視圖資料夾。

Controller 中 Action 和 View 的關係

前面提過，一定要有 Controller 才能產生畫面。其實是指 Controller 中要定義 Action method。

因此又可以說是：
沒有 Controller 中的 Action，只有 View 是無法產生畫面的。
一定要有 Controller 中的 Action 才能產生畫面。

瀏覽器在向網頁伺服器發出 Request 時，一定會先經過 Controller，再藉由 Controller 中的 Action method 來決定產生什麼樣的畫面。以下依照不同的回傳值簡介三種類型：和 Action 對應的同名視圖、產生指定的不同名視圖、輸出字串到畫面。

和 Action 對應的同名視圖

如果 Action 的回傳型態是 ActionResult 且回傳值是 View()，則 Views 底下和 Controller 同名的資料夾 中，會有相對應和 Action 同名的 .cshtml 檔案。

例：
如 MVC URL 特性提到的，藉由網址輸入 .../TestView 來調用 TestView() Action method。

回傳值 View()，表示有一個和 Action 同名的 TestView.cshtml 視圖檔案，會將畫面顯示在瀏覽器上，如下圖。

這種做法的 Action 需要產生相對應的同名視圖檔案，否則報錯。

如果是新增的 Action 就會沒有相對應的視圖檔案。

新增視圖檔案的步驟：右鍵點擊 Action method 名稱 >> Add View… >> 勾選和範本選擇如下圖 (初學者版本) >> OK

產生指定的不同名視圖

藉由網址輸入 .../TestView1 或 .../TestView2 來調用 TestView1() 或 TestView2() Action method。

回傳值 View("TestView") 和 View("~/Views/Home/TestView.cshtml")，兩種寫法都可以用來表示將和 Action不同名的特定視圖，顯示在瀏覽器畫面上。

指定「檔名」

指定「完整路徑和檔名」

1
2
3
// 產生不同名視圖
return View("檔名")
return View("完整路徑+檔名") // 注意：要加副檔名

這種做法的 Action 不需要產生相對應的同名視圖檔案。

輸出字串到畫面

一樣藉由網址 .../TestString1 或 .../TestString2 來調用 TestString1() 或 TestString2() Action method。

有兩種回傳值的寫法，都可以產生在畫面上，如下：

回傳型態是 string

回傳型態是 ActionResult

1
2
3
// 輸出字串
return "字串"
return Content("字串")

這種做法的 Action 不需要產生相對應的同名視圖檔案。