Blazor UI library Bootstrap Blazor quick start (v7.5.7)
Blazor UI library Bootstrap Blazor quick start (v7.5.7) The component library has been updated frequently recently, and some students feel a little confused, so I just took a class with Boss Zhang today and immediately created a new tutorial to give back to the community, ;-> 1. Create a new project b18QuickStartv757 and add the project to the solution dotnet new blazorserver -o b18QuickStartv757 dotnet sln add b18QuickStartv757/b18QuickStartv757.csproj 2. Use nuget.org for BootstrapBlazor component installation, FreeSql sqlite library, font.. dotnet add b18QuickStartv757 package BootstrapBlazor dotnet add b18QuickStartv757 package BootstrapBlazor.FontAwesome 2. Style sheet and Javascript reference Add the theme style sheet to the Pages/_Host.cshtml file Delete And add two lines below Add Javascript references to the Pages/_Host.cshtml file Add before 3. Add namespace reference to _Imports.razor file @using BootstrapBlazor.Components 4. Add BootstrapBlazorRoot component to App.razor file … 5. Add BootstrapBlazor service to Program.cs file Add after builder.Services.AddSingleton(); builder.Services.AddBootstrapBlazor(); The following steps are purely personal preference, modification of the original NavMenu component 6. Create a new menu.js file Create the modules folder in wwwroot and create a new menu.js file import Data from “../_content/BootstrapBlazor/modules/data.js”; import EventHandler from “../_content/BootstrapBlazor/modules/event-handler.js”; export function init(id) { var el = document.getElementById(id) if (el === null) { return…
Blazor UI library Bootstrap Blazor quick start (v7.5.7)
Blazor UI library Bootstrap Blazor quick start (v7.5.7) The component library has been updated frequently recently, and some students feel a little confused, so I just took a class with Boss Zhang today and immediately created a new tutorial to give back to the community, ;-> 1. Create a new project b18QuickStartv757 and add the project to the solution dotnet new blazorserver -o b18QuickStartv757 dotnet sln add b18QuickStartv757/b18QuickStartv757.csproj 2. Use nuget.org for BootstrapBlazor component installation, FreeSql sqlite library, font.. dotnet add b18QuickStartv757 package BootstrapBlazor dotnet add b18QuickStartv757 package BootstrapBlazor.FontAwesome 2. Style sheet and Javascript reference Add the theme style sheet to the Pages/_Host.cshtml file Delete And add two lines below Add Javascript references to the Pages/_Host.cshtml file Add before 3. Add namespace reference to _Imports.razor file @using BootstrapBlazor.Components 4. Add BootstrapBlazorRoot component to App.razor file … 5. Add BootstrapBlazor service to Program.cs file Add after builder.Services.AddSingleton(); builder.Services.AddBootstrapBlazor(); The following steps are purely personal preference, modification of the original NavMenu component 6. Create a new menu.js file Create the modules folder in wwwroot and create a new menu.js file import Data from “../_content/BootstrapBlazor/modules/data.js”; import EventHandler from “../_content/BootstrapBlazor/modules/event-handler.js”; export function init(id) { var el = document.getElementById(id) if (el === null) { return…
