El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Blazor

Següent ►
►

Blazor és un framework de desenvolupament web de Microsoft que permet crear aplicacions web interactives utilitzant C# en lloc de JavaScript. Blazor es basa en el model de components, on cada component és una unitat reutilitzable de la interfície d'usuari (UI). Blazor ofereix dues maneres principals de crear aplicacions: Blazor Server i Blazor WebAssembly.

Continguts

  1. Introducció a Blazor
  2. Blazor Server vs Blazor WebAssembly
  3. Configuració de l'Entorn de Desenvolupament
  4. Creació d'un Projecte Blazor
  5. Components en Blazor
  6. Gestió d'Esdeveniments
  7. Interacció amb APIs
  8. Autenticació i Autorizació
  9. Desplegament d'Aplicacions Blazor

Introducció a Blazor

Blazor permet als desenvolupadors utilitzar C# per crear aplicacions web interactives. Això significa que es pot compartir codi entre el client i el servidor, i aprofitar les biblioteques i eines de .NET.

Característiques Clau de Blazor

  • Reutilització de Codi: Comparteix codi entre el client i el servidor.
  • Components: Crea components reutilitzables per a la UI.
  • Interoperabilitat amb JavaScript: Integra fàcilment amb biblioteques JavaScript existents.
  • Rendiment: Blazor WebAssembly permet executar codi .NET directament en el navegador.

Blazor Server vs Blazor WebAssembly

Blazor ofereix dues maneres principals de crear aplicacions:

Característica Blazor Server Blazor WebAssembly
Execució Al servidor, amb actualitzacions en temps real al client. Directament en el navegador.
Temps de càrrega Ràpid, ja que només es carrega HTML i CSS inicialment. Pot ser més lent, ja que es carrega l'aplicació completa.
Interacció Requereix connexió constant amb el servidor. Funciona offline després de la càrrega inicial.
Escalabilitat Pot requerir més recursos del servidor. Menys càrrega al servidor, més càrrega al client.

Configuració de l'Entorn de Desenvolupament

Per començar amb Blazor, necessitaràs:

  1. Visual Studio 2019 o superior (amb el workload de desenvolupament web instal·lat).
  2. .NET SDK (versió 5.0 o superior).

Instal·lació de .NET SDK

Descarrega i instal·la el .NET SDK des de dotnet.microsoft.com/download.

Creació d'un Projecte Blazor

  1. Obre Visual Studio.
  2. Selecciona Create a new project.
  3. Tria Blazor App i fes clic a Next.
  4. Dona un nom al teu projecte i selecciona la ubicació.
  5. Tria entre Blazor Server App o Blazor WebAssembly App.

Components en Blazor

Els components són la unitat bàsica de la UI en Blazor. Cada component és un fitxer .razor que conté HTML i codi C#.

Exemple de Component

@page "/counter"

<h3>Counter</h3>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Explicació del Codi

  • @page "/counter": Defineix la ruta del component.
  • @code { ... }: Bloc de codi C# on es defineixen les variables i mètodes del component.
  • @onclick="IncrementCount": Assigna l'esdeveniment de clic del botó al mètode IncrementCount.

Gestió d'Esdeveniments

Blazor permet gestionar esdeveniments de la UI utilitzant delegats C#. Per exemple, es pot gestionar l'esdeveniment de clic d'un botó amb @onclick.

Exemple de Gestió d'Esdeveniments

<button @onclick="ShowMessage">Show Message</button>

<p>@message</p>

@code {
    private string message;

    private void ShowMessage()
    {
        message = "Hello, Blazor!";
    }
}

Interacció amb APIs

Blazor facilita la interacció amb APIs RESTful utilitzant HttpClient.

Exemple d'Interacció amb una API

@inject HttpClient Http

<button @onclick="FetchData">Fetch Data</button>

<p>@data</p>

@code {
    private string data;

    private async Task FetchData()
    {
        data = await Http.GetStringAsync("https://api.example.com/data");
    }
}

Autenticació i Autorizació

Blazor ofereix suport per a l'autenticació i l'autorització utilitzant ASP.NET Core Identity o altres proveïdors d'identitat.

Exemple d'Autenticació

<AuthorizeView>
    <Authorized>
        <p>Welcome, @context.User.Identity.Name!</p>
    </Authorized>
    <NotAuthorized>
        <p>Please log in.</p>
    </NotAuthorized>
</AuthorizeView>

Desplegament d'Aplicacions Blazor

Les aplicacions Blazor es poden desplegar en diversos entorns, incloent Azure, IIS, i altres serveis de hosting.

Desplegament en Azure

  1. Publica l'aplicació des de Visual Studio.
  2. Selecciona Azure com a destinació de publicació.
  3. Configura els detalls del servei d'Azure i publica l'aplicació.

Resum

En aquesta secció, hem explorat Blazor, un framework de desenvolupament web que permet crear aplicacions interactives utilitzant C#. Hem vist les diferències entre Blazor Server i Blazor WebAssembly, com configurar l'entorn de desenvolupament, crear projectes Blazor, treballar amb components, gestionar esdeveniments, interactuar amb APIs, implementar autenticació i autorització, i desplegar aplicacions Blazor. Amb aquests coneixements, estàs preparat per començar a desenvolupar aplicacions web modernes amb Blazor.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats