Crea app CRUD con ASP.NET Core, Blazor WebAssembly, API Web, VScode

Blog

Crea app CRUD con ASP.NET Core, Blazor WebAssembly, API Web, VScode

Esercitazione sull'app Blazor CRUD - SPA Framework per sviluppatori .NET

Questo tutorial video sta per creare un'applicazione crud avanzata (CREATE, READ, UPDATE & DELETE) utilizzando il framework blazor spa, il framework di entità e il server SQL.



Codice: https://github.com/dotnettrainingacademy/Blazor-CRUD

Blazor CRUD: crea un'app CRUD con Blazor ed Entity Framework Core

In questo video realizzeremo un'app Blazor WebAssembly che comunica con un ASP.NET API Web di base per leggere e archiviare i dati in un database.



CRUD Utilizzo di Blazer e Entity Framework Core in ASP.NET Nucleo.

Come creare un'applicazione Web utilizzando Blazor con l'aiuto di Entity Framework Core.
CRUD Utilizzo di Blazer e Entity Framework Core in ASP.NET Nucleo 3.0.

AspNet Core Blazor Webassembly - CRUD

Crea una semplice applicazione CRUD per ASP.NET Core Blazor con Visual Studio 2019, .NET Core 3, Entity Framework e API Web

introduzione

In questo articolo vedremo come creare una semplice applicazione CRUD per ASP.NET Core Blazor con Visual Studio 2019, .NET Core 3, Entity Framework e API Web. Blazer è un nuovo framework introdotto da Microsoft.



Immagine 1

Blazer:

Blazor ha due tipi di sviluppo di applicazioni su è l'app Blazor Client che è ora in anteprima e anche l'app Blazor Server. L'app Blazor Client viene eseguita in webassembly, l'app Blazor Server viene eseguita utilizzando SignalR. Le app Blazor possono essere create usando C#, Razor e HTML anziché JavaScript Blazor WebAssembly Funziona in tutti i browser Web moderni anche nei browser per dispositivi mobili. Il vantaggio principale che abbiamo in Blazor sono i file di codice C# e i file Razor vengono compilati in assembly .NET. Blazor ha componenti riutilizzabili, il componente Blazor può essere una pagina, una finestra di dialogo o un modulo di immissione, Blazor può essere utilizzato anche per creare applicazioni a pagina singola. Blazor viene utilizzato per creare due tipi di applicazioni una è Blazor Client-Side App e un'altra è Blazor Server Side APP.qui vedremo alcuni dettagli in più su

Applicazione client Blazer:

  • Blazer Client Side è ancora in anteprima.
  • Il lato client Blazer utilizza Web Assembly
  • In Blazer lato client tutto la rete dll verranno scaricati nel browser. La dimensione del download potrebbe essere maggiore e il caricamento potrebbe subire un ritardo a causa del fatto che tutti i download avvengono nel browser client.
  • Non c'è bisogno di dipendenza lato server per l'applicazione lato client Blazor.
  • Tutti i tipi di codifica JavaScript simili possono essere eseguiti nell'app Blazor Client e non è realmente necessario utilizzare JavaScript Interop.
  • Può essere distribuito come sito statico, il che significa che supporta anche offline.
  • Il debug è più complicato rispetto al lato Blazor Server.
  • Nel lato client, la perdita di connettività del database e anche tutto il codice dell'applicazione sarà lato client e il livello di sicurezza non è molto buono.

Applicazione Blazer Server:

  • Tutto il processo dei componenti avverrà nel server.
  • Blazor Server utilizza SignlR Connection per connettersi dal server Web ai browser.
  • Nel lato client, la perdita di connettività del database non si verifica poiché tutto accadrà nel server.
  • Tutta la connessione del modulo avverrà sul lato server e nessun download di dll sul client lato.As tutte le dll saranno nel server web.
  • Dimensioni ridotte del download e tempi di caricamento più rapidi rispetto all'app client Blazor.
  • Possiamo usare .Net core nel lato server Blazor.
  • Il debug è ottimo in Blazor Server Side.
  • Funziona in qualsiasi browser Web senza bisogno di WebAssemble.
  • Ogni sessione del browser è aperta con la connessione SignalR.

Sfondo

Prerequisiti

Usando il codice

Passaggio 1: creare un database e una tabella

prezzo delle azioni della moneta d'identità

