.NET 8 Blazor For Beginners Series - Introduction to Blazor, Components and Data Bindings

hi friends and everyone welcome back to net  code H Channel this is blazer for beginnner   series and in this series we're going to talk  about how to work with net a Blazer this series   is actually dedicated for the new ones the new  be those who are interested in Blazer and want   to learn the basics so in this video or in this  whole series we are going to cover the basics of   Blazer and how to use them so in this video let's  talk about introduction to Blazer components and   it data binding so maybe I believe you've heard  of Blazer or you actually know what Blazer is   isn't it yeah for those who do not know Blazer  let me take some few seconds and I'll brush you   through the overview of Blazer you know Blazer is  a web framework developed by Microsoft that enabl   developers to build an interactive and dynamic  application using C and net instead of relying   solely on JavaScript so Blazer support both  server side rendering and it has the client   side rendering the server side is what we  call as a Blazer server and on the client   side is what we call as a Blazer web assembly  this allow developers to choose the host model   that best fits the application need so if you  want to work with blazer there are some three   concept that you must understand it the first  one is a component based architecture now the   component based architecture BL applications are  built using component based architecture it's all   about component component are s contain unit of  code and UI that is a user interface that can   be reused throughout the application component  have their own logic markup and styles making   them modular and easy to maintain the second one  also is a c and net integration so Blazer allow   developers to write both the client side and our  serice side logic using C and leverage the power   of. net ecosystem this integration enable code  sharing between client and server reducing the   need to duplicate Logic the third one here that is  a two hosting models so Blazer do support server   side rendering and on the client side rendering  now the server side rendering the application   runs on the server the UI update are sent to the  client using the realtime Communication channel   example is signal R and now for the web assembly  the entire application including the run time is   being downloaded from the server onto the client  browser which allows application to run directly   in the browser so the next one here is also  the razor syntax you know Blazer uses razor   Syntax for defining component then we asking  what is Razor syntax isn't it don't worry it   is a combination of c and our HTML that allow  developers to seamlessly mix markup and now   code within a file so in each component you  can have your UI in there you can also have   your logic beneath and that's what you known as  a razor syntax the next one is a data binding so   Blazers support data binding enable developers  to establish connection between the application   data and its UI so for example if I click on  the button I must wi up in event which going   to get fired as soon as I click on event and  Blazer do support it supports oneway and our   two-way data binding two-way is when you can edit  from the UI and it gets T you can also receive it   or now you can also view the same data which has  been edited all right one way is just binding it   from maybe the database and I'm displaying it  to the UI but in case I want to edit and I'll   see it I want to type and I'll get a feedback  it Blazer also support this and the last one   here is an event handling event handling is very  important this handles user interactions through   or using event it's similar to the traditional  development so developers can wi up in event handl   in C to respond to um user action such as button  clicks a form submissions using event callbacks   using actions and Etc so in the whole video the  whole series stick around because I'm going to   take you through a lot of this for you to get the  basic understanding before you tackle any Blazer project so before you can use you can have access  to Blazer you must have Visual Studio installed   and I believe as I speak you have it ready you  have it installed isn't it congratulation for   doing that now you can see when you click on  new project you have this template now what   you actually want to focus here it is a Blazer  web app when you check you see we have Blazer   web assembly we have the Blazer server okay  so that's the server side rendering we have   the client side rendering and we have this web  app now what is the actual difference between   the web app and now this Blazer web assembly or  the Blazer server Blazer we app it is a unified   of the blazzard server and under the Blazer web  assembly so the combination of these two models   from the Blazer app now in the Blazer server you  know the all the processes are done on the server   which send a response to the client now from  the Blazer assembly all the run time and all   the project are being sent on the client browser  which is going to run the whole application in the   client browser so these two models have been  combined to form the Blazer web app now the   Blazer web app there are some hosting model  that you can actually go in for that is an   interactive um server we have the interactive  web assembly we have static rendering and we   have the interactive Auto the auto comprise  of the interactive web assembly and now the   interactive server rendom mode so with this  I've made a video on it check this the same   playlist and you're going to have a look on that  I also spoke about um stream rendering is also   part of this render mode so you can just have a  look in the playist so let's choose let's create   a project in here for this lesson choose Blazer  web app and now here it's going to be demo Blazer component so this is Blazer web app component and binding so we create this project  and let's. net 8 and also for system we going to   select none because we going to talk about that  later on okay now you can see there is inter   render mode if you want to actually understand  any of these I have explained them much on in   that video so check the description check  the playlist and you're going to see this   in there but for now we're going to choose one  let's choose a server so what we are going to   um do it here can implemented using any of the  rendom modes okay so either is a server it is   a web assembly or it is an auto it's still going  to work there okay so our length is open on the   other screen all right so we have it here now the  first thing is how do you create components you   know Blazer is a component based architecture  it tells you that Blazer is about component so   we can use component to create or to build our  application so when you go to solution Explorer   from here we have your component in here so can  see we have um folder name as component that's   fine so that is where you're going to create  all your component in so see we have pages and   we have layout for now let's focus on the pages  so Pages we have example of four component being   created counter error home. raer and our weather  as well so these are components now you can render   this component using route which going to be  identified or specified on top of this so for   example is let's go to the counter or let's go  to the home so if I click on the home component   you know we have the displayed or specified  on top we have the page title and this the   content of the application okay this component  so for now we going to learn how to create a   component and also how to call a component so  let's see from this solution the same pages in   order to create component just right click on  the pages folder now click on ADD you can see   we have razor component so this component let's  have a look so let's wait for after to get this   template installed or loaded and I'll choose this  razor component and I give it any name so the   extension here must be Razer now here let's make  it as greetings so greetings do razor and that's   going to be the component that we are creating  Okay so so in order to use this we can actually   type in anything as well and on display okay so  maybe let's use an H1 so this is from greetings component okay so let's say we have this in an H1  tag this is from greetings component so we create   this component how can you use this component  there are many ways of using this component   this component can become or can use as a chart  component it can use as a parent component now   if I say a chart component what what do I mean  what I'm trying to say here is this component   can be called in other component okay and I  when I use it as a parent component means I'm   going to specify the route here when you check  this home component there is a parent component   why am I saying that you know we have a route  specified here it means through the address when   the application rant we can directly navigate  to this component using this address okay and   that and this becomes the parent component  now when you go to this greeting. Razer you   see we not having this address specified route  specified so this mean this a chart component   and before you can see this you must render this  component in another component so with this we   are not going to specify the route here let's  save this let's run this application and see all right so my is run um as you can see you have  it displayed on the screen have you also run yours   you make sure you have the first time that you um  run this application this project you must have   access to Internet connection because you know  it needs to update some net packages that it use   as dependencies so you have to get connected to  Internet okay else you're going to have an error   in building it so make sure you're connected  and that is all so these are the component the   default one that we talking about you can see  we can access this through the route now check   this through the counter you can see we have the  counter here that's a route that we specified or   did we specify it no it was defaultly specified  we have this weather forecast and as you can see   it has been specified in there when you check  the source you go to solution then check from   the counter you know we have this SL counter we  have the greetings here nothing we have the home   and as you can see we have the weather forecast  that's the weather in here okay but the question   is the component that we created how do you  render this you know we do not have any rout   specified here so one we can specify the route to  become a parent component okay so here let's say   so at page then here you put the route name you  make sure that the route name do not correspond   or do not look similar to other components route  name so here this is greetings we can say this   is greetings then let's save this let's rerun  this application again and now let's check it   out so now with this we are running this are  going to display this as a parient component   because of the route that we are specifying here  okay aside from that you're going to run this as   a chart component meaning we're going to render  this component in another component how do you go   about that don't worry let this run let see the  output then we talk about that as well so the   app is ready and as you can see from here we can  now navigate to slash what is the name greetings   isn't it so type greetings in address and I hit  on the enter key and you can see now we have this   is from greetings component you see so now this  page is rendering as or this component is being   rendered as a parent component because we have  specified a route that we can navigate to this   component by ourself okay now let's see how do  you render this component as a chart component   we have to first remove the route in here let's  save it let's render this component in the home   component to click on the home component and in  here maybe we can put it down here so just call   the name as greeting component okay so just call  a name like this save it refresh the page and that   is all let's see if we have Auto refreshed click  on the home yes and we have this greeting this   from greetings component so can see from the  same component how many component do we have   here we have this is the first component and we  have this is what the second component now the   home component is the is the component by itself  and we have another component being displayed in   here so when you check the source you can see we  have this another component that we displaying   and then this home. Razer is also a component  by In This Time round this greeting become the   chart component which is being called in a parent  component known as which one home that's fine I   believe this is clear that's great so maybe you  be asking yourself but what of in case I want   to supply a value from um this component from  the parent component to this child component   you know here we having this from greetings  components right and now we want to actually   maybe cast this and we want to Supply maybe um  data from this component the parent component   to the Chart component I will actually have  a video on that on how to provide or how to   supply data from parent to chat or actually data  or component communication there are so many ways   to communicate um data from parent to child so  I'll teach you this in the subsequent video but   for now let's learn how how to create component  how to also render component by itself as a parent   component or how to render this component as a  child component in another component so you know   how to create component isn't it you know how to  also render component by itself by as a parent by   defining the route as we did and also by using it  as a chart component calling this component in the   main or any component at all as a chart component  that's fine now let's talk about data handling   how do Blazer component handle data so you know  data binding in Blazer allows you to establish a   connection between your application data and the  user interface so Blazer support two ways that is   a oneway data handling that is one displaying only  the data and now two-way Bindings that is updating   the data based on the user input let's explore  data binding in blazer with an example here so   we go to the same homepage here and now with this  we're going to have a button maybe let's say so   first of all you know we spoke about the the key  features and what is a Blazer syntax want talk   about blizzard syntax or the Razer syntax it's  about the UI and now the code okay so we have the   code in here and now to write anything you must  have this code block and this is the container   that every code must come in as a c code okay  now what you see from here are your UI so user   interface this going to be rendered to the UI  to the person or the client now here is going   to be the actual code and in case is I want to  interact with the code is going to click on the   button from the UI here and now this code is going  to handle all the user interactions okay so here   let's see let's declare a property to um tell the  user something right so you're going to have um   string okay so this is string and you know string  is a data type and with this we're going to say a message we say message is equal to so hello welcome to your first Blazer just make it  part C okay so we have this in here now   with what you have we have a string created  as a message and now we have a data or the   value assigned to this variable isn't it good  so with this value that you have anytime that   we call this message variable we going to  have eight value One Way data binding what   can you do on top here let's say so I'm  going to say this is a is to this is one way data binding now one way bind then is only  displaying the message displaying something to   the user so the value or the value of this  have been set already and we want to display   the message or the value of this variable to the  user so to do that we can just very simple one   so let's make an H3 then we call this message so  bear in mind that anytime that you want to call   a message from this component from a code you  must have this res syntax that is an at symbol   so you have to get it so let's grab this and  we can paste this here okay so this means that   when this page gets rendered we're going to  see this message on the screen and that is a   one way data binding you know here we are just  displaying the message to the user that's all   that we are doing wi let's run this and see so  save this and now let's check it out so you can   see this is one way data binding and now we have  hello welcome to your first Blazer prodct card   you see so here we cannot edit it we cannot  do anything here because the value has been   set from the code and what you do to do here  is just display them on the screen very simple   one okay let's have a look on the two-way  data binding so I going to just make a copy here so done here and inste of the one way it's  going to be two ways so two data binding means   this user can input something and I get displayed  on the screen we're going to use the same message   variable here when the page load defaultly  we going to have this one way aside from that   you're going to have input so this input we're  going to bind it so in order to bind it you're   going to use this ad bind value okay so that  a c way of binding um a value a variable to   an element so in here which uh variable do you  want to bind it and that is a message so let's   type it message here and this message is the the  the variable that we have created down here so   anytime or anything that we specified into this  input is going to be stored here maybe actually   yourself or you asking me well we do have a  default value set here so the new one coming   what's going to do yes it will just come and  clear this one and I repl the the new one so   the anytime that you pass s the message it's going  to clear the default one and I'll set the new one   to it okay now let's see and now for this let's  have this class form control from a bootstrap to   make to runer this form nicely for us okay now  let's save this and let's re this application   and see so the app is now ended and you can see  that here we have this test box being rendered   long one here right and now the value that you  have hello welcome to your first bler prodject   cost have been rended in here as a value why  because of this bind so bind value it means   we are binding the context of this to this input  so if this input if if this variable has a value   already it's going to be bound to this element  we can also overwrite this element through it   so let's see now this is what we doing when you  open the same up let's if I clear this see what   going to happen if I clear this and if I start  to type in something so maybe um so I have a new test okay so now with this new  test we have this um variable   here which is being bound to this  now let's see when you go to the code so you can see that we have the value  change but we it is not display on the screen   although we have this two-way binding we are  binding this value to this element anytime   that varable to this element anytime that we  update the value of this this input or this   also might get change because we are displaying  it in here but it is not doing that you can see   from here if I claring this one this must even  be cleared but it is not doing that the reason   is when you check this we this page is being  rendered in a static mode so that's a static   rendering and static rendering does not support  any bind or any action unless it is interactive   so let's have a render mode and I'll send  this a server I want to say interactive server so if you want to understand this  I have a video down on this check the same   playlist and I'll link it in the video  description understand the rendom mode   in the new. netblazer web app okay that's  the first thing that you must tackle before   you come to the N data ones as well okay  so so we have this here then now let's see okay so it has been rendered  now I'm going to clear this now   see what happened watch this one  what's going to happen here I've   clear this one and I see it's still  there isn't it so let's say this the first now is still there isn't it  because we need to build it ourselves   since we've changed this into active  as a random mode Let's let's rebuild this okay so first of all when we  cut this it means we have this as   empty as soon as this text box  loses it for course it's going   to get this affected see it see it is off  now let's type in something this is a new test now see we have it displayed here right so  this is the two-way binding as soon as I type in   here it gets notified so type and as you can see  it gets being displayed in here so that's a way   to handle two-way binding so if you're thinking  of having an input test box whereby you need to   type in and so retrieve or display the value that  you type instantly then you go in for the two-way   binding now if you want to display the value set  from the code maybe you want to display data from   the database to the screen it is a oneway binding  because here you do not need to set it you are   judg calling the data from the API or from the  database and are display on the screen in such   case you're going for the one way binding all  right so that's the way Blazer works right we   spoke about the Blazer component how to create  component how to render component as parent or   as child how to also um perform data binding  using the oneway or the two-way data binding   I believe you guys love it right good so there  there are lots in there that you need to talk   about so for now go through this couple of times  to get the better understanding and I'll see you   in the next video where we're going to talk about  another Concept in Blazer um Blazer project Blazer   we about that is so till then take care and I  make sure you subscribe to you also receive more   of this informative content as well take care  and I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 1,372

Keywords: employee, management, system, building, database, models, web assembly, .net 8, blazor, web, api, .NET 8, Blazor WebAssembly, API, Database Models, Employee Management System, Create, Develop, Design, jwt, JWT, authentication, role-base, authorization, custom auth, Blazor, WebAssembly, dashboard, user, login, logout, registration, relationships, one-to-many, many-to-one, generic, interface, implementation, controller, generic controller, pdf.excel, print data, data binding, one-way binding, two-way binding

Id: a_HUyGhUI9M

Length: 26min 56sec (1616 seconds)

Published: Fri Jan 26 2024