ASP.NET MVC 5 の概要Getting started with ASP.NET MVC 5

によってRick Andersonby Rick Anderson

このチュートリアルの更新バージョンが利用可能なここの最新バージョンを使用してVisual Studioします。An updated version of this tutorial is available here using the latest version of Visual Studio. 新しいチュートリアルは ASP.NET Core MVC を使用しており、このチュートリアルよりも多くの改善点が含まれています。The new tutorial uses ASP.NET Core MVC, which provides many improvements over this tutorial.

このチュートリアルでは、ASP.NET Core MVC のコントローラーとビューについて説明します。This tutorial teaches ASP.NET Core MVC with controllers and views. ASP.NET Core 2.0 の新しい代替である Razor ページはページ ベースのプログラミング モデルであり、Web UI の開発を容易にし、生産性を高めます。Razor Pages is a new alternative in ASP.NET Core 2.0, a page-based programming model that makes building web UI easier and more productive. MVC のバージョンの前に、Razor ページのチュートリアルを試すことをお勧めします。We recommend you try the Razor Pages tutorial before the MVC version. この Razor ページのチュートリアルの特徴は次のとおりです。The Razor Pages tutorial:

  • 理解しやすい。Is easier to follow.
  • 多くの機能をカバーしている。Covers more features.
  • 新しいアプリケーションの開発で推奨されるアプローチである。Is the preferred approach for new application development.

このチュートリアルは、ASP.NET MVC 5 web アプリを使用して、構築の基礎を説明Visual Studio 2017します。This tutorial teaches you the basics of building an ASP.NET MVC 5 web app using Visual Studio 2017. チュートリアルでは、最終的なソース コードが上にあるGitHubします。The final source code for the tutorial is located on GitHub.

このチュートリアルの執筆者Scott Guthrie (twitter @scottgu )、 Scott Hanselman (twitter: @shanselman )、およびRick Anderson ( @RickAndMSFT )This tutorial was written by Scott Guthrie (twitter@scottgu ), Scott Hanselman (twitter: @shanselman ), and Rick Anderson ( @RickAndMSFT )

このアプリを Azure にデプロイする Azure アカウントが必要です。You need an Azure account to deploy this app to Azure:

作業開始Get started

まずVisual Studio 2017 をインストールするします。Start by installing Visual Studio 2017. 次に、Visual Studio を開きます。Then, open Visual Studio.

Visual Studio は、IDE、または統合開発環境です。Visual Studio is an IDE, or integrated development environment. Microsoft Word を使用してドキュメントを記述するのにのと同じようにアプリケーションを作成、IDE を使用します。Just like you use Microsoft Word to write documents, you'll use an IDE to create applications. Visual Studio を使用できるさまざまなオプションを示す下部の一覧です。In Visual Studio, there's a list along the bottom showing various options available to you. また、IDE でタスクを実行する別の方法を提供するメニューがあります。There's also a menu that provides another way to perform tasks in the IDE. 選択する代わりに、新しいプロジェクト上、スタート ページ、メニュー バーを使用して選択ファイル > の新しいプロジェクト.For example, instead of selecting New Project on the Start page, you can use the menu bar and select File > New Project.

最初のアプリの作成Create your first app

スタート ページ新しいプロジェクトします。On the Start page, select New Project. 新しいプロジェクトダイアログ ボックスで、 Visual c# し、左側のカテゴリWeb、クリックして、 ASP.NET Web アプリケーション (.NET Framework) プロジェクト テンプレート。In the New project dialog box, select the Visual C# category on the left, then Web, and then select the ASP.NET Web Application (.NET Framework) project template. プロジェクトに"MvcMovie"という名前にしてOKします。Name your project "MvcMovie" and then choose OK.

新しい ASP.NET Web アプリケーションダイアログ ボックスで、選択MVC選び、 OKします。In the New ASP.NET Web Application dialog, choose MVC and then choose OK.

Visual Studio は、何もせず、実用的なアプリケーションが現在あるため、作成した ASP.NET MVC プロジェクトの既定のテンプレートを使用!Visual Studio used a default template for the ASP.NET MVC project you just created, so you have a working application right now without doing anything! これは、単純です"Hello World!"This is a simple "Hello World!" プロジェクト、およびそのアプリケーションにお勧めです。project, and it's a good place to start your application.

F5 キーを押してデバッグを開始します。Press F5 to start debugging. 押したときF5、Visual Studio の起動時にIIS Expressし、web アプリを実行します。When you press F5, Visual Studio starts IIS Express and runs your web app. Visual Studio は、ブラウザーを起動し、アプリケーションのホーム ページを開きます。Visual Studio then launches a browser and opens the application's home page. ブラウザーのアドレス バーが表示されますがlocalhost:port#ようなものではありませんexample.comします。Notice that the address bar of the browser says localhost:port# and not something like localhost常にこの例でビルドしたアプリケーションを実行して、自分のローカル コンピューターを指します。That's because localhost always points to your own local computer, which in this case is running the application you just built. Visual Studio web プロジェクトを実行すると、web サーバーのランダムなポートが使用されます。When Visual Studio runs a web project, a random port is used for the web server. 次の図では、ポート番号は、1234 です。In the image below, the port number is 1234. アプリケーションを実行するときに、別のポート番号を確認します。When you run the application, you'll see a different port number.

すぐに使えるこの既定のテンプレートを使用するHomeContact、およびAboutページ。Right out of the box this default template gives you Home, Contact, and About pages. 次の画像が表示されない、ホームについて連絡先リンク。The image below doesn't show the Home, About, and Contact links. ブラウザー ウィンドウのサイズによっては、これらのリンクを参照するナビゲーション アイコンをクリックする必要があります。Depending on the size of your browser window, you might need to click the navigation icon to see these links.

アプリケーションには、登録し、ログインのサポートも提供します。The application also provides support to register and log in. 次の手順では、このアプリケーションの動作を変更し、ASP.NET MVC についてもう少し説明します。The next step is to change how this application works and learn a little bit about ASP.NET MVC. ASP.NET MVC アプリケーションを終了し、いくつかのコードを変更してみましょう。Close the ASP.NET MVC application and let's change some code.

現在のチュートリアルの一覧は、次を参照してください。の記事をお勧めします。 MVCします。For a list of current tutorials, see MVC recommended articles.

Azure で実行されているこのアプリを参照してください。See this app running on Azure

ライブ web アプリとして実行されている完成したサイトを参照してもよろしいですか。Would you like to see the finished site running as a live web app? Azure アカウントに、アプリの完全なバージョンを展開するには、次のボタンをクリックするだけです。You can deploy a complete version of the app to your Azure account by simply clicking the following button.

このソリューションを Azure にデプロイする Azure アカウントが必要です。You need an Azure account to deploy this solution to Azure. アカウントがない場合は、次のオプションのいずれかを使用して、1 つを作成します。If you don't already have an account, use one of the following options to create one: