新增控制器

Rick Anderson

注意

本教學課程的更新版本可在此取得,它使用最新版的Visual Studio。 新的教學課程使用 ASP.NET Core MVC,相比於本教學課程提供了許多改良。

本教學課程可讓您了解 ASP.NET Core MVC 與控制器和檢視。 Razor 頁面是 ASP.NET Core 中的新替代方案,它是以頁面為基礎的程式設計模型,可讓 Web UI 的建立更容易且更有效率。 我們建議您在嘗試 MVC 版本之前,先試試 Razor Pages 教學。 Razor 頁面教學:

  • 比較容易理解。
  • 涵蓋更多功能。
  • 是開發新應用程式的建議方法。

MVC 代表模型-視圖-控制器。 MVC 是一種開發應用程式的模式,架構良好、可測試且容易維護。 MVC 型應用程式包含:

  • Models:代表應用程式資料,並且使用驗證邏輯來對該資料執行商務規則的類別。
  • Views:您的應用程式用來動態產生 HTML 回應的範本檔案。
  • Controllers:類別負責處理來自瀏覽器的請求、擷取模型資料,然後指定檢視模板以將回應傳回到瀏覽器。

我們會在本教學課程系列說明這些概念,並且示範如何使用它們來建置應用程式。

我們先從建立控制器類別開始。 在「方案總管」中,以滑鼠右鍵按一下「Controllers」資料夾,然後按一下「新增」,再選擇「控制器」。

螢幕擷取畫面顯示方案總管視窗,其中「控制器」的右鍵選單和「新增」的子選單已打開。

「新增架構」對話方塊按一下 [MVC 5 控制器 - 空白],然後按一下 [新增]

螢幕擷取畫面如下所示:[新增架構] 對話方塊中已選擇 [MVC 5 控制器 - 空白]。

將新的控制器命名為「HelloWorldController」,然後按一下 [新增]

新增控制器

請注意,方案總管 中已建立名為 HelloWorldController.cs 的新檔案,以及新的資料夾 Views\HelloWorld。 控制器在 IDE 中開啟。

螢幕擷取畫面顯示「HelloWorldController.cs」的標籤已開啟。在「方案總管」中,「HelloWorldController.cs」子資料夾和「HelloWorld」子資料夾被紅色圈起。

以下列程式碼取代檔案的內容。

using System.Web;
using System.Web.Mvc; 
 
namespace MvcMovie.Controllers 
{ 
    public class HelloWorldController : Controller 
    { 
        // 
        // GET: /HelloWorld/ 
 
        public string Index() 
        { 
            return "This is my <b>default</b> action..."; 
        } 
 
        // 
        // GET: /HelloWorld/Welcome/ 
 
        public string Welcome() 
        { 
            return "This is the Welcome action method..."; 
        } 
    } 
}

控制器方法會傳回 HTML 字串來當作範例。 控制器名為 HelloWorldController,而第一個方法則名為 Index。 接著我們從瀏覽器叫用它。 執行應用程式 (按 F5 或 Ctrl+F5)。 在瀏覽器中,將「HelloWorld」附加到位址列的路徑。 例如,在下圖中,它是 http://localhost:1234/HelloWorld.。在瀏覽器中,頁面會顯示如下圖的螢幕截圖。 在上述方法中,程式碼會直接傳回字串。 您命令系統只傳回 HTML,而它確實如此!

螢幕擷取畫面所示為 localhost 標籤,視窗中包含文字「這是我的預設操作」螢幕擷取畫面所示為「localhost」標籤,視窗中包含文字「這是我的預設操作」。

ASP.NET MVC 會根據傳入 URL 叫用不同的控制器類別 (和類別中的不同動作方法)。 ASP.NET MVC 使用的預設 URL 路由邏輯會使用如下格式來判斷要叫用的程式碼:

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

您可以在 App_Start/RouteConfig.cs 檔案設定路由的格式。

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
    );
}

如果您執行應用程式但不提供任何 URL 區段,它預設會使用「Home」控制器和上述程式碼預設區段所指定的「Index」方法。

URL 的第一個部分會判斷要執行的控制器類別。 因此,/HelloWorld 會對應到 HelloWorldController 類別。 URL 的第二部分則決定了類別要執行的動作方法。 因此,/HelloWorld/Index 會使 Index 方法的 HelloWorldController 類別執行。 請注意,我們只需要前往 /HelloWorld,系統預設就會使用 Index 方法。 這是因為名為 Index 的方法是預設方法,會在未明確指定方法時針對控制器呼叫。 URL 區段的第三個部分 (Parameters) 是路由資料。 我們稍後會在本教學課程中檢視路由資料。

