ASP.NET Core MVC 使用者入門Get started with ASP.NET Core MVC

作者：Rick AndersonBy Rick Anderson

本教學課程可讓您了解 ASP.NET Core MVC web 開發與控制器和檢視。This tutorial teaches ASP.NET Core MVC web development with controllers and views. 如果您不熟悉 ASP.NET Core 的 網頁程式開發，請考慮本教學課程的 Razor 頁面版本，這可提供更簡單的起點。If you're new to ASP.NET Core web development, consider the Razor Pages version of this tutorial, which provides an easier starting point.

這是一個系列的第一個教學課程，教您使用控制器和 views ASP.NET 核心 MVC 網頁程式開發。This is the first tutorial of a series that teaches ASP.NET Core MVC web development with controllers and views.

在系列結束時，您將會有一個可管理及顯示電影資料的應用程式。At the end of the series, you'll have an app that manages and displays movie data. 您會了解如何：You learn how to:

  • 建立 Web 應用程式。Create a web app.
  • 新增並建構模型。Add and scaffold a model.
  • 使用資料庫。Work with a database.
  • 新增搜尋和驗證。Add search and validation.

檢視或下載範例程式碼 (如何下載)。View or download sample code (how to download).

必要條件Prerequisites

建立 Web 應用程式Create a web app

  • 啟動 Visual Studio，然後選取 [建立新專案]。Start Visual Studio and select Create a new project.
  • 在 [ 建立新專案 ] 對話方塊中，選取 [下一步] ASP.NET Core Web 應用程式 > ****。In the Create a new project dialog, select ASP.NET Core Web Application > Next.
  • 在 [ 設定您的新專案 ] 對話方塊中，輸入 [ MvcMovie 專案名稱]。In the Configure your new project dialog, enter MvcMovie for Project name. 請務必將專案命名為 MvcMovie。It's important to name the project MvcMovie. 複製程式碼時，大小寫必須符合每個 namespace 相符專案。Capitalization needs to match each namespace matches when code is copied.
  • 選取 [建立] 。Select Create.
  • 在 [ 建立新的 ASP.NET Core web 應用程式 ] 對話方塊中，選取：In the Create a new ASP.NET Core web application dialog, select:
    • 下拉式清單中的 .Net core 和 ASP.NET core 5.0 。.NET Core and ASP.NET Core 5.0 in the dropdowns.
    • ASP.NET Core Web 應用程式 (模型-視圖控制器)。ASP.NET Core Web App (Model-View-Controller).
    • Create。Create.

建立新的 ASP.NET Core web 應用程式Create a new ASP.NET Core web application

如需建立專案的替代方法，請參閱 在 Visual Studio 中建立新專案。For alternative approaches to create the project, see Create a new project in Visual Studio.

Visual Studio 已針對建立的 MVC 專案使用預設專案範本。Visual Studio used the default project template for the created MVC project. 建立的專案：The created project:

  • 是正常運作的應用程式。Is a working app.
  • 是基本的入門專案。Is a basic starter project.

執行應用程式Run the app

  • 選取 Ctrl + F5 以執行應用程式，而不執行偵錯工具。Select Ctrl+F5 to run the app without the debugger.

    Visual Studio 會顯示下列對話方塊：Visual Studio displays the following dialog:

    此專案設定為使用 SSL。

    如果您信任 IIS Express SSL 憑證，請選取 [是]。Select Yes if you trust the IIS Express SSL certificate.

    此時會顯示下列對話方塊：The following dialog is displayed:

    安全性警告對話方塊

    若您同意信任開發憑證，請選取 [是]。Select Yes if you agree to trust the development certificate.

    如需有關信任 Firefox 瀏覽器的詳細資訊，請參閱 firefox SEC_ERROR_INADEQUATE_KEY_USAGE 憑證錯誤。For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

    Visual Studio：Visual Studio:

    位址列會顯示 localhost:port#，而不是類似於 example.com 的內容。The address bar shows localhost:port# and not something like example.com. 本機電腦的標準主機名稱為 localhost 。The standard hostname for your local computer is localhost. 當 Visual Studio 建立 Web 專案時，會為網頁伺服器使用隨機連接埠。When Visual Studio creates a web project, a random port is used for the web server.

藉由選取 Ctrl + F5 啟動應用程式而不進行偵錯工具，可讓您：Launching the app without debugging by selecting Ctrl+F5 allows you to:

  • 變更程式碼。Make code changes.
  • 儲存檔案。Save the file.
  • 快速重新整理瀏覽器並查看程式碼變更。Quickly refresh the browser and see the code changes.

您可以從 [偵錯] 功能表項目的偵錯或非偵錯模式中啟動應用程式：You can launch the app in debug or non-debug mode from the Debug menu item:

[偵錯] 功能表

您可以選取 [IIS Express] 按鈕偵錯應用程式You can debug the app by selecting the IIS Express button

IIS Express

