Part-1 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Create Sample SQL Table & MudBlazor Project
The main objectives of this article are:
- Create A Sample SQL Table.
- Create Blazor WebAssembly Application
Script To Create Sample Table:
Let's create a sample table like 'SuperHeroes' by running the following command.
CREATE TABLE SuperHeroes ( Id INT IDENTITY(1,1) NOT NULL, Name VARCHAR(200) NULL, Franchise VARCHAR(20) NULL, Gender VARCHAR(20) NULL, ImageURL VARCHAR(1000) NULL CONSTRAINT PK_SuperHeroes PRIMARY KEY (Id) )
Create A Blazor WebAssembly(.NET 7) Application:
Let's create a sample Blazor WebAssembly(.NET7) application. To create .NET7 application we can use either 'Visual Studio 2022' or 'Visual Studio Code' editor.
(Step 1)
(Step 2)
(Step 3)
(Step 4)
Configure MudBlazor UI Library:
Install the MudBlazor NuGet package.
Add the MudBlazor namespace in '_Imports.razor'.
_Imports.razor:
@using MudBlazorAdd the below CSS into the closing head tag in 'wwwroot/index.html'.
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />Remove the below CSS reference in the 'wwwroot/index.html'.
Add script tag just above the closing body tag in 'wwwroot/index.html'
<script src="_content/MudBlazor/MudBlazor.min.js"></script>In 'Program.cs' file register the MudBlazor service.
Program.cs:
using MudBlazor.Services; builder.Services.AddMudServices();
Configure MudBlazor Components In MainLayout.razor:
Let's configure the required MudBlazor component in MainLayout.razor.
Shared/MainLayout.razor:
@inherits LayoutComponentBase <MudThemeProvider /> <MudDialogProvider /> <MudSnackbarProvider /> <MudLayout> <MudAppBar> My Application </MudAppBar> <MudMainContent> @Body </MudMainContent> </MudLayout>
- The 'MudThemeProvider' component applies material theme colors to our blazor application.
- The 'MudDialogProvider' component helps to use Mudblazor dailog or popup.
- The 'MudSnacbarProvider' component helps to use Mudblazor alert.
- The 'MudLayout' component is like the main layout.
- The 'MudAppBar' component for adding a menu nav bar.
- The 'MudMainContet' component is like a container component.
- The '@Boday' razor attribute is used to render the page-level content.
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on the.NET7 Blazor WebAssembly CRUD sample. using I love to have your feedback, suggestions, and better techniques in the comment section below.
Refer:
Part-5 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Update Operation
Part-6 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Delete Operation
Part-7 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Sorting
Part-8 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Search
Part-9 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Pagination
Part-6 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Delete Operation
Part-7 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Sorting
Part-8 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Search
Part-9 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Pagination
Great post!
ReplyDelete