ASP.NET Core Web App Quickstart

Build your first web application with ASP.NET Core

Introduction

Welcome to the ASP.NET Core Web App Quickstart guide. This guide will walk you through the essential steps to create a simple web application using ASP.NET Core, one of the most popular frameworks for building modern, cloud-ready web applications.

ASP.NET Core is a cross-platform, high-performance, open-source framework for building internet-connected applications that can run on Windows, macOS, and Linux.

Prerequisites

Before you begin, ensure you have the following installed:

Step 1: Create a New ASP.NET Core Web App Project

Create the Project

Open your terminal or command prompt and navigate to the directory where you want to create your project. Then, run the following command:

dotnet new webapp -o MyWebApp

This command creates a new web app project named MyWebApp in a new directory of the same name.

Navigate to the Project Directory

Change your current directory to the newly created project folder:

cd MyWebApp

Step 2: Understand the Project Structure

After creating the project, you'll see a structure like this:

MyWebApp/
├── MyWebApp.csproj
├── Pages/
│   ├── _ViewImports.cshtml
│   ├── _ViewStart.cshtml
│   ├── Error.cshtml
│   ├── Error.cshtml.cs
│   ├── Index.cshtml
│   ├── Index.cshtml.cs
│   └── ... (other Razor Pages)
├── Properties/
│   └── launchSettings.json
├── appsettings.json
├── appsettings.Development.json
└── Program.cs

Step 3: Run Your Application

Run the Development Server

From your project directory (MyWebApp/), run the following command to start the built-in web server:

dotnet run

The output will show you the URLs your application is listening on. Typically, it will be something like:

info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5000
      Now listening on: https://localhost:5001
View Your App in the Browser

Open your web browser and navigate to one of the URLs provided (e.g., http://localhost:5000). You should see the default ASP.NET Core welcome page.

Step 4: Modify a Razor Page

Let's make a small change to the homepage (Pages/Index.cshtml).

Edit Pages/Index.cshtml

Open Pages/Index.cshtml in your code editor and modify the content. For example, change the heading:

<h1>Hello from my first ASP.NET Core App!</h1>
Refresh Your Browser

Save the changes in Index.cshtml. If your application is still running, simply refresh your browser page. You should see your updated heading.

Step 5: Add a New Razor Page

Let's create a new page called "About".

Create Pages/About.cshtml

Create a new file named About.cshtml inside the Pages/ directory with the following content:

<!DOCTYPE html>
<html>
<head>
    <title>About Us</title>
</head>
<body>
    <h1>About This Application</h1>
    <p>This is a sample web application built with ASP.NET Core.</p>
</body>
</html>
Navigate to the New Page

Save the file and, in your browser, navigate to http://localhost:5000/About. You should see the content of your new About page.

Tip: For more complex applications, you'll likely want to create a corresponding code-behind file (e.g., About.cshtml.cs) for your Razor Pages to handle data fetching and business logic.

Next Steps

Congratulations! You've successfully created and run your first ASP.NET Core web application.