❔ Blazor: Get value of nested component
I have two component: CompA and CompB and a page index.
CompB is a simple input
CompA has a RenderFragment
I want to display the input text of CompB inside CompA
PS: I am doing stuff step by step to understand the process
77 Replies
The goal of all of that is to eventually build a component with nested components that interact with eachother...
What's your question?
How can i display input of CompB inside of CompA
if you want to only display the input, you dont need to set up two way binding like the way you're doing
I simplified my problem as much as possible because we don't care about the details. The real issue is that I want to retrieve the value in CompB and show it in CompA, but I think it is not possible to do it according to that https://stackoverflow.com/questions/60588712/retrieving-value-within-renderfragment
Stack Overflow
Retrieving value within RenderFragment
I would like to retrieve the value of a RenderFragment for use in my code:
Parent Component
<SkillIndividual>
<Skill>Fireball</Skill>
<AttributeType>Fire</Attribute...
so you want the
Value from the child component and use it in the parent component?Yeah
easiest thing to do would be 2 way binding then
create the value in the parent, pass it to the child
What if i want to put two CompB in the RenderFragment?
why do you want specifically render fragment?
The real thing im trying to do is build a generic table where you can add lines to it. The footer either accept input text or select. Before runtime, the code doesnt know how much column there will be in the table
why not in CompA
Cause before runtime i dont know how much compB i will need
Im passing a class that generate the columns here, so the component is generic. In some case, there might be 3 columns, other cases, only one. So I can't simply put the CompB in CompA because the number of inputs are situational
Does that make sense?
well the ui is just a reflection of the data
so you'd add data to the list
and the two way binding would correspond to a parent data structure's key
just pass a handler to the child
like you know how Prop/OnPropChanged params work?
But how can i define if the table uses input or select? I understand that the UI is the reflection of the data, but i am trying to build a reusable "infinite table" where i can define the combinaison of element i want in the footer wheter it is ddl.txtbox,txtbox ddl or whatever else combinaison. I dont know if that make sense
it doesnt
explain
with concrete example or diagram
I will explain what i am trying to do then i will send screnshot of where i am rn with it. Is that good?
ok
So I am trying to create a generic table where i can pass a List<class> and the table will display the data. Each properties of "class" has a column
ok
In the footer of that table, you can add datas to that List<class>. But since the table is generic, i want to reuse it. Sometime the datas can only be added from combobox, ddl, select, whatever you want to call it
Some other times, the datas can be added from input text
add data = add a list row?
Exactly
ok
and depending on the property type it could be an enum or free text etc
right?
exact! or data coming from database as choices
per column
ok
yup
any issue so far?
i see none
aside from costly reflection
to determine the properties
Well since the table doesnt know how much columns and what the elements will be in the footer before runtime, I was thinking of having nested component to determine the elements in the footer
you just use reflection
what do you mean?
the user picks type T
This is what i have right now
you use reflection to get properties and types of each from T
depending on the property's type you determine the correct input to show
and predefined options if any
Ohhh so depending on what i give in the class, it will decide if a textbox or a combobox is needed?
of course
how else?
...
like if type is T
and T.A is string with no constraints
show an input
I was thinking of passing RenderFragment in the component to decide it
if T.B is an enum, show a select
idk what render fragment has to do with it
Not sure either, I wanted to add a render fragment per columns to decide what will be in each column of the footer
basically you have a Table<T>
let's say T is MyObj
yeah
using reflection, iterate over properties
of MyObj
foreach, if type of property == string, render an <input>
if type == enum, render a <select><option value="1">...
etc
right?
Got it! But what if the propertie is a string, but it has to be a select for some reason?
why would it?
that woud be an enum
with DescriptionString
for some occasion I want the client to choose from a list of option but normally its a free text. Is that a problem with the logic?
if its a predefined list, thats an enum
what if it is a index from the data base refering to another table, how would i retrieve the data to show it in the select inside the table component code?
so you're composing classes at runtime?
or what
Lets say the data coming from the db is the following
User
Name: John Doe
City: 4
Then when i pass those datas to the table comp, i would retrieve the city name so it will be a string. But in reality, its not a free choice, since the selection need to come from the database table city. So the select options need to come from the database. In that case it won't be an enum cause we can add or remove available cities as the "application" runs from an admin console. So it cant be an enum
do you know the class of User ahead of time??
if not a typed lang gives you nothing
Yeah
ok good
then you know that City is an enum
right?
Wait, i know cityId is a foreign key, but i never considered it as an enum 😅
I guess it is?
if there are limited options for it
then of course
but the class user is the following
User
string name
int cityId
int age
So how do i diffence cityId that is a reference to another table thus an enum from age wich is simply an int
you take the value as an int and cast it to enum
but cities isnt defined in the code since the options comes from database
int CityInt, (Cities)CityInt
you should define it in codeBut what if it can change overtime from an admin console because some cities arent taken in charge anymore and some are?
well code-first would be best
instead of db first
the each time a new city is added the code needs to be modified, it doesnt make sense
ahhhh
but if you must do db first
you need to infer from your models what the enums will be
in your view models
Not sure what you mean by that but the concept make sense now
you cant really compose classes dynamically
defeats the purpose of a class
so it sounds like you want some sort of db first codegen
yeah, i learnt with database first and just recently started using code first
So i didnt think about casting CityInt into enum
i think it would be the only way to tell if it shoud be a select or input
Yeah, that would make sense!!
Was this issue resolved? If so, run
/close - otherwise I will mark this as stale and this post will be archived until there is new activity.