What Is Asp.Net Core Complete Guide

What is ASP.NET Core?

ASP.NET Core is a high-performance open-source framework created by Microsoft for building modern, cloud-based internet-connected applications. It was designed to have an optimized deployment model that makes it possible to build web applications and microservices which can run on-premises or in the cloud. Some of the key features include:

• Cross-platform: Runs on Windows, macOS, and Linux.
• High performance: Built from ground up to offer better performance compared to the earlier versions.
• Modular architecture: Allows developers to pick and choose the features needed based on their requirements.
• Cloud-ready: Offers built-in support for containers, Docker, and Azure.

Step by Step Guide for Beginners

Prerequisites:

• Install Visual Studio 2019 or later with the ASP.NET and web development workload installed.
  • Alternatively, you can use Visual Studio Code with .NET Core SDK installed.
• Familiarity with C# programming language.

Step 1: Create a New ASP.NET Core Project

1. Open Visual Studio.
2. Click on Create a new project.
3. Choose Web Application and click Next.
4. Name your project (e.g., MyFirstAspNetCoreApp) and click Next.
5. Select the .NET version (preferably the latest LTS version).
6. In the project template section, select Web Application (Model-View-Controller) and click Create.

Step 2: Understanding the Project Structure

Upon creation, your ASP.NET Core MVC project will look something like this:

• wwwroot/ folder: Contains static files such as HTML, CSS, JavaScript, and images.
• Controllers/ folder: Contains controller classes that handle HTTP requests.
• Models/ folder: Contains model classes used to represent data.
• Views/ folder: Contains Razor view files that render HTML.
• appsettings.json file: Configures application settings.
• Program.cs file: Entry point of the application that bootstraps everything.
• Startup.cs file: Configures services and the app's request pipeline.

For simplicity, let's focus on the Controllers, Models, and Views.

Step 3: Create a Model

Models are responsible for representing data in your application. For example, if you are building a blog application, you might have models for Post, Author, etc.

1. Right-click on the Models folder in your project.
2. Select Add > Class.
3. Name the class Person and click Add.

Edit Person.cs to add some properties:

namespace MyFirstAspNetCoreApp.Models
{
    public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
    }
}

Step 4: Create a Controller

Controllers are responsible for handling incoming requests and returning responses. Let's create a controller to manage Person data.

1. Right-click on the Controllers folder in your project.
2. Select Add > Controller.
3. Choose MVC Controller - Empty and click Add.
4. Name the controller PersonController and click Add.

Edit PersonController.cs to add actions:

using Microsoft.AspNetCore.Mvc;
using MyFirstAspNetCoreApp.Models;

namespace MyFirstAspNetCoreApp.Controllers
{
    public class PersonController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Details()
        {
            var person = new Person
            {
                FirstName = "John",
                LastName = "Doe",
                Age = 30
            };

            return View(person);
        }
    }
}

Step 5: Create Views

Views are responsible for rendering the UI. Let's create views for Index and Details actions.

Index View

1. Right-click on the Index action method in the PersonController.
2. Select Add View.
3. Make sure the view name is Index.
4. Choose Empty (without layout) and click Add.

Edit Index.cshtml to display some welcome message:

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "Index";
}

<h1>Welcome to the Person List</h1>
<p>Here you will find details about people.</p>
<a asp-action="Details">Go to Person Details</a>

Details View

1. Right-click on the Details action method in the PersonController.
2. Select Add View.
3. Make sure the view name is Details.
4. Under Model class, select the Person model.
5. Choose Empty (without layout) and click Add.

Edit Details.cshtml to display the Person details:

@model MyFirstAspNetCoreApp.Models.Person

@{
    ViewData["Title"] = "Details";
}

<h1>Person Details</h1>

<div>
    <hr />
    <dl class="row">
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.FirstName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.FirstName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.LastName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.LastName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Age)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Age)
        </dd>
    </dl>
</div>
<div>
    <a asp-action="Index">Back to List</a>
</div>

Step 6: Configure Routing

Routing determines which action should be called based on URL patterns. The routing configuration is made in the Startup.cs file in the latest versions of ASP.NET Core, but in newer templates, you might see routing configured directly in Program.cs.

Edit Program.cs if routes are defined there (usually in newer ASP.NET Core versions):

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

In the above configuration:

• {controller=Home} means that the default controller is HomeController.
• {action=Index} means that the default action is Index.
• We need to change this to point to our PersonController for demonstration purposes.

However, typically, you don't need to modify this unless you want to have a different default route:

app.MapControllerRoute(
    name: "person",
    pattern: "{controller=Person}/{action=Index}/{id?}");
    
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

Step 7: Run Your Application

1. Press F5 or click the Debug button to start your application.
2. Once the browser opens, go to /Person or /Person/Index to see the index page.
3. Click the "Go to Person Details" link to navigate to the /Person/Details route, showing the person details.

Conclusion

By following these steps, you've created a simple ASP.NET Core MVC web application with one model and two views. This example demonstrates basic controller operations and view rendering. ASP.NET Core offers much more advanced capabilities including dependency injection, middleware, entity frameworks, authentication, etc. that you can explore further as you gain more experience!