Introducció a ASP.NET Core

ASP.NET Core és un framework de codi obert i multiplataforma per construir aplicacions modernes basades en la web, serveis web i aplicacions mòbils. És una evolució de l'ASP.NET tradicional, dissenyada per ser més lleugera, modular i amb millor rendiment.

Objectius d'aquest tema:

  1. Entendre què és ASP.NET Core i les seves característiques principals.
  2. Configurar un projecte ASP.NET Core.
  3. Crear una aplicació web bàsica amb ASP.NET Core.
  4. Comprendre la configuració i el pipeline de middleware.
  5. Treballar amb controladors i vistes.

Característiques Principals d'ASP.NET Core

  • Multiplataforma: Funciona en Windows, macOS i Linux.
  • Alt Rendiment: Optimitzat per a un alt rendiment i escalabilitat.
  • Modularitat: Permet afegir només els components necessaris.
  • Integració amb Modernes Tecnologies: Suport per a contenedors Docker, microserveis, etc.
  • Codi Obert: Desenvolupat i mantingut per la comunitat i Microsoft.

Configuració de l'Entorn de Desenvolupament

Requisits:

  • .NET SDK: Descarrega i instal·la el .NET SDK des del lloc oficial de .NET.
  • IDE: Visual Studio, Visual Studio Code o qualsevol altre editor de codi.

Creació d'un Nou Projecte ASP.NET Core

  1. Utilitzant la línia de comandes:

    dotnet new webapp -n MyFirstAspNetCoreApp
    cd MyFirstAspNetCoreApp
    dotnet run
    
  2. Utilitzant Visual Studio:

    • Obre Visual Studio.
    • Selecciona "Create a new project".
    • Tria "ASP.NET Core Web Application" i fes clic a "Next".
    • Configura el nom del projecte i la ubicació, i fes clic a "Create".
    • Selecciona "Web Application (Model-View-Controller)" i fes clic a "Create".

Estructura del Projecte

Un projecte ASP.NET Core típic té la següent estructura:

MyFirstAspNetCoreApp/
│
├── Controllers/
│   └── HomeController.cs
│
├── Models/
│
├── Views/
│   ├── Home/
│   │   └── Index.cshtml
│   └── Shared/
│       └── _Layout.cshtml
│
├── wwwroot/
│   ├── css/
│   ├── js/
│   └── lib/
│
├── appsettings.json
├── Program.cs
└── Startup.cs

Fitxers Clau:

  • Program.cs: Punt d'entrada de l'aplicació.
  • Startup.cs: Configuració del pipeline de middleware i serveis.
  • appsettings.json: Configuració de l'aplicació.

Creació d'una Aplicació Web Bàsica

Configuració del Pipeline de Middleware

El pipeline de middleware es configura al fitxer Startup.cs. Aquí és on es defineixen els components que gestionen les sol·licituds HTTP.

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllersWithViews();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            app.UseHsts();
        }

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

        app.UseRouting();

        app.UseAuthorization();

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

Creació d'un Controlador

Els controladors gestionen les sol·licituds HTTP i retornen respostes. A Controllers/HomeController.cs:

using Microsoft.AspNetCore.Mvc;

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

Creació d'una Vista

Les vistes són plantilles HTML que es renderitzen com a resposta. A Views/Home/Index.cshtml:

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Welcome to your ASP.NET Core application!</p>
</div>

Exercici Pràctic

Objectiu:

Crear una aplicació ASP.NET Core que mostri una llista de productes.

Passos:

  1. Crear un Model:

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
    
  2. Crear un Controlador:

    using Microsoft.AspNetCore.Mvc;
    using System.Collections.Generic;
    
    public class ProductController : Controller
    {
        public IActionResult Index()
        {
            var products = new List<Product>
            {
                new Product { Id = 1, Name = "Product 1", Price = 10.0m },
                new Product { Id = 2, Name = "Product 2", Price = 20.0m },
                new Product { Id = 3, Name = "Product 3", Price = 30.0m }
            };
    
            return View(products);
        }
    }
    
  3. Crear una Vista: A Views/Product/Index.cshtml:

    @model IEnumerable<Product>
    
    <h1>Product List</h1>
    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var product in Model)
            {
                <tr>
                    <td>@product.Id</td>
                    <td>@product.Name</td>
                    <td>@product.Price</td>
                </tr>
            }
        </tbody>
    </table>
    

Solució:

  • El model Product defineix les propietats dels productes.
  • El controlador ProductController crea una llista de productes i la passa a la vista.
  • La vista Index.cshtml mostra la llista de productes en una taula HTML.

Resum

En aquest tema, hem après a configurar un projecte ASP.NET Core, crear una aplicació web bàsica, treballar amb controladors i vistes, i configurar el pipeline de middleware. Hem creat un exemple pràctic per reforçar els conceptes apresos. En el següent tema, explorarem més a fons les funcionalitats avançades d'ASP.NET Core.

© Copyright 2024. Tots els drets reservats