Useremo il nostro database SQL Server per la nostra API WEB ed EF. Innanzitutto, creiamo un database denominato CustDB e una tabella come CustDB. Ecco lo script SQL per creare una tabella di database e una query di inserimento di record di esempio nella nostra tabella. Esegui la query fornita di seguito nel tuo SQL Server locale per creare un database e una tabella da utilizzare nel nostro progetto.

USE MASTER GO -- 1) Check for the Database Exists .If the database is exist then drop and create new DB IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'CustDB' ) DROP DATABASE CustDB GO CREATE DATABASE CustDB GO USE CustDB GO -- 1) //////////// Customer Masters IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'CustomerMaster' ) DROP TABLE CustomerMaster GO CREATE TABLE [dbo].[CustomerMaster]( [CustCd] [varchar](20) NOT NULL , [CustName] [varchar](100) NOT NULL, [Email] [nvarchar](100) NOT NULL, [PhoneNo] [varchar](100) NOT NULL, [InsertBy] [varchar](100) NOT NULL, PRIMARY KEY (CustCd) ) -- insert sample data to Student Master table INSERT INTO [CustomerMaster] (CustCd,CustName,Email,PhoneNo,InsertBy) VALUES ('C001','ACompany','acompany@gmail.com','01000007860','Shanun') INSERT INTO [CustomerMaster] (CustCd,CustName,Email,PhoneNo,InsertBy) VALUES ('C002','BCompany','bcompany@gmail.com','0100000001','Afraz') INSERT INTO [CustomerMaster] (CustCd,CustName,Email,PhoneNo,InsertBy) VALUES ('C003','CCompany','ccompany@gmail.com','01000000002','Afreen') INSERT INTO [CustomerMaster] (CustCd,CustName,Email,PhoneNo,InsertBy) VALUES ('C004','DCompany','dcompany@gmail.com','01000001004','Asha') select * from CustomerMaster

Passaggio 2 - Crea ASP.NET Applicazione server principale Blazer

Dopo aver installato tutti i prerequisiti sopra elencati, fare clic su Start >> Programmi >> Visual Studio 2019 >> Visual Studio 2019 sul desktop. Fare clic su Nuovo >> Progetto.

AspNet Core Blazor Webassembly - CRUD

Fare clic su Crea un nuovo progetto per creare il nostro ASP.NET Applicazione principale Blazer.

AspNet Core Blazor Webassembly - CRUD
Seleziona Blazor App e fai clic sul pulsante Avanti.
AspNet Core Blazor Webassembly - CRUD

Seleziona la cartella del tuo progetto e inserisci il nome del tuo progetto, quindi fai clic sul pulsante Crea.
AspNet Core Blazor Webassembly - CRUD
Seleziona l'app server Blazer

Dopo aver creato ASP.NET Core Blazor Server Application, attendere alcuni secondi. Vedrai la struttura seguente in Esplora soluzioni.

AspNet Core Blazor Webassembly - CRUD

Nel Dati cartella possiamo aggiungere tutti i nostri Model, DBContext Class, Services e Controller, lo vedremo in questo articolo.

Nella cartella Pages possiamo aggiungere tutti i nostri componenti file files.component tutti dovrebbero avere l'estensione .razor con il nome del file.

Nella cartella Shared possiamo aggiungere tutto il menu a sinistra dal file NavMenu.razor e modificare il contenuto principale dal file MainLayout.razor.

Nel file _Imports.razor possiamo vedere che tutto il set di importazioni è stato aggiunto per essere utilizzato in tutte le pagine dei componenti.

Nel file App.razor aggiungeremo il nostro componente principale da visualizzare per impostazione predefinita quando eseguito nel browser.Appsertings.json può essere utilizzato per aggiungere la stringa di connessione.

Il file Startup.cs è un file importante in cui aggiungiamo tutti i nostri esempi di endpoint come gli endpoint del controller, il client HTTP, aggiungi servizi e dbcontext da utilizzare nel metodo di configurazione di avvio.

Esegui per testare l'applicazione

Quando eseguiamo l'applicazione, possiamo vedere che il lato sinistro ha la navigazione e il lato destro contiene i dati. Possiamo vedere come le pagine e i menu di esempio predefiniti verranno visualizzati nel nostro sito Web Blazor. Possiamo usare le pagine o rimuoverlo e iniziare con la nostra pagina.

AspNet Core Blazor Webassembly - CRUD

Debug nel componente

