Deila með

Tutorial: Get started with C# and ASP.NET Core in Visual Studio

  • Grein

Applies to: yesVisual Studio noVisual Studio for Mac

Note

This article applies to Visual Studio 2017. If you're looking for the latest Visual Studio documentation, see Visual Studio documentation. We recommend upgrading to the latest version of Visual Studio. Download it here

In this tutorial for C# development with ASP.NET Core, you'll create a C# ASP.NET Core web app in Visual Studio.

This tutorial will show you how to:

  • Create a Visual Studio project
  • Create a C# ASP.NET Core web app
  • Make changes to the web app
  • Explore IDE features
  • Run the web app

Prerequisites

You need Visual Studio to complete this tutorial. Visit the Visual Studio downloads page for a free version.

Create a project

First, you'll create an ASP.NET Core project. The project type comes with all the template files you'll need to build a fully functional website.

  1. Open Visual Studio 2017.

  2. From the top menu bar, select File > New > Project.

  3. In the New Project dialog box in the left pane, expand Visual C#, expand Web node, and then select .NET Core. In the middle pane, select ASP.NET Core Web Application. Next, name the file MyCoreApp and select OK.

    ASP.NET Core Web Application project template in the New Project dialog box in the Visual Studio IDE.

Add a workload (optional)

If you don't see the ASP.NET Core Web Application project template, you can get it by adding the ASP.NET and web development workload. You can add this workload in one of the two following ways, depending on which Visual Studio 2017 updates are installed on your machine.

Option 1: Use the New Project dialog box

  1. Select the Open Visual Studio Installer link in the left pane of the New Project dialog box. Depending on your display settings, you might have to scroll to see it.

    Select the Open Visual Studio Installer link from the New Project dialog box.

  2. After the Visual Studio Installer launches, select the ASP.NET and web development workload, and then select Modify. Visual Studio may have to close, while installing the selected workload.

    .NET Core cross-platform development workload in the Visual Studio Installer.

Option 2: Use the Tools menu bar

  1. Cancel out of the New Project dialog box. Then, from the top menu bar, select Tools > Get Tools and Features.

  2. After the Visual Studio Installer launches, select the ASP.NET and web development workload, and select Modify. Visual Studio may have to close, while installing the selected workload.

Add a project template

  1. In the New ASP.NET Core Web Application dialog box, select the Web Application project template.

  2. Verify that ASP.NET Core 2.1 appears in the top drop-down menu. Then, select OK.

    New ASP.NET Core Web Application dialog box.

    Note

    If you don't see ASP.NET Core 2.1 from the top drop-down menu, make sure that you are running the most recent release of Visual Studio. For more information about how to update your installation, see the Update Visual Studio to the most recent release. page.

About your solution

This solution follows the Razor Page design pattern. It's different than the Model-View-Controller (MVC) design pattern in that it's streamlined to include the model and controller code within the Razor Page itself.

Tour your solution

  1. The project template creates a solution with a single ASP.NET Core project that is named MyCoreApp. Select the Solution Explorer tab to view its contents.

    Screenshot shows the MyCoreApp project selected in the Solution Explorer in Visual Studio.

  2. Expand the Pages folder, and then expand About.cshtml.

    Screenshot shows the About dot c s h t m l file selected in the Solution Explorer in Visual Studio.

  3. View the About.cshtml file in the code editor.

    Screenshot shows the text of the About dot c s h t m l file in the Visual Studio code editor.

  4. Select the About.cshtml.cs file.

    Screenshot shows the About dot c s h t m l dot c s file selected in the Solution Explorer in Visual Studio.

  5. View the About.cshtml.cs file in the code editor.

    Screenshot shows the content of the About dot c s h t m l dot c s file in the Visual Studio code editor.

  6. The project contains a wwwroot folder that is the root for your website. Expand the folder to view its contents.

    Screenshot shows the w w w root folder selected in the Solution Explorer in Visual Studio.

    You can put static site content—such as CSS, images, and JavaScript libraries—directly in the paths where you want them.

  7. The project also contains configuration files that manage the web app at run time. The default application configuration is stored in appsettings.json. However, you can override these settings by using appsettings.Development.json. Expand the appsettings.json node to view the appsettings.Development.json file.

    Screenshot shows appsettings dot j son selected and expanded in the Solution Explorer in Visual Studio.

