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.
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.
Fare clic su Crea un nuovo progetto per creare il nostro ASP.NET Applicazione principale Blazer.
Seleziona Blazor App e fai clic sul pulsante Avanti.
Seleziona la cartella del tuo progetto e inserisci il nome del tuo progetto, quindi fai clic sul pulsante Crea.
Seleziona l'app server Blazer
Dopo aver creato ASP.NET Core Blazor Server Application, attendere alcuni secondi. Vedrai la struttura seguente in Esplora soluzioni.
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.
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.
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 { Customer Code Customerr Name Email Phone Inserted By @foreach (var cust in custs) { @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
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