How To Make Reusable Templates In Blazor (W/ RenderFragment)

welcome to just blazer programming and before i get started let me give you a quick thank you quick shout out for the 340 subs have joined me and i will continue making more videos in the future just keep writing your comments as to what you want to see now on today's video we're going to be learning about reusable templates now reusable templates are very important in blazer because blazer is all about use using components and reusing your code without rewriting it obviously this is how angular react worked as well so this is how you're going to use a blazer effectively when it goes to your front end development in order to create a reusable template you must use something called the render fragment now if you've never heard what a render fragment is it's basically how we handle passing in html code so on screen i'm going to show you something of an example that's what i'm talking about here here so this is just a counter from the um from the counter component that comes with the startup blazer so here in my other videos i've discussed you know adding parameters to the components through uh between the alligators so here's where you would normally add like a parameter that you would that is being expected by the component but this space here is a little bit different i have not taught you yet how to get information from here or how to pass information from here and use it in order to do that this is not technically a parent is not a parameter this is something else entirely in order to get this information you need to use something called a render fragment as your parameter instead so in case you want the information between the two brackets this is what this video is going to be for and that is the key to making your reusable templates so i just shown you an example of where the render prime is going to be within a component but i have not actually taught you what is a render fragment i've given the definition of it a render fragment in blazer is just a class that injects embedded content into the component but it works kind of like a parameter except that what you're injecting into it is between the brackets and what your and what the type is is going to be just a render fragment so it could be an html it could be plain text it could be a lot of things it's just not a primitive data type like we're used to so this is the key into creating reusable templates because this is how we will keep reusing code over and over again in order to create let's say a grid a table or any number of other objects that we might need in our project in fact this particular project we're going to create a reusable grid the grid is a very good example because you will run into this nearly in every job all jobs require you to create some sort of grid to show information to the user in some way so i believe that a grid is probably the best way of showing off whatever how a render fragment works and how to use reusable templates because now that we have now it doesn't matter what kind of information goes into that grid or what kind of types go into that grid we will have a uniform grid to be used all over our our our project and not worry about whether it's going to work or whether it's going to look different to whatever style we have set up so it's just going to be a very simple grid no sorry no nothing but it will at least teach you the basics of using render fragments and making reusable code in blazer so let's get started so i have here the project that i just created i call it the reusable sample app so you call it whatever you want this is a brand new product that has not been edited just yet so this is what you saw before if that was just a counter example that already existed in the startup project so before uh just just letting you know so the first thing we want to do is add our component to this tab here even though we don't have existing yet just to make sure that it's there so what i have here is i've already written the tab code we're gonna call it usable i did reusable component and we're just going to cloud use book that's all we're going to do for the tab for now and now we're going to make the component in our pages folder component and this is a server uh the server project it makes no difference if you i believe it makes no difference use one or the other but i just use this because really easy get started reusable so in this case because we're going to have a little bit of code and i want to start using best practices i'm going to do something called the code behind and i'm going to put the c sharp code behind quote unquote the uh the razer component so that means that i'm going to separate where this code is going to go into its own separate page and class but it's still going to refer to the same component so if you have not seen what a code behind is i have a video about it right here somewhere there and i would encourage you go see it once we're done here but if not then i'm just gonna show you here how to do what i'm i'll show you what i'm gonna do right now so we go here we're gonna add a new class a new c sharp class and make sure you give it the exact same name as the component we want this to be attached to whoopsie daisy it's going to be called re-usable on it i'll make sure you write it right are he dot razor that's cs so what this will do is this will basically scaffold it into the razor or so that it will be attached to it but it will work the exact same way that this code works over here um except that it just i believe will give you cleaner code and it will allow you to scale the component better so as you can see we have created the scaffolding here we have attached a reusable component.razer.cs to our reusable component uh com visible component we're not done yet as you can see we have an issue here so we've got to add our show class to it and that will fix the issue for whatever reason every time that you want to do this something like this you have to add this partial class to it it doesn't do it on its own so just keep that in mind but now we could add whatever code we're planning on adding here to here so we don't have to actually um you know add it into the put all the code in one place this will allow us to make cleaner code for the future but we are not done yet we're gonna need so the plan is to create two grids basically two grids one of the grids will be how you will make it manually so if that is rewriting your code over and over again and the other grid is going to be using the reusable grid reusable component we're going to create so to do that we're going to need some data in order to make this data we're going to create services and services require interfaces so we're going to create two of them for two different sets of data so that you know that this is a reusable component that does not matter what kind of data that goes into the um into the grid so just follow me here the first thing we're going to do is create the interfaces that we're going to need so in our data i'm going to create a new folder call it grid data and within here we're going to create two interfaces and two classes that uh inherit from those interfaces so let's start with the interfaces first go to our interface and the first interface is going to be i r data the eye is just the um it's the convention that people use when it comes to interfaces so i like to stick to that and this is going to be a car data uh interface because we're going to have car data so in case you haven't figured that out so for this we're just going to have one method put into it and it's going to be real easy going to be list.car but we don't have this car created yet so that's fine for now we could just create that a new item create the the car class suddenly there's gonna be a model but i already have some data prepared i'm just going to copy paste it from my other screen so we have it in two strings and a decimal here and it really doesn't matter what kind of things you have you could have any of the primitives if you feel like it i'm just choosing these primitives and i'm only gonna have four properties because on the other one we're gonna have different primitives uh different types and more properties than this one to show you that it doesn't matter what you uh how different they are as long as they're just simple types as long as you can put them in the grid the reusable grid will work so that will be our car class this should be fine now perfect so in here we're also going to add another interface but um we're going to call this instead youtube analytics because we're going to refer to analytics of youtube so these are two completely different things ideas so you know that it'll work regardless so in this interface we're just gonna have basically the same class um you know i'll get method in oh oops i didn't put the i i youtube analytics data about that and poof it's going to be called i youtube analytics data and in here we're just going to add another get list class we're going to this doesn't exist yet but we'll create it now item class youtube analytics and again i have data prepared already so we could skip some of this as you can see here i have more data than before but here i have it is subscribed watch time hours username user email is female subscriber did you know that 100 of you are males according to the youtube analytics therefore if there is one that's not true so make sure that when you add this property here it's a public property and you always get false it's never going to be real it's not going to be true unfortunately how it goes when it comes to tech channels so in this case we actually have five properties a boolean instead we have an integer it's and two strings so uh yeah so i think this is pretty good i have a nice diverse range of data types here so now that we have our interface and now that we have our object what are we missing well we're going to need data but now we're going to add the data into the actual data so we don't have a database to call data from we're just going to make them on the fly using uh a class here that again we're gonna do the same thing and add a new item new class and this will be the class that will inherit the the the interfaces in order to call those methods and populate the data for a grid in this case we'll call it youtube data so youtube data will inherit from i analytics data if you want you can just let it populate it for you limit the interface here but i already have some code ready to go again i'm just going to copy paste it you let me know if you just want to see me type everything out again because i could do that but i just have everything already pre rewritten and i can just copy paste it and give you like a moment to go through the code yourself there's a lot going on here so i'm just gonna run through it real quick so within here i have a random class here i also have a list of the youtube analytics that we're gonna return um and here these are all the youtube uh objects we're gonna add in there so you have your a subscribe property watch time hours you didn't name user email is female these the the actual properties doesn't exist or that mean that doesn't it doesn't matter these are just what i wrote in there you know whatever i wanted so i have my near perfect user with 100 to 300 hours you're the perfect one but i have some new guys here to have zero to 50 hours have the best one but the one who is uh obviously he's gonna return false you know have that written in there the female enthusiast with a thousand to five thousand dollars the most perfect one in reality is zero to five hours no emails you know no subscription none so that's just what i wrote you can write whatever you want here really makes no difference just remember to add just a few of these in there so you can see the grid actually do this thing so that was my youtube data now we're gonna make the car data second we're gonna do the exact same thing that we did here so here add a new item we're going to add the car data class same thing here we're going to inherit from the car data interface not implemented don't worry we're going to implement it right now and you know the drills basically just add a a list of car data here in our case it's a list of cars but we want to return and then you just add whatever you want so i have some mid numbers with another random in there between two really big numbers and then whatever the make and model is going to be with a decimal in there between another two decently large numbers so you do this to whatever you want in this case i only have three cars you know it's not as fun as the first list so we're done with that so now we have our services i mean our services not yet but we have our interfaces our class that uh our models basically and then the classes that cause upon the interface that inherits the interface and gives you the data you want but what are we missing so when it comes to working with things like this with direct injection you're going to have to add services and your program is going to be able to call them so here this is where all that's going to be handled so this is how the program handles um generic sizing your data basically and calling upon these services so we need to add those two services that we just created here the um the car data and the youtube data ones here i'm gonna do that now if you don't know what this is and you want to learn more i can make a video about it but for now you just copy what i'm here to do if in order to make this work so typing a little bit here and add scope i want to create um one instance each time we call it that's what the scope means so we're gonna add the gotta add first it's able to actually there it is now i can see it remember to add the your grid data uh directory here confusing the names whenever i say like whenever i want to say using the directory library blah blah blah we're going to add for each one we created interface that would now our project can call upon this on these services and use as we will but again if you want more information on that let me know with that also let me know and let me know what the proper way of calling that using thing is like always every video i always screw it up and i call it something different you know i'm not gonna google i have everything here i'm gonna google it for the uh for the engagement you know like if you want more engagement online if you want the right answer always give off the wrong answer someone's going to answer you because that's how it works now we have that set up need that we don't need that we don't need that here though first things first let's add the page tag here yup navigated to not just component anymore is now page let's go back to our class here the partial class that is uh code behind to the usable component add some libraries up here and then you need access to all that stuff we just you're gonna need this well that's not this i'll reuse make sure to add this here because you're going to be using the uh the life cycle method and i made a thing about that as well a video so first things first we have to do is inject our two interfaces or two services that like this so now we have access up here through direct injection you will see that momentarily and now we need to create two lists as well that we have our youtube analytics list and our list perfect and now we do uh the on initialize on getting the data so you don't know what i'm doing here if you don't know what the lifecycles methods are i have a video for that as well so you are not lost as to what's happening but what basically is going on is that when this component gets rendered before it completes the rendering process it's going to grab the data in order to grab the data it needs to go through uh to grab the data from both the services that we've applied it so yes that is fine so now our code has all the data we need in order to put this in email and that's the next step we're going to do we're going to reusable component html here now it's going to be a bit maybe a bit of code here so the first thing we're going to do is add a div here last because what we're planning on doing is creating two of these uh reusable components uh they're not reusable right now but we're gonna be creating two grids that you have to keep remaking the code you keep reusing the same code over and over again which is not the good way of doing it but i just copy pasted this here so in case you're wondering what we're doing we're gonna check to make sure that our analytics list has something in there it's not on null and then we're going to create a table just for that so we have our table with the five columns these are the headers and then this is how we're going to write our code for each of the analyt inside for each analytic in the analytics list you're going to put them into your their own columns per row so when it comes to the boolean the way you work with this if you want to actually show off something in english you would have to create an if statement and then put in um html tags in here with whatever you wanted to say so in this case if it's you know if it's subscribe it's a yes if not it's a no and then here the same thing with the is female thing there's another boolean it's a yes uh but the tag there is to know i put the tag here the other ones are strings or numbers so it doesn't really matter they will be stringified all the same that's what we're going to do with this one for the next one we're going to do the same thing basically that's the way it ends so at the end of this div i'm gonna add this here we're doing the exact same list except this time we're gonna be using the car list and i'm gonna have a vin make model and price do the same thing there isn't any booleans here so you don't have to do anything special to make it uh easier to read we just have numbers and strings basically so the same logic here i believe for the first part of this tutorial we are complete now remember this isn't um reusable yet we're just making two different tables uh with uh we're just rewriting the same code over and over again this isn't reusable just yet i'm just showing you to make sure that the data works and that when we create the usable the reusable template you will not see a difference that's how it looks like very simple we got two tables going on created different not in two different ways but they were copy pasted basically and these tables are not reusable we have to if we want to create more tables in the system like this we have to keep rewriting the same code over and over again um and that gets really clunky as you see here not only that but we will have to make sure that every time we make this code we rewrite the same you know css styles and what what have you here if you took a good look here covered two grids perfect so now we're gonna make a reusable template and to do that what we're gonna do is go to the reusable component here and we're gonna copy and we're gonna paste to save us some time so we're gonna remove and remove this stuff here for now so here i want you to call it reusable template instead just to make sure that it's different so it changed here you see how it says reusable component this has to be changed that [Music] the reusable template yes it is so we're going to rename this here avoid confusion we'll also call this reusable template as well and create a tab for it not do it now so in this case we have we just copy pasted the same code and let's go to the nav menu we're going to create the usable template uh tab we'll see didn't need oh this will look the exact same i'm just going to copy paste it just so in this case this should work as is and if there's any issues with it i'll tell you what happened and skipped the process of debugging it but luckily for us nothing has changed so go here let me go here so we just copy pasted the exact same code don't worry about this remember we had random random object in there so that these change but these are the exact same thing but now we're gonna make this template reusable like truly reusable so in order to do that i'm going to grab some more code from the side grid that you do not see i actually want to leave that there so what we're going to do is this template here this is going to be our template example but we need to create another component and this will be the grid component that i'm talking about so we're going to call it so this will be the actual grid and you will see the render fragments and all that stuff work here so in this case i'm not going to do a code behind i don't think there's enough code to really justify it oh first things first we're going to add a type param here iparam t item this is basically just a generic item it's an object that we're going to use to pass in information to the grid regardless of what the data type is that keeps this generic i'm just going to copy paste html here now these don't exist yet but they're going to exist now once we added i'll explain to you what's going on now it would be more prudent to add this reusable grid into the shared folder but that's fine just remember that if you do add actual in an actual project if there's a folder that is to be shared between other places have that in a special directory just for that in this case because this is just a uh uh a sample project trying to teach you something it really doesn't matter but that's just the uh i'm saying i just realized that now so in this case we have our render fragments these render fragments here are going to be your templates i have a parameter being passed in here just for the grid name so we're just going to change that we're going to actually pass it as a true parameter parameter you see the difference between what's going to happen uh between the render fragment parameter and the actual uh primitive parameter so in this case we're going to have html being passed to as the header so whatever gets passed to here is going to be built into the header this will be a row of items so this will take the place of adding the actual rows of stuff of data that you're trying to add like we had in the other component and the footer um i'm not going to add anything really i'll just show you what the footer does oh he's going to add maybe like a like a string in there maybe you don't really need it for this case and this right here is going to pass in the list of items so that's why we have t item here because we don't know what the object's going to be it's a generic um the generic class so we're going to pass in whatever we want through here this is just a read-only list of some generic objects so let's put that into play the reason why i made you make a copy of this reusable template is because get rid of all the other ones those two the reason why i made you make a copy of this so that we could copy paste these into the actual reusable template i'll show you what that mean so you see this table and i just and i put that in comment that out because what we're gonna do is we're gonna get the reusable grid and this component we're gonna add all the uh html stuff in there along with passing the parameters so in this case we have a parameter called read name what was called grid name written name so here i'm just going to say that this is the uh analytics and then we're going to pass in the items as well so the items being this list of items youtube analytics and now we're going to use now we're going to show you the render components so this is how you do it we called one of them header right so now we're going to pass in this whatever you wrote here going to be passed in here as i said before you could pass in whatever you want in this case we are expecting html to be passed in specifically these headers he passed in here so when this builds it will build off those headers so that's what i mean by passing in as a render fragment and that will be the html that you want to use here and now it doesn't now you don't have to keep rewriting um rewriting this whole table code once again all you have to do is make sure that you know what kind of headers you want what kind of the body that you're looking for and if you want a footer you can add that too i'm not going to add a footer in this one add one to the next one though in this case next one is going to be row and for row we're going to add the same thing we had here for each i don't bro no we don't perfect we don't need the the tr here we just the the tds columns but we have a problem here we can't use the same name anymore this analytic does not exist here so instead what you have to do is replace this with this context context would do the whole the context deals with the whole generic uh stuff for passing it doesn't really care about the output so in this case where we had our our analytic was the name of each object here it has to be context and i think for that we're done so we could just get rid of this and we're going to do the same thing ours here follow the same thing so because you already saw me do it already i'm just gonna copy paste what i have here and save some time i just know that it's the exact same process i all i did was take the vin header the make model price all the headers i took all the the objects here and i added a footer here on a test foot to see how that looks like i look good but you know i can't do but just make sure that when you do that you add you replace the name of whatever we call the car object context or whatever i call it car list2 and it is called car listing so i believe that is all and it will all be within the row within the column i'll just make sure that you didn't delete the div for it sometimes i do that okay i think we're good to go let's see one take willy that's what my name is going to be only one take and it all works we have our component here this is the old one and now this is our reusable grid now i added this into the into the component grid by accident but as you can see by creating that template and added the footer on this one we can make changes to it if we want to we could reuse the same components over and over again without recreating the same code over and over again like we did here remember these two were written twice this was technically only really written once and then we changed the uh whatever the html is going to go into this you could do this program it's better for you when you're trying to write your grids programmatically um instead of manually like we did here and basically now you have a uniform way of having your program create grids and such and this is a good example of how the render fragment works so i like this example a lot and you know what i'm not gonna take credit for this actually i'm gonna put in a link below as to where i got this sample from i think that uh when i was looking into this i was having issues with how to really explore and explain the render frame because if you go on the microsoft website and try to read up what a render fragment is and how it works is kind of confusing so this example is really clears it up for you how to use it and you know how to use in a pragmatic way so i don't want to take credit where i didn't write it so i'm going to put the link at the bottom of the description for you guys and if you guys out there have your own tutorials that you enjoy a lot because you read up on them on blazer or or whatever let me know let me check them out and i'll tell you whether or not it's good i think this tutorial does two things really well number one it gives you a real-world example of something you're going to be doing in blazer which is creating grids now most likely what's going to happen is you're going to create a third you're going to use a third-party library to do all that because you're going to have sorts and you're going to have special functions that you want to do paging and all that stuff but for a very simple grid this is perfect you can create your own um grid from scratch and keep reusing that same component over and over again without rewriting the same code the other thing is that this is a good way of learning how the render fragment works and render fragments are absolutely necessary to create reusable templates so a template like this and even more complex ones later on so if you guys out there enjoyed my content let me know if you guys want me to change things here and there let me know and if you have other tutorials and stuff you want me to check out other channels let me check out so i can see whether or not they're worth you know having this and i can make a video about them let me know too it saves me time i'm making up stuff on the fly and sometimes what they create is way better than what i can create i i have to be honest here teaching and learning are two different things and i want you to understand everything in the best way possible so if you find a tutorial that you like and you know i think it's a good thing i might make a video about it just let me know anyways i think that will be the end of this video and in my render fragment slash reusable template video stay tuned for the next one peace out [Music] [Music]

Channel: Just Blazor Programming

Views: 5,014

Keywords: blazor, C#, blazor C#, blazor 2022, blazor tutorial, .net blazor, C# blazor, what is blazor, .net 6, blazor webassembly, .net programmer, programmer, software developer, how to blazor, C# developer, Microsoft, renderfragment, reusable template in blazor, blazor reusable code, reusable template, grid template, grid in blazor, renderfragments, what is a renderfragment, how to renderfragment, templates in blazor, blazor template

Id: G783yfjGwk0

Length: 39min 29sec (2369 seconds)

Published: Mon Feb 21 2022