Book Image

Web Development with Blazor

By : Jimmy Engström
Book Image

Web Development with Blazor

By: Jimmy Engström

Overview of this book

Blazor is an essential tool if you want to build interactive web apps without JS, but it comes with its own learning curve. Web Development with Blazor will help you overcome most common challenges developers face when getting started with Blazor and teach you the best coding practices. You’ll start by learning how to leverage the power of Blazor and explore the full capabilities of both Blazor Server and Blazor WebAssembly. Then you’ll move on to the practical part, which is centred around a sample project – a blog engine. This is where you’ll apply all your newfound knowledge about creating Blazor Server and Blazor WebAssembly projects, the inner working of Razor syntax, and validating forms, as well as creating your own components. You’ll learn all the key concepts involved in web development with Blazor, which you’ll also be able to put into practice straight away. By showing you how all the components work together practically, this book will help you avoid some of the common roadblocks that novice Blazor developers face and inspire you to start experimenting with Blazor on your other projects. When you reach the end of this Blazor book, you'll have gained the confidence you need to create and deploy production-ready Blazor applications.

Related Content you might be interested in

Current Title:

Small book image
Web Development with Blazor
Jimmy Engström
Jun, 2021 | 310 pages
No titles found
Table of Contents (20 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Share Your Thoughts
1
Section 1:The Basics
Section 1:The Basics
Free Chapter
2
Chapter 1: Hello Blazor
Chapter 1: Hello Blazor
Technical requirements
Preceding Blazor
Introducing WebAssembly
Introducing .NET 5
Introducing Blazor
Summary
Further reading
3
Chapter 2: Creating Your First Blazor App
Chapter 2: Creating Your First Blazor App
Technical requirements
Setting up your development environment
Creating our first Blazor application
Using the command line
Figuring out the project structure
Summary
4
Section 2:Building an Application with Blazor
Section 2:Building an Application with Blazor
5
Chapter 3: Introducing Entity Framework Core
Chapter 3: Introducing Entity Framework Core
Technical requirements
Creating a data project
Adding the DbContext to Blazor
Summary
6
Chapter 4: Understanding Basic Blazor Components
Chapter 4: Understanding Basic Blazor Components
Technical requirements
Exploring components
Learning Razor syntax
Parameters
Writing our first component
Summary
7
Chapter 5: Creating Advanced Blazor Components
Chapter 5: Creating Advanced Blazor Components
Technical requirements
Exploring binding
Adding Actions and EventCallback
Using RenderFragment
Exploring the new built-in component
Summary
8
Chapter 6: Building Forms with Validation
Chapter 6: Building Forms with Validation
Technical requirements
Exploring form elements
Adding validation
Custom validation class attributes
Building an admin interface
Summary
9
Chapter 7: Creating an API
Chapter 7: Creating an API
Technical requirements
Creating the service
Creating the client
Summary
10
Chapter 8: Authentication and Authorization
Chapter 8: Authentication and Authorization
Technical requirements
Implementing authentication
Adding authorization
Summary
11
Chapter 9: Sharing Code and Resources
Chapter 9: Sharing Code and Resources
Technical requirements
Cleaning up the project
Setting up the API
Moving the components
Adding static files
CSS isolation
Summary
12
Chapter 10: JavaScript Interop
Chapter 10: JavaScript Interop
Technical requirements
Why do we need JavaScript?
.NET to JavaScript
JavaScript to .NET
Implementing an existing JavaScript library
Summary
13
Chapter 11: Managing State
Chapter 11: Managing State
Technical requirements
Storing data on the server side
Storing data in the URL
Implementing browser storage
Using an in-memory state container service
Summary
14
Section 3:Debug, Test, and Deploy
Section 3:Debug, Test, and Deploy
15
Chapter 12: Debugging
Chapter 12: Debugging
Technical requirements
Making things break
Debugging Blazor Server
Debugging Blazor WebAssembly
Debugging Blazor WebAssembly in the web browser
Hot reload (almost the real thing)
Summary
16
Chapter 13: Testing
Chapter 13: Testing
Technical requirements
What is bUnit?
Setting up a test project
Mocking the API
Writing tests
Summary
17
Chapter 14: Deploy to Production
Chapter 14: Deploy to Production
Technical requirements
Continuous delivery options
Deploying the database
Hosting options
Summary
18
Chapter 15: Where to Go from Here
Chapter 15: Where to Go from Here
Technical requirements
Learnings from running Blazor in production
Next steps
Summary
Why subscribe?
19
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you

Exploring components

In Blazor, a component is a .razor file that can contain a small, isolated functionality (code and markup) or can be used as a page itself. A component can host other components as well. This chapter will show us how components work and how to use them.

There are three different ways we can create a component:

  • Using Razor syntax, with code and HTML sharing the same file
  • Using a code-behind file together with a .razor file
  • Using only a code-behind file

We will go through the different options. The templates we will go through next all use the first option, .razor files where we have a mix of code and HTML in the same file.

The components in the template are as follows:

  • counter
  • FetchData

counter

The counter page shows a button and a counter; if we press the button, the counter increases. We will now break the page apart so it is easier to understand.

At the top of the page is the @page directive, which makes it...

Previous Section
End of Section 3
Next Section