book

Web Development with Blazor - Second Edition

by Jimmy Engström

March 2023

Intermediate to advanced

360 pages

6h 54m

English

Packt Publishing

Read now

Unlock full access

Who this book is forWhat this book coversTo get the most out of this bookGet in touch
Technical requirementsWhy Blazor?Preceding BlazorIntroducing WebAssemblyIntroducing .NET 7Introducing BlazorBlazor ServerBlazor WebAssemblyBlazor WebAssembly versus Blazor ServerBlazor Hybrid / .NET MAUISummaryFurther reading
Technical requirementsSetting up your development environmentWindowsmacOSLinux (or macOS or Windows)Creating our first Blazor applicationExploring the templatesBlazor Server AppBlazor WebAssembly AppBlazor Server App EmptyBlazor WebAssembly App EmptyCreating a Blazor Server applicationCreating a WebAssembly applicationUsing the command lineCreating projects using the command lineFiguring out the project structureProgram.csWebAssembly Program.csBlazor Server Program.csIndex/_Host_Host (Blazor Server)Index (WebAssembly)AppMainLayoutBootstrapCSSSummary
Technical requirementsCreating a data projectCreating a new projectCreating data classesCreating an interfaceImplementing the interfaceAdding the API to BlazorSummary
Technical requirementsExploring componentsCounterFetchDataLearning Razor syntaxRazor code blocksImplicit Razor expressionsExplicit Razor expressionsExpression encodingDirectivesAdding an attributeAdding an interfaceInheritingGenericsChanging the layoutSetting a namespaceSetting a routeAdding a using statementUnderstanding dependency injectionSingletonScopedTransientInjecting the serviceFiguring out where to put the codeIn the Razor fileIn a partial classInheriting a classOnly codeLifecycle eventsOnInitialized and OnInitializedAsyncOnParametersSet and OnParametersSetAsyncOnAfterRender and OnAfterRenderAsyncShouldRenderParametersCascading parametersWriting our first componentCreating a components libraryUsing our components libraryCreating our own componentSummary
Technical requirementsExploring bindingOne-way bindingTwo-way bindingActions and EventCallbackUsing RenderFragmentChildContentDefault valueBuilding an alert componentExploring the new built-in componentsSetting the focus of the UIInfluencing the HTML headComponent virtualizationError boundariesSummary
Technical requirementsExploring form elementsEditFormInputBase<>InputCheckboxInputDate<TValue>InputNumber<TValue>InputSelect<TValue>InputTextInputTextAreaInputRadioInputRadioGroupInputFileAdding validationValidationMessageValidationSummaryCustom validation class attributesLooking at bindingsBinding to HTML elementsBinding to componentsBuilding an admin interfaceListing and editing categoriesListing and editing tagsListing and editing blog postsSummary
Technical requirementsCreating the serviceAdding data accessLearning about Minimal APIsAdding the API controllersAdding APIs for handling blog postsAdding APIs for handling categoriesAdding APIs for handling tagsCreating the clientSummary
Technical requirementsSetting up authenticationConfiguring Blazor ServerSecuring Blazor ServerSecuring Blazor WebAssemblyAdjusting Auth0Securing the APIConfigure Auth0Configure the APIAdding rolesConfiguring Auth0 by adding rolesAdding roles to Blazor ServerAdding roles to Blazor WebAssemblySummary
Technical requirementsAdding static filesChoosing between frameworksAdding a new styleAdding CSS to BlazorServerAdding CSS to BlazorWebAssembly.ClientMaking the admin interface more usableMaking the menu more usefulMaking the blog look like a blogCSS isolationSummary

Technical requirementsWhy do we need JavaScript?.NET to JavaScriptGlobal JavaScript (the old way)JavaScript IsolationJavaScript to .NETStatic .NET method callInstance method callImplementing an existing JavaScript libraryJavaScript interop in WebAssembly.NET to JavaScriptJavaScript to .NETSummary
Technical requirementsStoring data on the server sideStoring data in the URLRoute constraintsUsing a query stringScenarios that are not that commonImplementing browser storageCreating an interfaceImplementing Blazor ServerImplementing WebAssemblyImplementing the shared codeUsing an in-memory state container serviceImplementing real-time updates on Blazor ServerImplementing real-time updates on Blazor WebAssemblySummary
Technical requirementsMaking things breakDebugging Blazor ServerDebugging Blazor WebAssemblyDebugging Blazor WebAssembly in the web browserHot ReloadSummary
Technical requirementsWhat is bUnit?Setting up a test projectMocking the APIWriting testsAuthenticationTesting JavaScriptSummary
Technical requirementsContinuous delivery optionsHosting optionsHosting Blazor ServerHosting Blazor WebAssemblyHosting on IISSummary
Technical requirementsIntroducing Web ComponentsExploring Custom ElementsExploring the Blazor ComponentAdding Blazor to an Angular siteAdding Blazor to a React siteAdding Blazor to MVC/Razor PagesAdding Web components to a Blazor siteMigrating from Web FormsSummary
Technical requirements.NET WebAssembly build toolsAOT compilationWebAssembly Single Instruction, Multiple Data (SIMD)TrimmingLazy loadingPWANative dependenciesCommon problemsProgress indicatorsPrerendering on the serverPreloading and persisting the stateSummary
Technical requirementsWhat a source generator isHow to get started with source generatorsCommunity projectsInterfaceGeneratorBlazoratorsC# source generatorsRoslyn SDK samplesMicrosoft LearnSummary
Technical requirementsWhat is .NET MAUI?Creating a new project.NET MAUI App.NET MAUI Class Library.NET MAUI Blazor AppLooking at the templateDeveloping for AndroidRunning in an emulatorRunning on a physical deviceDeveloping for iOSHot restartSimulatorDeveloping for macOSDeveloping for WindowsDeveloping for TizenSummary
Technical requirementsLearnings from running Blazor in productionSolving memory problemsSolving concurrency problemsSolving errorsOld browsersThe next stepsThe communityThe componentsSummary

Overview

"Web Development with Blazor" is a complete guide to understanding and building applications with Microsoft Blazor, a cutting-edge framework for creating interactive web apps with .NET and C#. This book covers everything you need to get started, from learning Blazor basics to creating advanced components, with insights about Blazor Server, WebAssembly, and Hybrid approaches.

What this Book will help me do

Understand the fundamentals of Microsoft Blazor and how it fits into the .NET ecosystem.
Learn to develop web applications using C# with Blazor for both client and server hosting models.
Master advanced Blazor skills such as component creation, state management, and form design.
Gain expertise in integrating existing JavaScript libraries and achieving JavaScript interoperation.
Develop practical experience by following along with comprehensive project-based examples.

Author(s)

Jimmy Engström is an experienced developer and Blazor enthusiast who has been an early adopter of the technology. With years of experience in .NET development, Jimmy focuses on providing practical and actionable insights into creating applications with Blazor. His teaching approach combines clear explanations with hands-on examples tailored for .NET professionals.

Who is it for?

This book is aimed at .NET developers aspiring to create single-page interactive applications using their existing C# and web development skills. Readers should have intermediate-level expertise in programming with C# and experience in .NET development. It is ideal for developers seeking to understand Blazor's client-side and server-side models to build robust applications. The book offers step-by-step guidance, making it beneficial even for those new to web development with .NET.