Is there support for creating dotvvm controls dynamically in a Dothtml page?

🌎 Discussion in English
1

is there support for creating dotvvm controls dynamically in a Dothtml page? if so how to do it ? we have a dothtml page and while launching it, some configuration come from db to add new controls with types. how to handle this in dothtml page as well as in viewmodel. also how to create event handlers for the same?
Thanks in advance.

2

Yes, there are multiple ways of accomplishing your goal. I’m not sure what exactly are you looking for, it depends how limited is your configuration.

Option 1 is to represent your desired configuration in a view model and then write a dothtml view which can represent them. Let’s say you add a property named AdditionalComponents containing a list of component descriptor. That would be a nested viewmodel with an enum property Type and all additional metadata you might need for the various components.

<dot:Repeater DataSource={value: AdditionalComponents} RenderSettings.Mode=Server>
  
  <div IncludeInPage={resource: Type == 'Component1'}>
     {{resource: Label}}: <dot:TextBox Type={value: Value} />
  </div>

  <div IncludeInPage={resource: Type == 'Component2'}>
     ...
  </div>

  ...

</dot:Repeater>

I used a resource binding for the Type condition to avoid sending all the unused components. This assumes that the configuration is not changing client-side, you’d need to reload the page to see the changes.

Option 2 is to build the components in C#, which is a more flexible approach, but it’s also more complex.

You can either access the DotVVM control tree in the Context.View property and do any kind of modification. I’d however suggest writing a custom code only control, as it will be more obvious what is going on in the dothtml view.

See Composite controls | DotVVM Documentation for more details.

In the GetContents method, you can read the configuration from a bound DotvvmProperty and then create the children collection in any way. You can reference other code-only controls by simply calling the constructor, markup controls can be referenced using the MarkupControlContainer. You can create value bindings using the BindingCompolationService.CreateXyz(…) method (DotVVM will inject the service into your constructor).