下圖顯示應用程式：The following image shows the app:

Home 或 Index 頁面

在本教學課程的下一個部分中，您會了解 MVC，並開始撰寫一些程式碼。In the next part of this tutorial, you learn about MVC and start writing some code.

下一步：新增控制器Next: Add a controller

本教學課程可讓您了解 ASP.NET Core MVC web 開發與控制器和檢視。This tutorial teaches ASP.NET Core MVC web development with controllers and views. 如果您不熟悉 ASP.NET Core 的 網頁程式開發，請考慮本教學課程的 Razor 頁面版本，這可提供更簡單的起點。If you're new to ASP.NET Core web development, consider the Razor Pages version of this tutorial, which provides an easier starting point.

這是一個系列的第一個教學課程，教您使用控制器和 views ASP.NET 核心 MVC 網頁程式開發。This is the first tutorial of a series that teaches ASP.NET Core MVC web development with controllers and views.

在系列結束時，您將會有一個可管理及顯示電影資料的應用程式。At the end of the series, you'll have an app that manages and displays movie data. 您會了解如何：You learn how to:

  • 建立 Web 應用程式。Create a web app.
  • 新增並建構模型。Add and scaffold a model.
  • 使用資料庫。Work with a database.
  • 新增搜尋和驗證。Add search and validation.

檢視或下載範例程式碼 (如何下載)。View or download sample code (how to download).

必要條件Prerequisites

建立 Web 應用程式Create a web app

  • 從 Visual Studio 中，選取 [ 建立新專案]。From the Visual Studio, select Create a new project.

  • 選取 [下一步 ASP.NET Core Web 應用程式 > ]。Select ASP.NET Core Web Application > Next.

    建立新的 ASP.NET Core Web 應用程式專案

  • 將專案命名為 MvcMovie，然後選取 [建立]。Name the project MvcMovie and select Create. 請務必將專案命名為 MvcMovie，以便在複製程式碼時，命名空間得以相符。It's important to name the project MvcMovie so when you copy code, the namespace will match.

    設定您的新專案

  • 選取 Web 應用程式 (模型-視圖控制器)。Select Web Application(Model-View-Controller). 從下拉式方塊中，選取 [ .Net core ] 和 [ ASP.NET Core 3.1]，然後選取 [ 建立]。From the dropdown boxes, select .NET Core and ASP.NET Core 3.1, then select Create.

    [新增專案] 對話方塊、左窗格中的 [.Net Core]、ASP.NET Core WebNew project dialog, .NET Core in left pane, ASP.NET Core web

Visual Studio 已針對建立的 MVC 專案使用預設專案範本。Visual Studio used the default project template for the created MVC project. 建立的專案：The created project:

  • 是正常運作的應用程式。Is a working app.
  • 是基本的入門專案。Is a basic starter project.

執行應用程式Run the app

  • 選取 Ctrl + F5 以執行應用程式，而不進行任何偵錯工具。Select Ctrl+F5 to run the app without debugging.

    Visual Studio 會顯示下列對話方塊：Visual Studio displays the following dialog:

    此專案設定為使用 SSL。

    如果您信任 IIS Express SSL 憑證，請選取 [是]。Select Yes if you trust the IIS Express SSL certificate.

    此時會顯示下列對話方塊：The following dialog is displayed:

    安全性警告對話方塊

    若您同意信任開發憑證，請選取 [是]。Select Yes if you agree to trust the development certificate.

    如需有關信任 Firefox 瀏覽器的詳細資訊，請參閱 firefox SEC_ERROR_INADEQUATE_KEY_USAGE 憑證錯誤。For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

    Visual Studio：Visual Studio:

    位址列會顯示 localhost:port#，而不是類似於 example.com 的內容。The address bar shows localhost:port# and not something like example.com. 本機電腦的標準主機名稱為 localhost 。The standard hostname for your local computer is localhost. 當 Visual Studio 建立 Web 專案時，會為網頁伺服器使用隨機連接埠。When Visual Studio creates a web project, a random port is used for the web server.

藉由選取 Ctrl + F5 啟動應用程式而不進行偵錯工具，可讓您：Launching the app without debugging by selecting Ctrl+F5 allows you to:

  • 變更程式碼。Make code changes.
  • 儲存檔案。Save the file.
  • 快速重新整理瀏覽器並查看程式碼變更。Quickly refresh the browser and see the code changes.

您可以從 [偵錯] 功能表項目的偵錯或非偵錯模式中啟動應用程式：You can launch the app in debug or non-debug mode from the Debug menu item:

[偵錯] 功能表

您可以選取 [IIS Express] 按鈕偵錯應用程式You can debug the app by selecting the IIS Express button

IIS Express

下圖顯示應用程式：The following image shows the app:

Home 或 Index 頁面

在本教學課程的下一個部分中，您會了解 MVC，並開始撰寫一些程式碼。In the next part of this tutorial, you learn about MVC and start writing some code.

下一步Next