本教學課程可讓您了解 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:
Visual Studio Code 指令會使用 .NET CLI 來 ASP.NET 核心開發功能,例如專案建立。The Visual Studio Code instructions use the .NET CLI for ASP.NET Core development functions such as project creation.您可以在 macOS、Linux 或 Windows 上,以及使用任何程式碼編輯器來遵循這些指示。You can follow these instructions on macOS, Linux, or Windows and with any code editor.如果您使用 Visual Studio Code 以外的工具,可能需要進行微幅變更。Minor changes may be required if you use something other than Visual Studio Code.
啟動 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).
變更至 cd 將包含專案的目錄 () 。Change to the directory (cd) that will contain the project.
執行以下命令:Run the following command:
dotnet new mvc -o MvcMovie
code -r MvcMovie
如果出現一個對話方塊,其中包含 要建立的必要資產,且 ' MvcMovie ' 中遺漏了 debug 錯。要新增它們嗎?,請選取 [是]If a dialog box appears with Required assets to build and debug are missing from 'MvcMovie'. Add them?, select Yes
dotnet new mvc -o MvcMovie:在 MvcMovie 資料夾中建立新的 ASP.NET Core MVC 專案。dotnet new mvc -o MvcMovie: Creates a new ASP.NET Core MVC project in the MvcMovie folder.
code -r MvcMovie:載入 Visual Studio Code 中的 MvcMovie .csproj 專案檔。code -r MvcMovie: Loads the MvcMovie.csproj project file in Visual Studio Code.
選取 [檔案][新增解決方案] > 。Select File > New Solution.
在8.6 版之前的 Visual Studio for Mac 中,選取 [ .net Core > 應用 > 程式 Web 應用程式] (模型-視圖控制器) > 下一步]。In Visual Studio for Mac earlier than version 8.6, select .NET Core > App > Web Application (Model-View-Controller) > Next.在8.6 版或更新版本中,選取 [ web] 和 [主控台 > 應用 > 程式 web 應用程式] (模型-視圖控制器) > 下一步]。In version 8.6 or later, select Web and Console > App > Web Application (Model-View-Controller) > Next.
在 [ 設定新的 Web 應用程式 ] 對話方塊中:In the Configure your new Web Application dialog:
確認 [ 驗證 ] 設定為 [ 無驗證]。Confirm that Authentication is set to No Authentication.
如果出現選取 目標 Framework 的選項,請選取最新的5.x 版。If an option to select a Target Framework is presented, select the latest 5.x version.
選取 [下一步] 。Select Next.
將專案命名為 MvcMovie,然後選取 [建立]。Name the project MvcMovie, and then select Create.
位址列會顯示 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
下圖顯示應用程式:The following image shows the app:
選取 Ctrl + F5 以在不執行偵錯工具的情況下執行。Select Ctrl+F5 to run without the debugger.
藉由執行下列命令來信任 HTTPS 開發憑證:Trust the HTTPS development certificate by running the following command:
dotnet dev-certs https --trust
上述命令無法在 Linux 上使用。The preceding command doesn't work on Linux.如需信任憑證的資訊,請參閱您的 Linux 發行版本文件。See your Linux distribution's documentation for trusting a certificate.
上述命令會顯示以下對話方塊:The preceding command displays the following dialog:
若您同意信任開發憑證,請選取 [是]。Select Yes if you agree to trust the development certificate.
流覽至 https://localhost:5001 。Navigates to https://localhost:5001.
位址列會顯示 localhost:port:5001,而不是類似於 example.com 的內容。The address bar shows localhost:port:5001 and not something like example.com.本機電腦的標準主機名稱為 localhost 。The standard hostname for your local computer is localhost.Localhost 只會為來自本機電腦的 Web 要求提供服務。Localhost only serves web requests from the local computer.
藉由選取 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.
選取 [執行][啟動但不偵錯] > 來啟動應用程式。Select Run > Start Without Debugging to launch the app.
位址列會顯示 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.
您可以從 [執行] 功能表的偵錯或非偵錯模式中啟動應用程式。You can launch the app in debug or non-debug mode from the Run menu.
本教學課程可讓您了解 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:
Visual Studio Code 指示針對 ASP.NET Core 開發函式 (例如專案建立) 使用 .NET Core CLI。The Visual Studio Code instructions use the .NET Core CLI for ASP.NET Core development functions such as project creation.您可以在任何平台 (macOS、Linux 或 Windows) 或任何程式碼編輯器中遵循這些指示。You can follow these instructions on any platform (macOS, Linux, or Windows) and with any code editor.如果您使用 Visual Studio Code 以外的工具,可能需要進行微幅變更。Minor changes may be required if you use something other than Visual Studio Code.如需有關在 macOS 上安裝 Visual Studio Code 的詳細資訊,請參閱 macOS 上的 Visual Studio Code。For more information on installing Visual Studio Code on macOS, see Visual Studio Code on macOS.
從 Visual Studio 中,選取 [ 建立新專案]。From the Visual Studio, select Create a new project.
選取 [下一步 ASP.NET Core Web 應用程式 > ]。Select ASP.NET Core Web Application > Next.
將專案命名為 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.
Visual Studio 已針對建立的 MVC 專案使用預設專案範本。Visual Studio used the default project template for the created MVC project.建立的專案:The created project:
將目錄 (cd) 變更為包含專案的資料夾。Change directories (cd) to a folder that will contain the project.
執行以下命令:Run the following command:
dotnet new mvc -o MvcMovie
code -r MvcMovie
會出現一個對話方塊,其中包含 建立和偵測所需的資產,但缺少 ' MvcMovie '。要加入它們嗎?,請選取 [是]。A dialog box appears with Required assets to build and debug are missing from 'MvcMovie'. Add them?, select Yes.
dotnet new mvc -o MvcMovie:在 MvcMovie 資料夾中建立新的 ASP.NET Core MVC 專案。dotnet new mvc -o MvcMovie: Creates a new ASP.NET Core MVC project in the MvcMovie folder.
code -r MvcMovie:載入 Visual Studio Code 中的 MvcMovie .csproj 專案檔。code -r MvcMovie: Loads the MvcMovie.csproj project file in Visual Studio Code.
選取 [檔案][新增解決方案] > 。Select File > New Solution.
在8.6 版之前的 Visual Studio for Mac 中,選取 [ .net Core > 應用 > 程式 Web 應用程式] (模型-視圖控制器) > 下一步]。In Visual Studio for Mac earlier than version 8.6, select .NET Core > App > Web Application (Model-View-Controller) > Next.在8.6 版或更新版本中,選取 [ web] 和 [主控台 > 應用 > 程式 web 應用程式] (模型-視圖控制器) > 下一步]。In version 8.6 or later, select Web and Console > App > Web Application (Model-View-Controller) > Next.
在 [ 設定新的 Web 應用程式 ] 對話方塊中:In the Configure your new Web Application dialog:
確認 [ 驗證 ] 設定為 [ 無驗證]。Confirm that Authentication is set to No Authentication.
如果出現選取 目標 Framework 的選項,請選取最新的3.x 版。If an option to select a Target Framework is presented, select the latest 3.x version.
選取 [下一步] 。Select Next.
將專案命名為 MvcMovie,然後選取 [建立]。Name the project MvcMovie, and then select Create.
位址列會顯示 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
下圖顯示應用程式:The following image shows the app:
選取 Ctrl + F5 以執行應用程式,而不進行任何偵錯工具。Select Ctrl+F5 to run the app without debugging.
藉由執行下列命令來信任 HTTPS 開發憑證:Trust the HTTPS development certificate by running the following command:
dotnet dev-certs https --trust
上述命令無法在 Linux 上使用。The preceding command doesn't work on Linux.如需信任憑證的資訊,請參閱您的 Linux 發行版本文件。See your Linux distribution's documentation for trusting a certificate.
上述命令會顯示以下對話方塊:The preceding command displays the following dialog:
若您同意信任開發憑證,請選取 [是]。Select Yes if you agree to trust the development certificate.
流覽至 https://localhost:5001 。Navigates to https://localhost:5001.
位址列會顯示 localhost:port:5001,而不是類似於 example.com 的內容。The address bar shows localhost:port:5001 and not something like example.com.本機電腦的標準主機名稱為 localhost 。The standard hostname for your local computer is localhost.Localhost 只會為來自本機電腦的 Web 要求提供服務。Localhost only serves web requests from the local computer.
藉由選取 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.
選取 [執行][啟動但不偵錯] > 來啟動應用程式。Select Run > Start Without Debugging to launch the app.
Visual Studio for Mac:啟動 Kestrel 伺服器、啟動瀏覽器,然後流覽至 http://localhost:port ,其中 埠 是隨機播放的埠號碼。Visual Studio for Mac: starts Kestrel server, launches a browser, and navigates to http://localhost:port, where port is a randomly chosen port number.
Visual Studio for Mac 會顯示下列快顯視窗:Visual Studio for Mac displays the following popup:
如果您信任開發憑證,請選取 [是] 。Select Yes if you trust the development certificate.
此時會顯示下列對話方塊:The following dialog is displayed:
輸入您的密碼,然後選取 [確定]Enter your password and select OK
若您同意信任開發憑證,請選取 [是]。Select Yes if you agree to trust the development certificate.
位址列會顯示 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.當您執行應用程式時,會看到不同的連接埠編號。When you run the app, you'll see a different port number.
您可以從 [執行] 功能表的偵錯或非偵錯模式中啟動應用程式。You can launch the app in debug or non-debug mode from the Run menu.