瀏覽至 http://localhost:xxxx/HelloWorld/WelcomeWelcome 方法隨即執行,並傳回字串 "This is the Welcome action method..."。 預設的 MVC 對應是 /[Controller]/[ActionName]/[Parameters]. 在此 URL 中,控制器是 HelloWorld,而 Welcome 是動作方法。 您尚未使用 URL 的 [Parameters] 部分。

Screenshot that shows the local host tab with the text This is the Welcome action method in the window.螢幕擷取畫面所示為「本地主機」索引標籤,視窗中包含文字「這是歡迎動作方法」。

我們稍微修改範例,以便您將參數資訊從 URL 傳遞至控制器 (例如 /HelloWorld/Welcome?name=Scott&numtimes=4)。 變更 Welcome 方法以包含兩個參數,如下所示。 請注意,程式碼使用 C# 的選擇性參數功能,指定當參數 numTimes 未被賦值時,預設值為 1。

public string Welcome(string name, int numTimes = 1) {
     return HttpUtility.HtmlEncode("Hello " + name + ", NumTimes is: " + numTimes);
}

注意

安全性備註:上述程式碼會使用 HttpUtility.HtmlEncode 來保護應用程式免受惡意輸入(特別是 JavaScript)的攻擊。 如需更多資訊,檢視 將 HTML 編碼套用至字串以保護 Web 應用程式免於指令碼攻擊

執行應用程式並前往範例 URL (http://localhost:xxxx/HelloWorld/Welcome?name=Scott&numtimes=4)。 您可以在 URL 中針對 namenumtimes 嘗試不同的值。 ASP.NET MVC 模型繫結系統會自動將位於網址列查詢字串中的具名參數對應至方法的參數。

螢幕擷取畫面顯示一個瀏覽器視窗,URL 是 localhost:1234/HelloWorld/Welcome?name=Scott&numtimes=4。視窗中的文字是「Hello Scott,次數是 4」。

在上方的範例中,URL 區段 (Parameters) 未被使用,namenumTimes 參數則是以 查詢字串 的形式傳遞。 ? 上述 URL 中的 (?) 是分隔符號,隨後接著查詢字串。 & 字元可分隔查詢字串。

以下列程式碼取代 Welcome 方法:

public string Welcome(string name, int ID = 1)
{
    return HttpUtility.HtmlEncode("Hello " + name + ", ID: " + ID);
}

執行應用程式並輸入以下 URL:http://localhost:xxx/HelloWorld/Welcome/1?name=Scott

螢幕擷取畫面顯示瀏覽器視窗,URL 為 localhost:1234/HelloWorld/Welcome/1?name=Scott。視窗中的文字為「Hello Scott ID 1」。

這次第三個 URL 區段符合路由參數 ID.Welcome 動作方法包含的參數 (ID) 與 RegisterRoutes 方法指定的 URL 相符。

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
    );
}

在 ASP.NET MVC 應用程式中,以路由資料的形式傳入參數 (例如上述操作 ID 的方式) 比以查詢字串的形式傳遞參數更常見。 您也可以新增一個路徑,在 URL 中以路由資料形式將 namenumtimes 傳入參數。 在 App_Start\RouteConfig.cs 檔案新增「Hello」路由:

public class RouteConfig
{
   public static void RegisterRoutes(RouteCollection routes)
   {
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

      routes.MapRoute(
          name: "Default",
          url: "{controller}/{action}/{id}",
          defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
      );

      routes.MapRoute(
           name: "Hello",
           url: "{controller}/{action}/{name}/{id}"
       );
   }
}

執行應用程式並前往 /localhost:XXX/HelloWorld/Welcome/Scott/3

Screenshot that shows a browser window with the U R L local host colon 1 2 3 4 forward slash Hello World forward slash Welcome forward slash Scott forward slash 3. The text in the window is Hello Scott ID 3.此螢幕擷取畫面顯示在瀏覽器視窗中,URL 是 localhost:1234/HelloWorld/Welcome/Scott/3,視窗中的文字為「Hello Scott ID 3」。

對許多 MVC 應用程式而言,預設路由即可運作正常。 您會在本教學課程稍後瞭解如何使用模型繫結器來傳遞資料,且不需要修改預設路由。

在這些範例中,控制器已執行 MVC 的「VC」部分,也就是檢視和控制器工作。 控制器會直接傳回 HTML。 一般來說,您不會希望控制器直接傳回 HTML,因為撰寫程式碼會變得很麻煩。 我們通常會使用個別的檢視範本檔案來產生 HTML 回應。 我們來看看如何執行這項操作。