Blazor WebAssembly .NET 6 Tutorial | Data Binding and Components

hello everyone in this video we are going to learn about blazer components and data binding this is the second video of a series of videos that i'm planning to do on blazer web assembly and places server and in this video we are going to understand what placer components are and then we are going to create our first placer component and then we are going to see how you can input values to components and how we can get outputs the events from the component and then we are going to learn about essentials on component life cycle in this video i'm not going to dive deeper into component life cycle because you don't need to know everything to get started the whole idea of this series at least from the beginning is to get you started using blazer and finally we are going to see how one way and two-way data binding works and also event bindings and lambda expressions in our last video we developed a sample application we hosted that on azure as well if you haven't seen that video you can watch that as well as you can see on the left we have the application that we have deployed in our last video it is a simple standard blazer template we have added one button and one event to that application in this video we are going to learn about components and data bindings by improving this application to look like this application here we have two pages one for listing the courses that you can follow and when you click on each of these courses there will be a new let me maximize this when you click on these courses there will be another page that contains more information of that course and as you can see on the left we have a list of articles and some course description and you can add comments as well along the way we're going to develop this application and we are going to know more about blazer so let's get started this is the application that we have started to develop in our last video as you can see we have three pages the default template pages and we have changed this index.razer file in our last video let me run this application so that we see the changes as we change the code in visual studio let me do that now all right on the left we have our application and on the right we have visual studio now we need to have a page that lists the courses for that i'm going to create a new razer component i can right click on pages and i can add a new razer component not a razer page this is for asp.net a razer component and in this page here we have razer components i'm going to name it courses all right as you can see i've just added our first component and when it comes to component naming conventions just like every microsoft product the file name starts with a capital letter as you can see and also you can create folder structures as well to organize your components like this for example i'm going to create a new folder here called courses and then i can just move it like this as you can see all right now i'm in courses page now let's say you want your users to see this page what you can do is you can add a route this is how you do it as you can see this will enable this will mark the page as a routable component let me add something like this courses and then i'm going to save it and it is asking me whether i want to rebuild and apply changes because the application is already running all right now if i go into courses as you can see we can see the page that we have just created but when i click on home i'm going back to the index page i want this courses page to be my main page that lists the courses how can i do that now if i go into index dot raiser file we have the page as the root i'm going to delete this index like this and i'm going to courses and then i'm going to change the page to direct to the root let me run it again all right as you can see i can see my courses page when i click home on the root of my application as you saw earlier the courses were tiles we can think of each of those tiles as components and then we can reuse them if you're familiar with angular or react it is the same concept here as well now let me create a new component here remember this is a routable component i can just change this route here and i can access the component directly but the next component that i'm going to create now it's not going to be a routable component it is a tile that displays the information about our courses now let me add a new razer component i'm going to call it course item let's say i'm adding it now now if i go into courses i can directly reference this course item component let me show you that as you can see with intellisense i can reference it and when i save the file we can see that the course item is displayed here as well now let me add few wise few things here as you can see we can reuse this course item component this is just a simple text now let me make this a tile and the tile contained the name of the course and a description you can think of these razer components as a c-sharp class it's finally it's going to be a fish-up class and the tile contained the name of the course and a description because of that i'm going to create two variables to store the name and the description of the course let me do that now it is a string and let me call it name and the next one is description and also these courses they should have some kind of an id right let me add that as well we'd call it reference id all right as you can see we have defined three properties inside of the component now if i want to show the name and the description of the course i can just add the name like this and i will show the description as well i can show a description like this now let me save it as you can see this got updated and now i want to change the name of the course and the description from the parent component this is the parent component that has all and this is the parent component that has four courses can i set them like this i can pass the name and course one i'm going to save it and when i do that nothing happened if we inspect the console of my application we can see that i'm passing in name parameter but i haven't added parameter attribute to the property so i'm going back to my course item let me add parameter here this parameter here will tell blazer framework that this course item component is expecting this property to be set by its parent now let me save it as you can see the course one just got updated let me add this parameter to all three properties of my course item all right now since i'm creating a courses application other than keeping these properties one by one it is easier if i can create a class that contain all these properties that i need in a course because of that i'm going into my courses app and then i'm going to add a new folder let me call it data this could be and another class library as well but for this video this is good enough i'm going to create a new class and then i'm going to add four properties like this reference id name description and image now let me save it all right and now i'm going into courses component and this should have a list of courses let me define that now something like this let's say i want to initialize this list of courses here when this component gets initialized for that i can override uninitialized lifecycle component of razer let me do that now now if i type override here as you can see we have a list of methods that we can override i'm going to go with uninitialized and then i'm going to add a loop like this that will add few dummy data to this courses list let me save this one as well all right now we have a list of courses and now i want to display the courses that we have in this list on the ui for that i can use a blazer for each like this it's going to be a course in course courses list and then i can add courses item inside of the for each loop let me save it now let's see what happens as you can see we have a list of courses now i can pass in the actual course name here like this as you can see just got updated now i'm going to pass in the description as well as you can see i'm getting intellisense because we have marked this property with parameter attribute now let me add the description as well and finally the reference id as well let me save it now as you can see we have the list of courses with the description as well now we have the list of courses but it looks bit dull because it's just a list let's apply some styles and make this a tile i'm going to solution explorer and here we have the course item the razer file you can add a css file for this course item by right clicking here and adding a new item and i'm going to search for css as you can see we have style sheet now the naming convention matters here we have to name it course item dot razer dot css as you can see when we name our files like that visual studio will organize them hierarchically like this and inside of the razer file we have the right side.css file i have already written some html and css all right as you can see i have just added an image like this i found this online this image it's a image from a blog as you can see and a h file tag and a description and it doesn't look right because of that i'm going into the css of it and then i'm going to add a style as well now it looks alright but when i increase the size it doesn't look right that is because we still have to apply a few styles to our courses page here and i'm going into courses and i'm adding a another css file all right and here first i'm going to apply a media query and then to the container of these courses i'm going to apply this grid based styling let me save it now all right it doesn't work and that is because i haven't added this class to this course item container now i'm going to do that all right as you can see we have a grid and it is responsive as well all right now we learned how to create components here we have created this courses component and we have added a route as well and also we have created another component that is the course item component and we saw how to input parameters to this component now let's see how to get outputs output events from this component for that i'm going into course item dot eraser like this and then i'm going to add these two buttons let me save this now as you can see we have two buttons on each of these courses to show you how to get the events of these components to the parent component first we should have an event handler inside of the main component it is going to be another method like this all right i can just console it right line and see whether this works i have added a new method here and i'm going to save it after that i can add this event binding here i can do that by adding at sign and invoking on click after that i can specify the method that needs to be invoked when this button is clicked let me save it now all right now if i look into the console as you can see if i clear this when i click on these buttons we can see the message so this is how you can add event handlers to your html components but this is not what we wanted to do what we wanted to do is get the click event of this course item component to its parent courses component for that we can use something called event callbacks let me show you how to do that we have to create an event call back like this and if you are passing a value if you are passing a parameter let's say if you had a input field here you can pass that parameter that's why we have a generic type now i'm going to make this a string like this we can specify this event callbacks and after specifying this you can invoke it let me do that now you can do it like this as you can see we have two overloads one doesn't have any inputs and the second one has a string and that has a string because we have used this string generic type i'm going to pass the reference id of this course item component so that the parent component courses knows which like button got clicked let me add the reference id all right now i'm going to save it all right now i'm going back to courses page now if you look here we have three input parameters we can add the output parameter as well the name of the event callback that we have used is on like clicked now if i add on like clicked i should get a intellisense here i'm not getting it because i haven't marked this as a parameter let me mark this as a parameter like this and then i'm going back to closest component let's try again as you can see we're getting it now there should be a method here in the parent component to bind to this unclicked event i'm going to create that now i'm going to add this input parameter reference id because that is what i am passing here and then i'm going to store it in a variable here it's going to be private string i'm going to call it liked course id like this and then what i can do is i can store the course id that the user liked i have created the method and the variable now i'm going here to add the event handler on course like clicked all right now when the user clicks the like button we are getting the course id to its parent component first let me show you how it works i'm going to add a p tag here and liked course id all right now i'm going to click here as you can see we're getting the id of the course that user clicks showing the id is not user friendly and because of that let me add something like this seems like you like this course id now it looks better but the course id that's not user friendly at all we can read the actual course name from this courses list for that what i can do is i can do a inline lambda like this i can just invoke courses list i can get the first item let's call it x where x dot reference id is equal to liked course id as you can see i can write lambda expressions in line from this lambda expression we are getting the course object that matches the one that user clicked and since i want to display the name of the course i can just access the name like this let me save it as you can see something went wrong there should be an error because when this component gets initialized it doesn't have liked course id set because of that we can add a condition this is how you can add conditions with razor syntax you can just check whether this is available or not only if it is available we can show this message i'm going to save this now the app started working again now if i click on like here as you can see we are seeing the actual course name now we learned how to create components and how to pass in inputs to it and get output events from it let's see what happens if i click on these components as you can see i have added this image i have wrapped that image in a href tag if i click here i'm getting this sorry there's nothing at this address that message is in-app dot raise a file as you can see if the route is found it will show the actual component otherwise it will show this message we are seeing this because we don't have a actual route and a component defined for this route here going back and i'm going into solution explorer and now i'm going to define component that will show more information about the course i'm going to create another folder for organization add course here and then i'm going to add a new razer component i'm going to call it course all right first let's add the route here basically when the user clicks on these courses if you look here in the course item component i'm directing the user to the courses slash the reference id of the course now if i go back to the course dot raiser i am defining the route like this causes slash id inside of the curly braces and that is because i want to read the actual url parameter from this url now i'm going to save it all right now if i click this as you can see i don't see that nothing to be found error message i'm just seeing a new page but there's an error seems like as you can see i'm passing in the course id but i haven't specified a property a parameter inside of this course component what i can do is can just define the parameter like this and since it is a parameter i can use parameter attribute like this now i'm going to save it as you can see the error went away and we can see the course component and also we can read this id that was passed here as well now if i add something like this if i try to read it like this let's see what happens as you can see course 0 is displayed now if i go back and click s2 as you can see course 2 is shown now this page looks dull and because of that i have created this html let me add it now all right and then i'm going to add a css as well let me add a new css file name is going to be coast.razer dot css i have prepared this responsive css going to save it as you can see we have a little bit of organization now let me resize the page and as you can see we have a courses page now if i click here we have an image and a description and here we have a list of articles of that course let me resize this again now we are going to introduce a new feature to this course view while introducing that new feature we are going to learn about two-way data binding the new feature that we are going to introduce here is adding comments to the courses as you can see we have a list of articles and we have a description but we can't add comments because of that i'm going to add a maybe a hr here i have prepared this html let me add that all right as you can see i have added this header commands and a text area and two buttons and a list of comments like this as you can see our course page is starting to grow now now it's time for us to refactor this page i'm going to move this comments section to another component let me do that now now i'm going into the solution explorer and course page and here i'm going to add a new razor component since these are articles since i'm calling them articles let me call this component article comment all right and then i'm going to paste the html here the name should be i think comments since we have all the comments here all right now i have moved the html to article comments components let me go back to the courses.razer and add article comments reference here as you can see we have refactored the html code now i'm going into article comments that raiser file and let's understand one way and two-way data binding i'm going to add a new html div tag here and let's say when the user adds the comment i want to do a preview of that comment i'm going to change the name to you as you can see we have that here and i'm going to remove this existing comment and then i'm going to create a new variable here that is a string i'm going to call it comment text and then i'm going to display the comment text here now if i change the comment text variable as the initialization of this component let me do that now as you can see we have hello displayed here and this is one way data binding when you change this variable here it'll be shown in the html but let's say you want to do two way data binding this is one direction showing the data that you have in your code in the html and you want to get the data from the html into your code if you can do that this becomes a two-way data binding since we have a text area here we can configure that as well now what i'm going to do is i'm going to add a binding here for that i can add bind and here i can specify the name of the variable and that is going to be command text and i can specify the event of the binding that is on input like this now if i save this as you can see we have hello inside of the preview of the command as well as the text area now if i try to change this as you can see the two-way binding works all right now i'm going to remove this initialization here let me do few changes to this template um i don't like this gradient here i'm going to main layout in the shared folder now if i collapse everything let's focus on shard folder in the main layout razer file we have a css file that contains these styles for this stuff i don't like this linear gradient i'm going to change this to a uniform color like this and then the courses app i'm going to change that as well my channel name now if i go into the home page we have courses i want to change that as well i'm going to pages and have courses i'm going to add something like this all right now let me maximize this now let's go through what we have learned in this video we learned about components and how to create them we learned how to inject values into these components and we saw how to get outputs from these components as well also we saw how to create routes with components and two-way data binding as well and finally let's understand a little bit about component life cycle now if i go into the documentation here we have a page containing information on component lifecycle you can go through it if you want i'm not going to cover everything in this video because that is really not necessary for you to get started i will be going through this in a deeper way in a coming video but let's understand the essentials of it as you can see we have two sections first render only and after the first render when a component gets initialized for the first time these two lifecycle methods will be called in this video you saw i have used uninitialized method uninitialized and set parameters async will be called when the component gets initialized for the first time when the parent re-renders each time on parameters set event will be called as you can see here the set parameters async method will be called before uninitialized you can use this behavior to get access to the parameters that was set from the parent component before the component initializing and after the initial render this on parameter set lifecycle method will be called now if i go back here you can override all those methods typing this as you can see we have set parameters async and uninitialized and we have a few other methods as well such as should render that returns a bool output this tells the framework whether it should render the component again and again and finally we have on after render method and some of these has asynchronous overloads as well let me know down below if you want me to go into the component life cycle more and also let me know if you have any questions or comments as well this is the second video of a series of videos that i'm going to do on blazer don't forget to like this video and subscribe if you learned something new today and thanks for watching

Channel: Meet Kamal Today - Cloud Mastery

Views: 72

Keywords: blazor webassembly tutorial, blazor c# webassembly, blazor .net 5, blazor tutorial, blazor webassembly, blazor framework, blazor webassembly vs server, blazor components, blazor components communication, blazor components tutorial, blazor components vs razor page, blazor component lifecycle, blazor component parameter, blazor eventcallback, blazor eventcallback parent to child, blazor eventcallback parameter, blazor data binding, blazor c#, blazor, webassembly

Id: 17qVoeidYQ0

Length: 27min 10sec (1630 seconds)

Published: Thu Dec 16 2021