Il grande vantaggio di Blazor è che possiamo utilizzare il nostro codice C# in razor e anche mantenere il punto di interruzione nella parte di codice e nel browser possiamo eseguire il debug e verificare che tutta la nostra logica aziendale funzioni correttamente e per rintracciare facilmente qualsiasi tipo di errore con break punto.

Per questo prendiamo la nostra pagina del componente Contatore esistente.

Questo è il codice effettivo della nostra pagina Contatore poiché nel contatore possiamo vedere che c'è un pulsante e nel clic del pulsante chiamato il metodo per eseguire l'incremento.

AspNet Core Blazor Webassembly - CRUD

Aggiungiamo un altro pulsante e nell'evento clic del pulsante chiamiamo il metodo e leghiamo il nome nella nostra pagina del componente.
Nella parte di progettazione html aggiungiamo il codice seguente.


Add New Customer Details

Add New Customer

@if (showAddrow == true) {
Customer Code Customer Name
Email Phone
Insert By Save
}

Customer List

@if (custs == null) {

Loading...

reagisci editor di testo nativo
} else { @foreach (var cust in custs) { }
Customer Code Customerr Name Email Phone Inserted By
@cust.CustCd @cust.CustName @cust.Email @cust.PhoneNo @cust.InsertBy await EditCustomer(cust.CustCd))' >Edit await DeleteCustomer(cust.CustCd))'>Delete
}

Parte funzionale

Parte funzionale per chiamare tutta l'API web da associare nella nostra pagina HTML e anche per eseguire la logica di business lato client da visualizzare nel componente pagina.In questa funzione creiamo una funzione separata per Aggiungi, Modifica ed Elimina i dettagli dello studente e chiamiamo il metodo Get,Post,Put e Delete dell'API Web per eseguire le operazioni CRUD e in HTML chiamiamo tutta la funzione e leghiamo i risultati.

@code { private CustomerMaster[] custs; CustomerMaster custObj = new CustomerMaster(); string ids = '0'; bool showAddrow = false; bool loadFailed; protected override async Task OnInitializedAsync() { ids = '0'; custs = await Http.GetJsonAsync('/api/CustomerMasters/'); } void AddNewCustomer() { ids = '0'; showAddrow = true; custObj = new CustomerMaster(); } // Add New Customer Details Method protected async Task AddCustomer() { if (ids == '0') { await Http.SendJsonAsync(HttpMethod.Post, '/api/CustomerMasters/', custObj); custs = await Http.GetJsonAsync('/api/CustomerMasters/'); } else { await Http.SendJsonAsync(HttpMethod.Put, '/api/CustomerMasters/' + custObj.CustCd, custObj); custs = await Http.GetJsonAsync('/api/CustomerMasters/'); } showAddrow = false; } // Edit Method protected async Task EditCustomer(string CustomerID) { showAddrow = true; ids = '1'; //try //{ loadFailed = false; ids = CustomerID.ToString(); custObj = await Http.GetJsonAsync('/api/CustomerMasters/' + CustomerID); string s = custObj.CustCd; showAddrow = true; // } //catch (Exception ex) //{ // loadFailed = true; // Logger.LogWarning(ex, 'Failed to load product {ProductId}', CustomerID); //} } // Delte Method protected async Task DeleteCustomer(string CustomerID) { showAddrow = false; ids = CustomerID.ToString(); await Http.DeleteAsync('/api/CustomerMasters/' + CustomerID); custs = await Http.GetJsonAsync('/api/CustomerMasters/'); } }

Menu di navigazione

Ora dobbiamo aggiungere questo componente CustomerEntry Razor appena aggiunto alla nostra navigazione a sinistra. Per aggiungere questo Apri la cartella condivisa e apri la pagina NavMenu.cshtml e aggiungi il menu.

  • Customer Master
  • Crea ed esegui l'applicazione

    AspNet Core Blazor Webassembly - CRUD

    Conclusione

    Nota che quando crei il DBContext e imposti la stringa di connessione, non dimenticare di aggiungere la tua stringa di connessione SQL. Qui abbiamo creato una tabella nel server SQL e utilizzato con l'API Web, puoi anche farlo con i servizi e anche l'approccio Code First, spero che questo articolo vi piaccia. Nel prossimo articolo vedremo altri esempi per lavorare con Blazor. È davvero fantastico e fantastico lavorare con Blazor.

    #blazor #dotnet #webassembly #vscode #web-development