.NET Blazor | Using Blazor Section Outlet to display content in Blazor Server or Web Assembly

hello friend come back again to next video channel  do you know the cool future that is implemented in   blizza from ASP core version of 8.0 preview  let's have a look this component is known as   laser section now this component is very useful  when creating at a type of service what buy you   want to get counter increments let's say you have  the page whereby is an e-commerce web application   whereby people add items to cut now if you see  that from the cards item you must have and a   service which is going to count the item that  you have in your cut and display the the answer   or the results on top of the application if it  is the items ah sorry it must say three if it   is four you must see four at first we used to  create service for that but on the help of the   ASP core 8.0 preview uh this Blazer section has  solved the problem let's have a look it is saying   that in Blazer section we can have the following  section athlete and section ID or section content   so what is this section Outlet is what going to  display we have to put this section afterwards at   whoever they want to set up in the main layout  and the section ID it is where we are going to   refer or the session content it is a way we are  going to refer whatever that you want to display   on top of or inside the section Outlet let's  have a look at how to go about this component   so let's let's create a Blazer server assembly  projects so I'm going to create a new project   and this will be Laser Web assembly so  let me give it a name as Blazer section so choose 8.0 because you know this  component is features as as available   from the 8.0 in a box so make sure you're  using the 8.0 preview so click on create so we have a new um projects so let's find this project to see what  we have now that is a Blazer web assembly and the   title of this project is the Blazer sections  so when you check the documentation you know   land at microsoft.com and you can now look up  for components and sections and a component   so first of all we have to add this  to the namespace so let's grab this now let's go to your project okay so we need to  let me have internet access so you can continue   okay so let's have the projects  running you click on it and   yeah we have it uh every level here so you  can see there are some few things that have   been added to the default because we have uh  show profile now relationship profile it is a   component and when you click on it let's see what  happens so nothing happens here now these are the   following um component that has been added right  but let's talk about this feature that is known   as a section so what it's saying here is let's use  this counter let's assume we have boxes here item   that we want to add so as soon as I click on ADD  you want to show this counter here this is going   to add to the item and we must have the item  displayed on top here so let's see now let's go   to the counter page so we go to the counter now  the counter here that is what you want to um do let's say you have this button right but if you check their   the documentary or the documentation it is saying  we have to add this to the net import so let's   copy this and let's go to the application we  have this import so let's add this to the import   let's save that the lesson that we can  do here is we have to add this to the main layout so let's go to the main layout   and that is a set folder click on it and if you  have new layout so we see from here we have this   this is a top row so this top Pro last time this  like this okay so we have this section over here   and so the name that one pull up if you want that  is a top row now let's see after having the name   the next thing we can do here is we to surround  the button with this section and now take note   that here we pass in session content then we pass  in the name now the name here it is referring to   the athlete's name that we set up over here so  whatever thing that you put over here is going   to be displayed on top of whatever that we uh  display the reset up here so it's it's like   there is a container and there is a Content so put  a container on top and whatever that you pass in   the content this pointer is going to cut it up  and I'll displace it so let's grab this here or   you can grab everything from this area let's copy  this let's go to what we have uh counter and now   here we can paste this year now let's save this  let's go to the components now let's see so if I   click on this I must have the counter displayed  here let's refresh this application and see so now we have this let's also make a copy of  this because you want to display the content of   Base so let's copy this and last piece is here  okay so this is the section name so whatever   thing that displayed here is going to take  effect you're not going to actually display   um it's going to display this button  here so we can click okay and also going   to display the counter as well let's  save this and unless refresh Json C okay so that is not reloading and  let's see the the output of this okay so we go to the counter page and let's  click on this next you have this counter here   now I can just click on click me now this is  going to count click me to a second account so   you can see it is working it is also working  now let's also display something like this   so let's say you have the item here  let's display something like this let's display maybe [Music] um box that's  a list okay so now that's this an item   and here we want to display the current count  so maybe you want to say that cuts Okay so   you want to say now you know here we have this  current account now you can say it's count   you want to display this current account so this  kind of that's right here but we want to say cut   so these are Cuts now you want to say that items so we want to display the current items now  I'll save this I only have one I have one item   two items Etc so let's see let's cut this and  let's say we want to display this content in   that section um content that so let's refresh  this and see what we're going to have now so   instead of creating a service to render the  current account when the button is clicked   using the section after like an accession  content um a fixed base for us now let's see   so this has made creating e-commerce very easy  so if you have cut item the the current item yes   or that is zero item if I click on obviously have  one item so let's assume there's a button I want   to click this is an item that I click as soon as  I click to get this account um get this counted   so you see two three four five six seven eight  nine as soon as I click it keeps what's added   yeah so that is it for this  video now make good use of   um there's a section and especially when  creating Commerce e-commerce site or e-commerce   applications thank you so much for watching this  video if you like what I'm doing give me a thumbs   up baby in the later on we're gonna have a full  project on how to use this Visa section and in an   e-commerce uh project let's see maybe we're  going to talk about that in some other time   so take care of yourself and I'm going  to catch you up in the next video

Channel: Netcode-Hub

Views: 339

Keywords: asp.net core, Registration, send email using mailkit, mime, controller, service, email service, web api, SMTP, pagination, EFCore 7, skip(), local storage, window.localstorage, scalffold, scaffolding, migration, database migration, creating models, fileupload, file download, blob, javascript, crud, sqlite, ef 7, authentication, blazot, client-side, jwt, token, blazor authentication, role-based, assign-role, assign role on button click, quickgrid, sorting, filtering, convert image, base64string, format

Id: 7COyFER_6M8

Length: 10min 38sec (638 seconds)

Published: Wed Aug 02 2023