From the course: Blazor: Getting Started

Basic Blazor components - Blazor Tutorial

From the course: Blazor: Getting Started

Start my 1-month free trial

Basic Blazor components

“

- [Instructor] Components are the basic building blocks of a Blazor application. If you're familiar with Angular, you'll find a lot of similarity. Components can be used to encapsulate whole pages or a single special input field used in several pages. Components can contain any number of other components, and those components can contain any components. Components are compiled into classes, like we saw in the last chapter. Some components are created with a page directive at the top. Look here in BEAM Client, Pages, ray List. At the top of the file we see at page, and then some text to indicate the route. We'll talk more about routing in the next video. Let's add a new component to our demo application, so that we can see all of the rays that a specific user has cast. Right click on the pages folder, and select new file, type User.razor. To start, we need to set the route for the component, so let's add at page, and in quotes /user. To have something to look at on the page, let's add a header that says User rays. Hit F5 to run the application. If we navigate from the base URL, and add slash user, we get to our new page. Okay, we have a very simple component, but it doesn't do anything yet. Let's have it actually show our User's rays. Close out of the app and stop debugging. We'll add a code section here, and a list of rays to populate. Now let's add a method to populate that list. We'll override the component method on initialized async. We'll talk more about what this method is later on. I'll set my local set of rays with data from the data service. To be able to use the data service, I'll add an inject directive up here, and name the service data. This method doesn't exist yet. We'll add it in a moment. For now on the user page, let's add a for each loop to loop through the rays, and inside a paragraph, we'll display a ray item, and set its ray to the ray in our loop. Note that ray item is highlighted differently, and that it's not actually a part of the HTML standard. It's another component that we already have in the application. Let's have a quick look at that component. If you're still on the debug tab, you can move up here to get back to the files. The ray item is displaying information for a specific ray that it takes in as a parameter. We'll pass it one of the rays from the list that we got from the server. We're already using this component when we see the list of all rays for a specific frequency. Let's run again. We had an error in the build, so let's abort and go back to our user component. I have an extra period here when I assigned the rays. Let's try and run again. It looks like we have one more error to resolve. The rate type that I'm using here is from our shared component. We can add a using statement here in Razor, just like we would in the C-Sharp class. We'll use the beam.shared library. Now we should be good to go. Not quite yet. We forgot to add the method get my rays. I'll open up the services folder, and in the data service, I'll scroll down to get rays. Here, I'll add another method. Public async task that returns a list of rays called get my rays. I'll return the async method to call out via HTTP and get from Json async. I'll type it with the list of ray that I want back, and request the URL API/ray/user that matches the controller in the server project. Then I'll pass the username. I'll use the current user stored in the data service. Alright, anybody ready to take bets on whether it runs this time? When we navigate to our new page with /user, we can see the ray that this current user has cast. We now have a simple component built on top of another component that we can continue to use to expand the functionality of BEAM.

Contents