Run, debug, and make changes

  1. Select the IIS Express button in the toolbar, to build and run the app in debug mode. Alternatively, press F5, or go to Debug > Start Debugging from the menu bar.

    Screenshot shows I I S Express button highlighted in the toolbar in Visual Studio.

    Note

    If you get an error message that says Unable to connect to web server 'IIS Express', close Visual Studio and then relaunch the program as an administrator. You can do this by right-clicking the Visual Studio icon from the Start Menu, and then selecting the Run as administrator option from the context menu.

    You might also get a message that asks if you want to accept an IIS SSL Express certificate. To view the code in a web browser, select Yes, and then select Yes if you receive a follow-up security warning message.

  2. Visual Studio launches a browser window. You should then see Home, About, and Contact pages in the menu bar. If you don't see the pages, select the "hamburger" menu item to view them.

    Screenshot shows the MyCoreApp project and the hamburger menu item highlighted in the menu bar of your web app.

  3. Select About from the menu bar.

    Screenshot shows About highlighted in the menu bar of your web app.

    Among other things, the About page in the browser renders the text that is set in the About.cshtml file.

    Screenshot shows the About page in your web app.

  4. Return to Visual Studio, and then press Shift+F5 to stop debugging. This action closes the project in the browser window.

  5. In Visual Studio, select About.cshtml. Then, delete the word another and replace it with file and directory.

    Screenshot shows the content in the About dot c s h t m l file in the Visual Studio code editor.

  6. Select About.cshtml.cs. Then, clean up the using directives at the top of the file by using the following shortcut:

    Mouseover or select a greyed out using directive. A Quick Actions light bulb will appear just below the caret or in the left margin. Select the light bulb, and then select Remove Unnecessary Usings.

    Screenshot shows Remove Unnecessary Usings highlighted. It's below the Quick Actions light bulb icon.

    Visual Studio deletes the unnecessary using directives from the file.

  7. Next, in the OnGet() method, change the body to the following code:

    public void OnGet()
{
    string directory = Environment.CurrentDirectory;
    Message = String.Format("Your directory is {0}.", directory);
}

  8. Notice that two wavy underlines appear under Environment and String. The wavy underlines appear because these types aren't in scope.

    Screenshot shows error marks, in the form of wavy underlines, for Environment and String in the code editor.

    Open the Error List toolbar to see the same errors listed there. If you don't see the Error List toolbar, go to View > Error List from the top menu bar.

    Screenshot shows the Error List toolbar in Visual Studio with Environment and String listed.

  9. Let's fix this error. In the code editor, place your cursor on either line that contains the error, and then select the Quick Actions light bulb in the left margin. Then, from the drop-down menu, select using System; to add this directive to the top of your file and resolve the errors.

    Screenshot shows the Quick Actions options from its drop-down menu with a mouseover on using System.

  10. Press Ctrl+S to save your changes, and then press F5 to open your project in the web browser.

  11. At the top of the website, select About to view your changes.

    Screenshot shows the About page in your web page with the your changes.

  12. Close the web browser, press Shift+F5 to stop debugging.

Change your About page

  1. In the Solution Explorer, expand the Pages folder, and then select About.cshtml.

    Screenshot shows About dot c s h t m l selected under the Pages node in the Solution Explorer.

    The About.cshtml file corresponds to a page that's titled About in the web app, which runs in a web browser.

    Screenshot shows the About page for the web app in the browser window.

    In the code editor, you'll see HTML code for the text that appears on the About page.

    Screenshot shows the About dot c s h t m l file for the Home page in the Visual Studio code editor.

  2. Replace Use this area to provide additional information text with Hello World!

    Screenshot shows the About dot c s h t m l file in the Visual Studio code editor with the default text changed to Hello World!

  3. In the Solution Explorer, expand About.cshtml and then select About.cshtml.cs. This file also corresponds with the About page in the web browser.

    Screenshot shows the About dot c s h t m l dot c s file selected under the About dot c s h t m l node in the Solution Explorer.

    In the code editor, you'll see C# code that includes text for the application description area of the About page.

    Screenshot shows C Sharp code for the application description area in the code editor.

  4. Replace Your application description page text with What's my message?

    Screenshot in the code editor shows the text changed from Your application description here to What's my message?

  5. Select IIS Express or press Ctrl+F5 to run the app and open it in a web browser.

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio

  6. In the web browser, you'll see your new changes on the About page.

    Screenshot shows the About page for the web app in the browser window. The updated text says What's my message? Hello World!

  7. Close the web browser, press Shift+F5 to stop debugging, and save your project. You can now close Visual Studio.

Review your work

View the following animation to check the work that you completed in the previous section:

Animated gif shows all the steps for changing the About page text.

Next steps

Congratulations on completing this tutorial! We hope you enjoyed learning about C#, ASP.NET Core, and the Visual Studio IDE. To learn more about creating a web app or website with C# and ASP.NET, continue with the following tutorial:

Create a Razor Pages web app with ASP.NET Core

Or, learn how to containerize your web app with Docker:

Container Tools in Visual Studio

See also

Publish your web app to Azure App Service by using Visual Studio