Blazor .NET 6- Dynamic Components - 4 Examples of DynamicComponent

asp.net core 6 is in preview so in this video we are going to study a characteristic of net 6 for blazer which is dynamic component as its name implies dynamic component is a component that allows us to dynamically render components the idea is that we pass the type of the component to render and optionally its parameters and the component is rendered this allows us to save code because in this way we don't have to use if or switch statements in order to achieve this functionality so if you want to follow along you must be sure to have dot net 6 preview on your machine you wish you can get from here and from here you can download the latest version of dotnet6 if you want to use visual studio you also need the latest preview of it in my case i already have all of that installed so i can open the preview of visual studio and i can say create new project blaster webassembly app next and i will say blazor dynamic component demo enter dot net 6 preview and i will say experiment core hosted and create what we are going to do is that we are going to do four examples in this video of the dynamic component component the first one is going to be the basic usage so let me go to pages index and i will delete everything here and let's get to work i will say dynamic component and i will pass the type which is the type of the component that i want to render i will say type off and i will say survey prompt which is a component that comes with the default template of laser so let me say control five to test this and as you can see we have our survey component here now of course we can pass parameters to the dynamic component so let me say here code and i will initialize here and i dictionary of a string object which i will call parameters equal to new dictionary string object and here i will say title my title title is the name of the parameter of the survey prompt component let's go there let's go to shared survey prompt component and here as you can see we have title as a parameter so that is why i have title here and now let's come here and let me say parameters equal to parameters and let me save and let's come back here and as you can see it compiles automatically and we have my title here now for the second example we're going to do a select with a select we're going to dynamically change the component that we're passing to the dynamic component component so first i am going to create two new components let's go to shirt add razor component checkbox component and this is going to be a really simple component this is just going to be a checkbox and also let me create another component which is going to be a text box so textbox component and this is also going to be really simple just that in this case we're going to use binding to bind this text variable so that we have this text variable appearing here which is what the user is writing in the input type text so let's go to index racer and do our example let me delete this this is example 2 and first what i want to do is to have the type in a variable because we are going to change this variable dynamically we are going to have an unchanged method that is going to run when we change the value in our select now here i will say type equal to type dot get type and in this way i can get the type of the components that i just created through their name but first i need to get the namespace in which they are located i can get that from import so let me copy this and let me come back here and i will say here a string namespace components equal to this and dot at the end and here i can use string interpolation so that i can say namespace components and here at its right i can say e dot value dot to a string now we need to code the select so let me say div and if here select let me say here on change and unchange here now let me say option name of checkbox component in this way we are writing the name of the checkbox component here and i will copy it and i will say here value equal to name of checkbox component and let me clone this line and here we're going to have that textbox component and textbox component here and finally below the div we're going to say dynamic component type equal to type which is this type that we have here which we are dynamically updating after we change the value of the select so let me save and let's see that let's go back here and here we have checkbox and the shape was here i can interact with it and also i can select text box and as you can see we have the textbook here i can write felipe and as you can see we have felipe here which means that we're not limited to use simple ui components we can indeed use components that have functionality now for our third example we are going to communicate from a shell component to a pattern component of course we're going to use a dynamically rendered component for this so what we're going to do is that we're going to use cascading parameters why is that why can we use even callback well because if we go to parameters here you are going to see that the data type of it is a dictionary of a string an object this object and let me show this one more time this object that we have here will not allow me to send an action or a func so that is why what i will do is to use a cascading parameter we remember that with a cascading parameter we can have parameters that we can use from any child component without having to receive it through an attribute such as parameter so let's do that first we need a class that will contain the type of data to send into the cascading parameter so let me create a class here at class i will call it app state and we're going to have two parameters action and action with parameters this action represents a method that doesn't have a parameter an action with parameters represents a method that is going to have that is going to receive a parameter this parameter type will be dictionary of a string object although i could use a class here if i want to by using a dictionary i can have the flexibility of allowing the apparent component to receive all kinds of parameters so let me now create a component that is the one that we're going to use let's go to shirt add class razor component and we're going to say button component and this is going to be a really simple component this is going to be a button here and we're also going to have a handle click method here and above it we are going to put our cascading parameter we are going to say cascading parameter upstate upstate and here in the handle click when the user clicks on the button i want to use the app state in order to send a message to the parent component so i will say app state dot action question mark just in case action is null invoke and in this way we are invoking whatever method is associated with this action property that we have here let me do the same for action with parameters just as an example first i want to have a dictionary here which is going to have these two items inside of it which are going to have key 1 and value 1 and k2 and value 2 and also let me say here then have a state action with parameters invoke and i am going to pass the dictionary and that's it now we can use this structure to receive a message from a pattern component so let me go to the index component and let me delete all of these i don't need this anymore this is example three and first i will say upstate i will initialize a new instance of upstate now i want to create the methods that are going to run in the pattern component when the button is clicked so i will say handle click and here we have a console right line parent component handle click and we're going to have another method for the action with parameters as you can see i receive here a parameter which is of type dictionary of a string object which is the same type that i have here dictionary of a string object so let's come here and as you can see what i'm doing is to write in the console the key and the value now i need to use the uninitialized lifecycle method of the component in order to initialize this action and this action with parameters so that i can associate them with these methods that we have here now finally i need to put here a cascading value component so that i can send a cascading parameter to every child component and here we're going to say dynamic component type equal to type of button component and let me close this here and that's it now let me save let's come back to google chrome and as you can see i can press f12 and we have the console here i can click here and as you can see we have pattern component handle click and key one value one key to value two which means that we indeed were able to execute these methods using a cascading parameter so that we can communicate from a style component a component that was rendered dynamically to a pattern component now for our fourth and final example we are going to generate a component from a json the first time i heard about the dynamic component immediately my mind thought of the scenario of rendering components from json's store in a database this is because i once worked working a project that we actually did that but in angular now with this with the dynamic component we can easily do this in blazer so let's do that let me clean this up and let me also clean this and let me create a json file so let's go to the www directory we're going to have to pretend that this comes from a database but we're instead going to use a file here so let me say json here json file and i will call it data.json enter and in here i can use whatever structure i want i will say component equal to survey prompt comma parameters equal to title equal to json title as you can see we have component equal to the component and parameters which is going to be an object which will have all of the parameters that we need in order to instantiate the component now i want to have a class that we will use as a destination of the decentralization of this json so let me come here right click here add new class and i will call it json component and this one is going to have two properties which are going to be component of type string and parameters of type i dictionary string object and let me save and now let's come back to the index component let's go to index.racer and in here we're going to do the following first we need to inject that http client and we also need to use system.txt.json now let me instantiate the type and the i dictionary that we're going to use then we need to use the http client in order to get the information of the json file that we just created so i am going to use the uninitialized async lifecycle event so let me put this here and in here i will say var json equal to await http get from json async and i will serialize to json component and i will say here data.json and now i will say if the json parameters are different than null then i will iterate them i will say for each parameter in json parameters and then i need to do the following i need to cast this value which is of type object into a json element why do i need to do that well because in this dictionary we are going to insert the parameters of the component but i need to be careful with the data type that i put in the value of the parameter of the dictionary because it is going to correspond to a c-sharp variable that needs to have the correct data type for example let's go to the survey prompt component and as you can see this title is a string and that is fine but if we had another parameter like an int or a boolean we need to be careful in using the right data type here when filling the dictionary so let's come here and let me say switch parameter key and we're going to say case title which is the name of the parameter and if is a title then it means that we're dealing with a string so i will say here dictionary add parameter key json element get a string and see that we have get a string we also have get boolean get decimal get in 32 and so on so if we want to pass a parameter that is an integer we would need to use get in 32 if it were a decimal we use get decimal if it were a boolean we use get boolean and so on if you don't do this then you will get an exception at runtime so let me say here get a string and break here and let's also say default here and here in the default case you can do what you want if you want you can throw an exception and so on but in my case i won't do anything i will just add this value to the dictionary and that's it now something else that i need to do is to say here type equal to type get type and here we're going to say s3 interpolation and here we're going to have the name of the component which is going to be json.component and here we're going to put the namespace so let me go to import one more time let me copy this and i will put it in a variable a string namespace components this i'll copy this and i'll paste it here and finally let's come here and let me say if type is different than null then we're going to render our dynamic component and that's actually it with this we're ready to go let me save and let's go back here and as you can see we have json title here and we did indeed render the survey prompt component which means that from a json file from this json file let me go to slash data json from this json file we were able to render a component so the dynamic component allows you to render components dynamically by using their type and you can also send parameters using a dictionary of a string object and if you want to send messages from the dynamically render psi component into the pattern component you can use cascading parameter as you learn in this video if you like this video please make sure to subscribe to my channel and let me know what you want me to cover next thanks

Channel: gavilanch3

Views: 5,190

Rating: 4.9480519 out of 5

Keywords:

Id: 6JIADmG2kxo

Length: 17min 19sec (1039 seconds)

Published: Fri Apr 30 2021