Introduction: A Local-First, Visual Studio–Centered Starter Plan

This guide focuses on a local-first workflow using Visual Studio 2022/2023 and ASP.NET Core. The initial steps require no Azure sign-up, offering a smoother entry point for beginners. We provide Visual Studio-centric, step-by-step instructions, covering templates, debugging, and project setup. The result is an end-to-end runnable starter application – a Todo CRUD (Create, Read, Update, Delete) app skeleton complete with a data model, DbContext, and pages for listing, creating, editing, and deleting items.

We’ve deliberately deferred Azure prompts until after you have a working local application, making deployment an optional, later step. You’ll find clear, copy-pasteable guidance on project structure and file layout, including discussions on Solution, Project, Pages, Models, Data, and Migrations folders.

Note on Sessions: In older ASP.NET contexts (ASP.NET 2.0 on IIS 6.0), the default session timeout was 20 minutes. For modern ASP.NET Core, session management configurations can vary and are typically handled differently. For context, if extending session duration, one might adjust settings like `SessionState.Timeout` in `web.config` in legacy scenarios, but ASP.NET Core uses different mechanisms, often involving middleware and configuration within `Program.cs`.

Step 1: Install Visual Studio and the .NET SDK

Get your .NET development environment set up quickly. This step involves installing Visual Studio with the necessary ASP.NET workload, adding the .NET SDK, and verifying your setup with a minimal application.

Install Visual Studio 2022 or 2023 Community Edition

Download Visual Studio Community from the official Microsoft website. During installation, ensure you select the ASP.NET and web development workload. This crucial step installs the essential ASP.NET Core tooling, project templates, and local development servers (like IIS Express or Kestrel).

Install the .NET SDK (8.x or latest LTS)

Download the .NET SDK from the official .NET website. The SDK includes the `dotnet` command-line interface (CLI), which is vital for building, running, and scaffolding projects. After installation, open a terminal or command prompt and run dotnet --version to confirm the SDK is installed and accessible. You should see a version number like 8.x.x or the latest Long-Term Support (LTS) version.

Verify Visual Studio and ASP.NET Core Templates

Launch Visual Studio and navigate to File > New > Project. In the ‘New Project’ dialog, search for ASP.NET Core Web App or ASP.NET Core Empty to confirm that the necessary templates are present.

Sanity Check: Create a Minimal Web Project

To ensure your local server is functioning, create a minimal web app from the terminal:

dotnet new web -n SanityWeb -o SanityWeb
cd SanityWeb
dotnet run

Open your web browser and navigate to https://localhost:5001 or http://localhost:5000. You should see the default page served by Kestrel (or IIS Express, if launched from Visual Studio).

What to Verify:

• dotnet --version: Displays the installed SDK version (e.g., 8.x.x).
• ASP.NET Core Templates: Are visible in the ‘New Project’ dialog in Visual Studio.
• Sanity Web App: Runs successfully with dotnet run and serves pages on localhost.

Step 2: Create a New ASP.NET Core Razor Pages Project

Now, let’s create your foundational project. In this step, you’ll build a new ASP.NET Core project in Visual Studio using beginner-friendly defaults, setting the stage for your CRUD operations.

In Visual Studio: Choose Create a new project > ASP.NET Core Web App. Ensure you select the Razor Pages template. This template offers a straightforward, guided flow ideal for beginners.

• Target Framework: Set this to .NET 8 for the latest features and LTS support.
• Authentication: For this initial tutorial, leave Authentication set to None to maintain simplicity.
• Project Name and Location: Name your project TodoApp (or another relevant name) and choose a suitable location on your drive.

Explore Solution Explorer

Once the project is created, open Solution Explorer and examine the generated structure. Key directories and files to note include:

• Pages: This folder will contain your UI logic for pages like Index, Create, Edit, and Delete, each typically accompanied by a corresponding PageModel file.
• Data: This is where your data access layer resides, including the DbContext and model classes representing your entities.

Tip: Don’t worry if you don’t see all these files immediately. You’ll add and customize them as you proceed. Understanding this structure early helps visualize how Razor Pages connect your UI to your data layer.

Step 3: Implement a Simple CRUD Model and DbContext

This section details the essential steps to define your data model, integrate Entity Framework Core (EF Core) with SQLite for a local database, and set up your initial database migration.

Define the `TodoItem` Model

Create a simple model class to represent your to-do items:

public class TodoItem
{
    public int Id { get; set; }
    public string Title { get; set; }
    public bool IsDone { get; set; }
}
    

Create the `AppDbContext`

Define your DbContext, which acts as a session with your database and allows you to query and save data:

using Microsoft.EntityFrameworkCore;

public class AppDbContext : DbContext
{
    public AppDbContext(DbContextOptions options)
        : base(options)
    { }

    public DbSet TodoItems { get; set; }
}
    

Register the DbContext in `Program.cs`

Configure your application to use SQLite for a lightweight local database. Add the following to your Program.cs:

// In Program.cs
builder.Services.AddDbContext(options =>
    options.UseSqlite("Data Source=todo.db"));
    

