Blazor Tutorial C# - Part 2 | Razor Components | dotnet 5 - dotnet 6

Hi, Welcome to CodingDroplets and thank you for  watching this video. This is part two of blazor   beginner to advanced tutorial series. So if you  are new to the series, you can find the playlist   link in the video description and just open the  link to find the previous videos. So in part two   I will walk you through razor components.  So first let's see what is razor component. A razor component is a razor file that can  be reused. A razor component can contain logic.   A razor component is a class. So in this video I'll walk  you through the entire concepts and the entire   processes or the entire things about razor  components. So please subscribe to our youtube   channel named coding droplets, if you have not  subscribed it yet and also press the bell icon.   So that you will get notified once we upload  new videos. So before starting the development,   first let's see the final output of the  project. We are developing in this video   so i will show you the page now so i'm just  refreshing it so you can see the final output from   the page load itself okay now the page is loading  and you can see there is a loading message here   contacts are loaded and once the contacts are  loaded immediately without a page refresh you can   see there is no page refresh draw immediately  the page uh the contacts are loaded here   okay now here uh i have placed a display email  checkbox here so uh when i uncheck this checkbox   you can see that here what i'm going to do is i  need to hide the email addresses of each contacts   so i'm unchecking it so you can see immediately  the emails got header okay and if i'm checking it   again immediately it got displayed so it is very  interactive and now i need to show you some more   uh for each record i have placed a show info  button inside each record so if i'm clicking   the show info of this particular record say beta  ball okay uh you can see immediately it show an   information like the email address of peterborough  is peter gmail.com okay and if i'm clicking   uh the show in for john thomas immediately it will  show here so there is no page refresh happening   you might have noticed it now there is one more  button for delete so i'm deleting this particular   contact george david okay and immediately  it has been deleted now here i if i need to   hide the information i am clicking on show  info again and you can see it is hidden   okay it is like a toggle kind of button  so immediately it will hide and show the   information so here i need to don't bother about  the design the design is very basic design i have   implemented for showing the demo but here  what i need to show you is how interactive   is the blazer so you can create this kind of  interactive blazer applications so let us start   the development now so stay tuned and we will  be continuing with the development in our video   so now i have opened our blazer demo  application in visual studio so you can see the   project files inside the solution explorer  and here i have created one model class   named contact so this contact model class is  having three properties first name last name   and email okay we are going to use this in our  demo in this particular video so i will show you   what we are going to how we are going to implement  razer components now just before that i need to   show you this shared folder so if you are  familiar with mvc in mvc also we have a shared   folder and the shared folder will contain  the layout file so main layout is the main   is the layout file so even in mvc also the  layout file will be inside the shared folder   so here also in the same way no difference and  here the body will be yeah here the body will come   fine now here we have one more file  named underscore imports.razer so   this file will be having so many usings in it so  whatever usings has been mentioned in this file   we can use it directly in any  razer files so i will show you   first i am opening the index.razor  file and here i am opening the code okay now declaring a new variable private  list of contact contact is the model class   and naming it as contacts but now it will  show the error that contact is not available   yeah so contact could not be found so there  are two options either we can use it here using   blazer server app demo dot models this is one option otherwise anyway the model  name space this particular name space we'll be   going we'll be using in all our razor files we are  going to keep all the model classes inside this   folder so what we can do is we can just copy this  or we can just move this particular thing to the   underscore imports folder sorry that just  score imports razer file so now we don't   now we can see that there is no error showing here  so we can use it directly in any razer files now   and time of writing on initiate method on  initialized method file now i am assigning some values to this contacts is equal to new list of  contact new contact uh first name is equal to john then last name is equal to thomas then  email is equal to john gmail.com fine   now just copying this and pasting  okay we need just three three contacts   okay so the second contact name is peter and uh  said last name bob so peter gmail.com is the email   now the last one is george and last  name david email is josh gmail.com fine   okay now in the normal scenario what we used  to do is for each work on that in contacts now we are going to display the values  here so let me open a p tag then bold name span i create con at contact dot first sorry  contact dot first name then put a space   then contact dot last name now going to the  net moving to next line then again bold email   now italics at contact dot email fine   now this will print all the contacts let's see i'm  running the application so it is getting compiled   the application will be opened in  the browser soon yeah it is opening so as it is in a for reach loop we know that  it will get displayed here fine so bold italics   everything is working fine as expected now  i'm stopping it now let's assume we need to   use this particular design the bold  italics or whatever design you give   you have to reuse it in some other razor  files as well okay so in that case normally   what you have to do is you have to copy this  whole thing and paste it in all razor files   that is one option but that is not a good  option for that we have razor components   so i'm copying this and creating a razer component  now so let's let me create it in shared folder   or else we can create it here as well no  issues but if you're creating it here okay   i'll do one thing this is the best thing to show  an example for you to understand how we can use   eraser component which is outside of shared  folder for shared folder it is there is no much uh   difference or much deal actually it can be done  easily now for example i have created some uh okay i'm naming it as contact components okay now let's see an  example inside that we might have   so many kind of designs for  contacts okay so inside that contact component one okay fine now removing everything we just need a  blank contact component now i'm doing one thing   i'm copying this from our index raiser file and  pasting it here but now it will show the error   way because we don't have contact object  here fine we don't need it i am opening code   here and the main difference of a normal razer  file and there is a component is eraser component   does not need routing okay now i will show  you in detail so here first what i'm doing is   i'm declaring some variables here public first  name oh sorry forgot to provide the type okay now next we need public string last name next we need public string email fine now what we can do is we can just provide  remove this contact object that way we can give   at first sight at first name at first last name  at email okay but this won't work why because   we need to include one more attribute here  we need to mention this is a parameter okay here also this is also a parameter  now this is also a parameter file   now we have created a component with  design okay now what we are going to do is   i am clicking on this index razer file  and removing this we don't need it so now what i'm going to do is contact you can see it here contact  component is available so either we can   give it like this or else the best  option is i can use this namespace here   not using file now we don't need this whole  namespace just contact component1 is enough   and now it will ask for the parameters first name  as we have mentioned all these are parameters   we can directly provide the parameters here  first name is contact oh sorry contact dot first name now last name is contact dot last name  now email is contact dot email fine let's run the application it is getting open yeah  you can see in the same way   now it has displayed the value fine so now let's  see how we can reuse the razor component which we   have created i'm closing this application okay  so we have another file named counter dot razer   so let me reuse the same component  which we have used contact component   okay i'm giving the whole namespace let it be  there otherwise as we have did before you can   provide this using here on the top otherwise  i'm just giving it like this first name is   david last name is john email  is david john gmail.com fine now let me run the application so here we have  we are displaying only one contact instead of   using a for each method in our index page so here  in index page we have used for each and displayed   four different contacts but in counter page now we  are displaying only one so it is it got displayed   here so this is how we can reuse the razer  components hope you liked it so give me a thumbs   up for this video now let us move to some advanced  methods or advanced things about razer components   so now i'm going to make some changes in our  contact component 0 1 razor file so anyway we   know that we are going to display the first name  last name and email the properties of contact   class model class so instead of passing  this as three different parameters i am   doing one thing i am creating a  parameter public i am directly passing the contact object to this prison  component so i am naming this as current contact fine now we don't need all this what we are  going to do is current contact dot first name   then currentcontact.lastname currentcontact.email   okay now in our index raiser file  instead of providing all these things   what we can do is we can directly provide current  contact is equal to contact contact is the object   what we are getting from the forage  okay now i'm running the application it is getting loaded yep in the same way   the contacts has been loaded now let's see  how we can pass arbitrary parameters so   this is very important because in your real  application you need to pass multiple parameters   multiple parameters means you might need to pass  a lot many parameters so in our current scenario   the only option is you have to declare this kind  of public variables and provide this parameter   attribute but what if we need a lot money  we need to pass a lot many parameter without mentioning everything in a public  variable there is a symbol option for that   so that is called arbitrary parameters so for  explaining that i'm creating a new razor component   so here i'm naming this as my text box fine now here uh let's see an example we only  have an input okay now input is having lot many   attributes like type then disabled placeholder  so many attributes other so what i'm going to do   is one option is for example if i need to  show a placeholder i can mention it like this and provide the parameter attribute  and here i can mention a   sorry placeholder is equal to at placeholder  okay now after this for each loop   what i'm going to do is i'm calling this  my text box and placeholder is sample placeholder file i'm running the application so it will  show a sample placeholder this we can test   it whether it is getting displayed yes it is just  getting displayed it is showing sample placeholder   now what if i need to pass not  many parameters to this component   so here what i'm going to do  is instead of this placeholder i'm declaring a public dictionary of string and  value type of object and i'm naming this as custom   attributes you can provide whatever name you need   that is up to you and here in input what i am  giving is attributes equal to custom attributes   now here in this parameter  attribute we can provide catch   uh sorry capture unmatched values equal to true so  it will capture unmatched values as well okay now here now in my text box i am just removing this  and directly giving place holder is equal to place   holder 0 1 okay now another thing what  i am providing is type is equal to text   now another thing disabled equal disabled and  we can provide whatever attributes we need   now let me run the application and let's  see whether it is working as expected it is getting loaded yeah fine now you can see  this is disabled and it is showing placeholder   and if we inspect that you can  see the type text also has been mentioned here so everything has been   completely yeah all the attributes has been  placed here fine so this is how you can show   you can pass arbitrary attributes now  we can pass this arbitrary parameters   in different methods so this is one method another  way is i can mention attributes is equal to   then i can declare it explicitly so new  dictionary of string comma object now here i can provide it like disabled is disabled  now um place holder sorry placeholder is some   okay i'm just giving this is a contact  name as placeholder then next is type file in this way also it will work let's see and you can see now it is disabled and the  contact name is the placeholder is contact name   and type text is also there fine now there is one  more method so instead of giving everything here   declaring it explicitly what we can do is we can  create a variable private dictionary of string object is equal to sorry um my text  box attributes i'm just naming it   as my textbooks attributes is equal to  name okay now is equal to placeholder oh sorry i need to open curly braces here  placeholder is let's say this first name now   i'm giving disabled okay now here what i'm doing is  attributes i'm giving this variable name so let me run the application and   you can see now it is showing the place order  which way which we have given first name   so everything is working as expected next let's  see something about events so i'm opening this   contact component zero one there is a component  which we have created before so let's say we have another okay let's say we have a private  variable here private bool display info is equal false okay now here i have a span and okay uh i'm just giving an if condition  here if display info is true then sorry then span okay um inside this pan we will  show the e the email address is current email or the email address of this particular  customer of first name and last name yes okay now after this we have a button okay now the button is show info here now we have lot many events for buttons  so you can see on about on blur or cancel on   can play on click so this is the click  event and on change not many events are   for text boxes for inputs we can use on change  event at all so here what i'm doing is i'm okay i'm using on click event now i'm just  declaring it or i'm using uh declaring the   method explicitly so in order uh instead  of declaring the method here in the code   part i'm just using the explicit method  so display info is equal to true sorry okay so the on click event is display  info is equal to true so initially the   display info will be false then once the user  click on this button this display info will   become true and if display info is true then we  will show this spam okay let's run the application okay you can see there are buttons for all the  three records now i'm clicking this button and   you can see it is showing this info here  now now for all it is showing the info file so here we can do a small adjustment to show  and hide the info we can provide it like this now i am clicking on show info it is  showing and again i am clicking it will   hide okay so hope you understood the  logic it has display info is equal to   not displaying for means if display info is  true then it will be assigned to false if it   is already false then it will be assigned to true  fine now another thing what i need to show you is   uh for an example i am creating one  more new parameter sorry parameter public bool   display email okay fine now in this index  razor before this forage we are having an input type checkbox okay and here a label um display email okay now what i need to do is if  this checkbox is checked then we have to show the   email otherwise we have to hide the email okay  so we have display email here now here in the   component class uh component file what we need  to do is we have to provide an if condition if display email is true sorry i forgot  that sign oh no this already here   okay uh if display email is true then only we  should display this otherwise it is not needed   okay but this is a parameter  it should come from the   parent razer file now here what i need to do is  i need to i am creating one new variable private   bool display email okay so initially it will be  false fine now uh i'm creating a new event on   change and i'm just mentioning i'm just  declaring it explicitly as did before display email is equal to display email okay so initially the checkbox will be false so  when it changed means if we tick the checkbox   then it will become true now we need to  pass one more thing here display email is   display email okay so now we are passing contact   there are two different parameters current contact  and display email so we are passing both here fine   i'm sorry i forgot to provide the semicolon  okay now i'm running the application this is getting opened okay fine now you can  see the display email checkbox here and here   now the email is hidden in and it is not showing  anywhere so if i am clicking this then instantly   you can see the email got displayed okay and if i  am clicking it again means if i am unchecking the   checkbox it will get hidden okay now instead of  this on change event we can use a simple method   or we can use data binding for this so data  binding is a two-way binding it will synchronize   the data between the input and the variable and it  is a two-way binding so if we change the variable   value it will change automatically  uh the input for example if it is a   checkbox and we are changing the value to  the variable to false it will untick the   checkbox and in the same way if we tick  the checkbox it will change the variable so   it will bind in both ways so let's see  how it works so now instead of on change   what i can do is i can provide byte equals now  here display email that's it now you can see yeah i'm running the application so in the same  way it will work and i need to show you one more   thing so now i'm clicking on it and you can see it  got displayed and it is getting hidden when i am   unchecking it now one more thing as we have binded  the value now if i am directly mentioning here the   display email value is true i don't need to make  this checkbox uh while or i know i don't need to   make this checkbox checked it will automatically  will get checked when once the page loads why   because the display email value is true that  is why i told you it is binded in both ways   so now i am opening the page and you can see  now this is already checked and it is showing   the email as well in the components and if i'm  unchecking it it will hide the email okay fine   now in data binding i need to show you one  more thing we have a counter class here   say for example in this counter class now what  is happening is uh there is a variable named   current count equal to zero and once this on  click event increment count got executed it is   just incrementing the value of this variable  current count now i need one more thing um okay i am providing an input  type text sorry text oh sorry   text uh okay no need to provide the input  type i'm just providing bind equals current count fine so now i have binded this  input to this current count variable   now let's see how this works okay i am opening the counter menu file now  you can see it is showing the value of current   count here and where if i am clicking this  it will change the value of current count   so you can see it here now i can change the  value of that variable from this text box   so i can provide 9 and you can see automatically  it got changed here and if i'm changing it to 10   it got changed i can change it like this so once  i leave this text box immediately it will change   the value okay so this is how data binding works now let's see more about events so just before  starting that i just need to update that i have   updated the visual studio version now i'm using  visual studio 2022 and the target framework uh   i'm using dotnet six so in the previous sessions  i have used visual studio 2090 at 2090 and the   framework target framework i was using dot net  file so the reason why i updated is uh in visual   studio we have an option hot reload so in dot net  6 this hot reload works very perfectly in blazer   so hot reload means we just we don't need to  recompile the project again if we have made any   changes if the project is already running we  can just click the hot reload and the changes   will take effect on the running project on the  running application so for showing the demo it   will be much easier fine now let's see more about  events so here now let us discuss about a scenario   we know that in our index razor file in the  index page we have three different contacts   mentioned in this contacts variables the  contacts variable is a list of contact   so now if we need to delete some contact but  delete means i'm going to place this delete button   in the component eraser component file not  in the index razer file so the button will   be placed inside the razor component file  and if the button clicked if a user clicked   the button then we have to modify this list but  here the highlighted point is this list is under   the index freezer file and the button is in the  child component okay so first let's create the   button so i'm going to our contact component  okay here i'm creating one more button oh sorry um and just okay delete okay now if  someone click this button i need to   delete the contact which is  displayed in this component okay so   here in index page what i'm going  to do is i'm creating a new method private void delete contact so in this method  i need to get some identifier means   i need to identify which contact i need to  delete okay so here let's see we are passing   the contact object itself to this method as  a parameter file so once we get the contact   object from a list we can easily remove it  what we need to do is contacts dot remove and the object contact symbol okay so this  is what we have to do but let's see how we   can call this method from the child component  so here we have an option called event callback   so here i'm declaring one more parameter okay and naming it as public  the type is event call back okay   and um we can provide some name delete contact  or okay here it is current connect so i'm just   naming it as delete current contact okay fine  and here i don't need a parameter why because   oh sorry here i don't need ah a parameter  for this object oh sorry it is not like this   or this is parameter file okay now so i  have declared it oh we can use get set here fine yeah so i have declared it okay and now  from the index raiser file what i can do is   okay here we have one small  change as we have a parameter here   we need to mention what is the parameter that we  have to pass along what is what should be the type   of the parameter so the type of the parameter  is contact so we can mention it like this okay   now from the index raiser file what i can do is i  can okay one more it is asking for the parameter   delete current contact so delete correct  contact is this method delete contact fine hope you are clear now the next thing what i  need to do is now i have not mentioned the on   click event so in on click i'm mentioning  okay either you can create a new method   or you can declare it explicitly so i'm  using the explicit method on click equals and here i am declaring it explicitly  so here what i'm doing is i'm using this   event callback method delete current contact  dot invoke async now we have to pass the   parameter so the parameter is current contact  we know that we have already passed the contact   object here so we can use the same object current  contact fine now let's see how it's how it works app is getting compiled it is getting opened here it is open now fine  now you can see there is a delete button for each   item now for say example i am deleting this  peterborough delete and you can see now that   peterborough has been deleted like in  the same way i can delete john thomas   and george david everything got deleted so  this is how we can use event callback method next i need to show you about  render fragment so just before that   i'm making some changes in the project  so i'm creating one more razor component clicking add new razor component and i mean i'm naming this as main contacts or okay contacts contact list dot reason okay it is getting created yeah fine now here  what i'm doing is in our index we have this okay i'm moving this input and all these things but input and this for each to just raise the  component to the new component okay so here now um we need code and what i'm doing  is i'm passing the contacts list to this component okay so   here in razor we have okay i'll make we are  moving this to the new component file public contacts get set okay contacts fine um and this checkbox is here right so okay display email sorry from the index file  i'm moving this display email to this okay fine now we need this delete contact so  delete contact is here i'm moving this as well oh sorry list name is contacts fine now so in index now we don't need uh  this list of okay we need the list of com   contacts but this one display  email is not needed fine and here now i am importing the contact list okay and  the contact list we need to pass the contacts as parameter so this should be parameter okay so i can pass this to fine i'm passing the contacts as parameter uh rest all things let it be in the same  way so from the index raiser file we are   initializing this contacts variable and  once it is initialized we will pass it to   contacts so now let's me uh let's run the  application let me check whether it is   working fine i need to make some more changes  in order to show the demo of razer fragment okay so it is working fine okay delete  display email everything is working fine okay now i need to show you one  more method which we can override is on initialized async okay so here now i am moving this initialization method  contacts initialization to on initialized async fine and i don't need this method anymore so on  initialized async will work asynchronously so   now i will show you one once  again by running the application yeah everything is working fine okay now in  this on initialized async method i am just   using task.delay to delay for some time say uh  we are in a real application uh for switching   the data from the database anyway here we have  hardcoded the values but in a real application   we will be fetching the data from database  enough so it may take some time so see i'm uh waiting for some three seconds of five  seconds okay past the delay five seconds   await and let's make this a sink fine now let me run the application and now you can see there is an error  so this error is from our razer file so   it says that now the contacts is null so as  we have initialized this is an asynchronous   method and we have delayed it for five seconds  so immediately after the application got loaded   there is no data in this contacts variable so  that is why it is showing that the contacts   is none so here what we can do is i'm going  to this method and here what i'm doing is if this contacts object is null and else part so inside else part i can provide  this for each method okay so if it is not none   we have to show the contacts details but if it  is null then here we will show a spam okay and   otherwise okay spam contacts are loading so you  can show some uh loading animation or anything   fine okay now i'm running the application again okay we don't need to run the application  each and every time we have the hard   hot reload option so next time we can use it um but uh the message not shown right okay  the car just showing here actually we need   to move it to the next line so i'll do one  thing here in our application i'll just use vr tag here okay now hot reload we don't need to  reload it again and again now i'm reloading it so you can see now it is showing contacts are  loading and after five seconds the contacts will   get loaded so once you got the data from the  database immediately you can show it here file   now another thing we can also show one more thing  here i am just giving an elsif path if contacts contacts dot count is equal to zero so that means   we got the data from database but there is no  data so in that case we can show something like no contacts to display okay fine so  if there are no contacts then it will   display this message so i'm  just for okay i'll do one thing i'm just commenting this out okay and  just initializing the value of contacts   so that it will not be null is equal to new list  of contacts fine now i'm clicking on hot reload   so once it is reloaded we will see a  tick sign here now i'm refreshing it and you can see contacts are loading and   after some time after five seconds it is  showing no contacts to display fine so it   is working fine now i'm removing this anyway we  need contacts to show the demo so let it be here okay i'm connecting those saving it now let me minimize all this fine okay we  don't need to stop the application yes we   have the hot reload option i really love  that option actually uh it is very easy to   debug and show the demos and now fine  so now what we are going to do is uh   for example i need to show this uh if  contact is null i need to show this thing from the index page i need to provide  i have to provide this design in index   from index razer file so in that case what we  can do is we can declare one more parameter   okay and public render fragment okay  now i'm naming it as child content so if you have only one child comment  then what you can do is you can just   name it as child conduct and  here now what i'm doing is um if contact is null i'm using like this child  kanban and removing this we don't need this we   have to provide this from our index razor file  so how to provide i will show you we can just   provide it we can mention the design here so  contacts are loading and here for showing the   demo i am inside the brackets i am showing from  index razor okay now we will understand whether   whether it is getting loaded from here  or not now i am doing the hot reload   and okay now we will come to know that  the contacts are loading from index raiser   fine and once it is loaded we will  see the data so this is how we can use   render fragment now if we need to use multiple  render fragments so say example now here we have   uh one more design here if there are no  contacts at all so in that case if we need to   render this design also from the main razor file  then what we can do is i'll do one thing i'm just   renaming this as null fragment sorry null uh  null contacts okay now another parameter public render fragment empty contacts okay fine now two different render  fragments now here what i'm doing is okay here instead of child  content i'm using null conduct okay now i'm moving this design to index  razor file now here what you need to understand is if we have multiple designs  or multiple render fragments then we have   to mention the name of the render fragment  otherwise you can just name it as child   content and provide it like this if you  have multiple then what we have to do is   null contacts is this one okay  and the next is empty contacts yes okay now actually empty contacts  is this one and null contacts is   this one hope i'm right yes no contacts to display  so here also i'm doing one thing from index razer   i'm showing that message so we will understand  it is coming from the main index razer file and   here now again i'm doing the same thing i'm  just commenting this out to check whether   we are receiving the correct messages from  the index raiser so contacts is equal to new   list of contact so the list will be empty  after five seconds so till five seconds   it will be null and after five seconds it  will be empty okay now doing the hot reload cannot be compiled okay then  fine stop and running it again so it is getting compiled now oh it is not getting compound okay i'm running it okay it is working okay now you can see the contacts are loading from  index razor and now again you can see now contacts   display from index razer so both designs are  coming from the main razer file so we are passing   this through the render fragment parameter  so this is how we can use render fragment now final few things about razer components so  now the next thing what i need to show you here   is now you can see that we have html components  and the c sharp code in a single trees file so   we can use this in two different files  if you need a separate c-sharp class and   though we can mention all these c-sharp code so  that can be done so i will show you how we can   do that now say example we have the index  raiser file and here i need to move these   sharp codes to a different file okay so  let me create a new c sharp class for that   so inside pages folder so we have this index dot  razor inside this pages folder so under that i'm   creating a new class and for this class we  need to name it like index dot razer dot cs okay now you can see the class has been  created now if we open the solution explorer   you can see that this cs the new class has been  placed under this c sharp sorry under this index   raiser file so there is a right arrow here if  we click on it we can see the new class here   now one more thing we need to do  this should be a partial class that's it now we can move all  the c sharp code to this class sorry um okay we can uncomment this fine now we have to use models here okay fine so yeah and we don't need this code part anymore file now let's see by running this application  whether it is working fine so it is getting compiled yeah it will open now i think  yeah it is getting opened right now it is showing the contacts are  loading now it is null after five seconds   yeah it will get loaded so everything is  working fine so here in this way we can   move our c sharp code to a separate cs  file so if your design you might be having   not many components inside your design so if  not it i in my opinion it won't looks good if   we have both in a single file so it is in  my opinion it is best to move our c sharp   code to a different cs file the only thing  is we need to make it is a partial class   and the naming should be like this okay  now one more thing i need to show you is uh   say example in our index razor file we  have one h1 tag okay so index page fine okay and same in the way we have um oh  okay here there is already one h1 pack   counter file now if i need to display or if i need  to have a different color for this h1 tag in index   speech obviously we can use css class for that so  here in razer uh in blazer we have one more option   we can create a css class especially for this  in eraser component so i'm clicking on new item   and just searching for style sheet here here it  is and here also we have to use the same naming   convention like index dot razer dot css and  you can see now that also got placed under   this index.razer file so you can right  click it and see the css now whatever class css class or whatever things we  have mentioned here css stylings we have   mentioned here it will be only applicable  for this index raise the file so for index raiser file h1 tag i'm mentioning  the color it should be red okay and let me run the application now this getting opened sorry let me close this and open it again it's getting loaded fine yeah now you can see that  might be because of some bugs or something some   issue fine now you can see here we have the h1  tag here and it is showing in the red color and in   counter again we have h1 tag but it is showing in  black so this whatever css style we have mentioned   inside index dot razor.cs says css it will be  only applicable for this index razer file so in   this way we can create both partial class and the  css styling for each razor component even it is a   this kind of components for that also we can  create this kind of separate class and css files   so this is how so this is what i need to mention i  need to explain finally hope you enjoyed the video   and please like and share the video so see  you soon in the next video thank you all

Channel: Coding Droplets

Views: 35,918

Keywords: blazor tutorial c#, razor components, blazor razor components, blazor razor code behind, blazor razor, razor components tutorial, razor components in razor pages, razor components vs razor pages, razor components example, blazor tutorial, blazor server tutorial, blazor webassembly, blazor webassembly tutorial, blazor server, blazor c#, asp.net core, asp.net core blazor, .net 5, .net core, learn blazor, .net blazor, blazor 2021, .net 6, blazor .net 6, dotnet core, blazor

Id: Sp2XYGqNeD8

Length: 68min 22sec (4102 seconds)

Published: Thu Nov 18 2021