Building Your First ASP.NET Core App

A step-by-step guide to creating a basic web application with ASP.NET Core.

Introduction to ASP.NET Core

ASP.NET Core is a cross-platform, high-performance, open-source framework for building modern, cloud-based, Internet-connected applications, such as web apps, IoT apps, and mobile backends.

Prerequisites

Before you begin, ensure you have the following installed:

You can download the .NET SDK from the official Microsoft .NET website.

Step 1: Create a New Project

1 Open your terminal or command prompt.

2 Navigate to the directory where you want to create your project.

3 Run the following command to create a new ASP.NET Core web application:

dotnet new webapp -o MyFirstApp

This command creates a new project named MyFirstApp using the webapp template.

Step 2: Explore the Project Structure

Navigate into your new project directory:

cd MyFirstApp

You'll find a project structure similar to this:

MyFirstApp/
├── MyFirstApp.csproj
├── Program.cs
├── appsettings.json
├── Pages/
│   ├── _ViewImports.cshtml
│   ├── _ViewStart.cshtml
│   ├── Error.cshtml
│   ├── Error.cshtml.cs
│   ├── Index.cshtml
│   ├── Index.cshtml.cs
│   └── Shared/
│       ├── _Layout.cshtml
│       └── _ValidationScriptsPartial.cshtml
└── Properties/
    └── launchSettings.json
  • .csproj: The project file containing build configurations.
  • Program.cs: The application's entry point.
  • Pages/: Contains Razor Pages, which are building blocks for your UI.
  • _Layout.cshtml: The main layout file for your application's pages.
  • Index.cshtml: The homepage of your application.
  • appsettings.json: Configuration settings for your app.
  • launchSettings.json: Configuration for running your app locally.

Step 3: Run the Application

To run your application, use the following command in your project directory:

dotnet run

This will build and start your application. You should see output indicating the URL where your app is running (usually https://localhost:5001 and http://localhost:5000).

Open your web browser and navigate to one of these URLs. You should see the default ASP.NET Core welcome page.

Tip: If you're using Visual Studio, you can simply press F5 to run the application.

Step 4: Modify the Homepage

Let's make a small change to the homepage. Open the Pages/Index.cshtml file and replace its content with the following:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Awesome ASP.NET Core App</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            <h1>Welcome to My First ASP.NET Core Application!</h1>
            <p>This is a custom page built with Razor Pages.</p>
            <p>The current date and time is: @DateTime.Now.ToString()</p>
        </main>
    </div>
</body>
</html>

You'll notice the @DateTime.Now.ToString() part. This is Razor syntax, allowing you to embed C# code directly into your HTML.

Save the file and refresh your browser. You should see your modified homepage!

Step 5: Add a New Razor Page

Let's add a simple "About" page.

  1. Create a new file named About.cshtml inside the Pages folder.
  2. Add the following content to Pages/About.cshtml: 
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About Us</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            <h1>About This Application</h1>
            <p>This is a simple ASP.NET Core application created for learning purposes.</p>
        </main>
    </div>
</body>
</html>
  3. Create a corresponding code-behind file named About.cshtml.cs in the Pages folder with the following content: 
    using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyFirstApp.Pages
{
    public class AboutModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

Now, you can navigate to /About in your browser to see the new page.

Conclusion

Congratulations! You've successfully built and run your first ASP.NET Core application. You've learned how to create a project, explore its structure, run it, and even make basic modifications.

This is just the beginning. ASP.NET Core offers a rich set of features for building complex and scalable web applications.

Previous Next