Add Necessary EF Core Packages

Install the required EF Core packages using the NuGet Package Manager or the .NET CLI:

dotnet add package Microsoft.EntityFrameworkCore.Sqlite
dotnet add package Microsoft.EntityFrameworkCore.Tools
    

Create and Apply the Initial Migration

Generate the initial migration to create the database schema, including the TodoItems table:

dotnet ef migrations add InitialCreate
dotnet ef database update
    

Step 4: Create Razor Pages for CRUD Operations

Transform your application into a fully functional CRUD experience using Razor Pages. You’ll implement four core pages: listing items, creating new ones, editing existing entries, and deleting them. A seed item will also be included for immediate interaction.

Page Functionality Overview:

• Index Page: Displays a list of all TodoItem entries. It provides links to the Create, Edit, and Delete pages and presents items in a clear list or table with action buttons.
• Create Page: Offers a form to add a new TodoItem. Fields like ‘Title’ and ‘IsDone’ (defaulting to false) are included. Upon successful submission, the user is redirected to the Index page.
• Edit Page: Allows users to modify the ‘Title’ and ‘IsDone’ status of an existing item. Changes are persisted to the database via SaveChanges.
• Delete Page: Includes a confirmation step before removing an item from the database, preventing accidental deletions. After deletion, the user is redirected to the Index page.
• Seed Data: A starting item (e.g., TodoItem { Title = "Sample Task", IsDone = false }) is seeded to ensure the UI is populated upon the first run.

CRUD Workflow Summary:

With these pages, your Todo app becomes a practical CRUD example. You benefit from a fast feedback loop: make changes, and immediately see the results. This demonstrates the power of Razor Pages for handling common data-driven workflows efficiently.

Step 5: Running, Testing, and Debugging in Visual Studio

Leverage Visual Studio’s integrated tools for a seamless development experience. Run, inspect, and verify your application’s UI and data directly within the IDE.

Run the App with F5

Press F5 in Visual Studio to start a debugging session. This compiles your application and opens it in a browser, typically at https://localhost:5001/TodoItems. Verify that the UI loads correctly, the Todo list is displayed, and basic interactions like adding new items function as expected.

Use Visual Studio’s Debugger

Set breakpoints in your PageModel files (e.g., in OnGet, OnPost, or other CRUD-related methods). When a breakpoint is hit during debugging (F5), use Visual Studio’s Locals, Watch, and Immediate windows to inspect variable values and application state. Step through your code to understand how data flows from the UI to the PageModel, through EF Core, and into the database.

Perform Full CRUD Flows and Verify Persistence

• Create: Add a new item via the UI. It should appear in the list and be saved to the SQLite database.
• Read: Refresh the list page to confirm items are loaded correctly from the database.
• Update: Edit an item and save. The UI should reflect the changes, and the database should be updated accordingly.
• Delete: Remove an item. It should disappear from the UI, and the corresponding record should be deleted from the database.

Verify the Local Database

Locate the todo.db file in your project directory. This is your local SQLite database. Use a SQLite browser tool (like DB Browser for SQLite) to open the file. Inspect the TodoItems table and verify that the data created, updated, or deleted through the application is accurately reflected. Alternatively, you can query the dbContext.TodoItems collection directly in your code to check counts and contents.

Step 6: Optional – Prepare for Azure Deployment

Once your application is running reliably locally, you can optionally prepare it for deployment to Azure. This guide introduces Azure deployment as a subsequent step, avoiding prompts during initial local development to reduce complexity.

If you decide to deploy to Azure, Visual Studio’s integrated Publish tool is your primary option. Select Azure App Service as the target.

Important Configuration: For production environments, it’s recommended to configure connection strings for a managed database service like Azure SQL Database instead of relying on a local file-based database like SQLite.

Azure deployment steps are presented here as an optional path, ensuring you have a stable local application first.

Visual Studio vs. VS Code for getting Started

Choosing the right tool is key for beginners. Here’s a practical comparison:

Best Practices and Next Steps

This starter project provides a solid foundation for learning ASP.NET Core, Razor Pages, and EF Core. The strong integration within Visual Studio accelerates the learning process, while the clear steps and seed data ensure beginners see immediate results.

Pros:

• Provides a concrete, runnable baseline for learning key .NET web development technologies.
• Visual Studio’s integrated tools (templates, scaffolding, debugging) enhance the learning curve.
• The CRUD app structure teaches fundamental concepts of data modeling, access, and UI interaction.
• Clear, repeatable steps and seed data offer a fast feedback loop.
• An optional Azure deployment path bridges local development to cloud hosting.

Cons:

• Visual Studio’s installation is substantial and primarily Windows-focused.
• Limited cross-platform parity may require extra steps on macOS/Linux, or using alternative tools like VS Code.
• The initial focus on local setup delays exposure to cloud deployment patterns.
• Some scaffolding details might require further explanation for absolute beginners.

Guidance on Sessions: Be aware that ASP.NET Core handles session state configuration differently than older ASP.NET versions. Ensure you consult the relevant ASP.NET Core documentation for specific session management configurations.