Markup controls with code-behind

holajan · August 22, 2023, 8:49am

Hi guys
I’m trying to make a custom control. I chose to make the control as a Markup control (DotvvmMarkupControl) so that I don’t have to create the HTML structure of the control with C# code as it would be with a Code-only control, but the result should behave like a Code-only control.
I have a few issues.

The first is that I don’t want to have any viewmodel here (like in the Code-only control), the properties will be bind from the viewmodel when the control wil be used in application.
@viewmodel is required here, but I got around that using:
@viewModel System.Object
but it’s not completely clean solution.

The second thing is about properties. I would need to make a derived property, I would like to do something like:

public string MessageTypeClass => this.MessageType switch
{
    MessageType.Info => "alert-info",
    MessageType.Warning => "alert-warning",
    _ => "alert-danger",
};

But in this case property MessageTypeClass isn’t working.
So I instead of this do a complete DotvvmProperty and set its value in OnPreRender method. This partially works, but after postback is sometimes property not updated correctly.

My code is this:
dotcontrol:

@viewModel System.Object
@baseType DC.HodnoceniZamestnancu.Controls.MessageAlert, DC.HodnoceniZamestnancu

{{value: _control.MessageType}}
{{value: _control.MessageTypeClass}}

and code behind:

public class MessageAlert : DotvvmMarkupControl
{
    public static readonly DotvvmProperty MessageTypeProperty = DotvvmProperty.Register<MessageType, MessageAlert>(c => c.MessageType, MessageType.Error);
    public static readonly DotvvmProperty MessageTypeClassProperty = DotvvmProperty.Register<string, MessageAlert>(c => c.MessageTypeClass, "alert-danger");

    public MessageType MessageType
    {
        get { return (MessageType)GetValue(MessageTypeProperty)!; }
        set { SetValue(MessageTypeProperty, value); }
    }

    public string MessageTypeClass
    {
        get { return (string)GetValue(MessageTypeClassProperty)!; }
        set { SetValue(MessageTypeClassProperty, value); }
    }

    protected override void OnPreRender(IDotvvmRequestContext context)
    {
        this.MessageTypeClass = this.MessageType switch
        {
            MessageType.Info => "alert-info",
            MessageType.Warning => "alert-warning",
            MessageType.Success => "alert-success",
            _ => "alert-danger",
        };

        base.OnPreRender(context);
    }
}

And control is used like this, where MessageType is binded from viewmodel:
<cc:MessageAlert MessageType=“{value: PageErrorMessageType}” />

What is the correct way to do this derived property logic in code behind? For example, in XAML in DependencyProperty there was something called coerce-value callbacks for this. Is here something similar?
Thanks.

holajan · August 22, 2023, 9:03am

Actually, there is also bug in the properties usage validation. If I used to a non-existing property in the .dotcode, I correctly get this error:
Could not initialize binding ‘{value: _control.MessageTypeClass}’, requirements DotVVM.Framework.Binding.Properties.KnockoutExpressionBindingProperty, DotVVM.Framework.Binding.Properties.ResultTypeBindingProperty, DotVVM.Framework.Binding.Expressions.BindingDelegate were not met.

but if the property exists there, but it is implemented as property only (not the DotvvmProperty), this error will not appear, but when rendering on the client, this JS error will show in console:

Uncaught TypeError: Unable to process binding “dotvvm-with-control-properties: function(){return { MessageType:PageErrorMessageType} }”
Message: Unable to process binding “text: function(){return ($control.MessageType() ??”“) +”\n"+($control.MessageTypeClass() ??“”) +“\n\n” }"
Message: $control.MessageTypeClass is not a function

exyi · August 23, 2023, 3:01pm

Hi!

The first issue: Yes, @viewModel object is the correct solution. I understand it feel more like a glitch, but “no view model” does not make sense in dotvvm, what you actually want is to allow any view model.

Second issue:

You are right, I’d also say it’s a bug that we don’t report error when a plain .NET property is used. Using PreRender a correct workaround, alternatively you could use an instance method on the control, or static method defined anywhere else. Both of these options are however not reexecuted on a postback - the value get hardcoded into the HTML and DotVVM only updates the view model.

You have two options if you want to update it on postback

Use the PostBack.Update property, that will make DotVVM regenerate the HTML on each postback. See Server-side rendering | DotVVM Documentation
Write it in a way DotVVM can translate to the Javascript expression. This may actually be very easy in your case - If you apply [EnumMember(Value = "desired-js-name")] attribute the enum fields, dotvvm will represent the enum client-side using these names, so can replace your function by letting it implicitly convert to string, or using the ToEnumString function

holajan · August 23, 2023, 3:44pm

Hi, thanks for that.

How to use PostBack.Update=“true”?
If I use it on control usage, its working:
<cc:MessageAlert MessageType=“{value: PageErrorMessageType}” PostBack.Update=“true” />

But how do I achieve this behavior inside custom control definition, in MessageAlert.dotcontrol or control code behind?

holajan · August 23, 2023, 4:32pm

As for the JS solution, this is how it works, but it’s little ugly.

{{value: _control.MessageType == 'Info' ? 'alert-info' : _control.MessageType == 'Warning' ? 'alert-warning' : _control.MessageType == 'Success' ? 'alert-success' : 'alert-danger'}}

It would be nice to support something like this for this kind of cases.
{{value: ({ Info: 'alert-info', Warning: 'alert-warning', Success: 'alert-success', Error: 'alert-danger'})[_control.MessageType])}}
which is a JS variant something like a switch expression.

But I still need the PostBack.Update solution though, because there is another property that can’t be done with an js expression translation.

Thanks

exyi · August 23, 2023, 7:02pm

It should work even if you place it inside the control, you can put it on just the <span> with your label. It shouldn’t be placed inside client-side rendered Repeaters and similar controls. You can also set it in code-behind using control.SetValue(PostBack.Update, true) (but you have to be careful about control unique ids…)

If this doesn’t work, it’s of course possible it’s buggy in some case. Does it fail with some error? (it would probably be an client-side error, most likely the control ids don’t match)

exyi · August 23, 2023, 7:08pm

Well, you can always use knockout data bindings directly (data-bind='text: ({ Info: 'alert-info', Warning: 'alert-warning', Success: 'alert-success', Error: 'alert-danger'})[$control.MessageType()]'). Note that it’s necessary to use the _control.MessageType in some value binding, otherwise DotVVM won’t bother to send it to the client (I’d recomment <dot:Placeholder IncludeInPage=false>{{value: _control.MessageType}}</dot:Placeholder>)

holajan · August 24, 2023, 8:14am

This working.

protected override void OnInit(IDotvvmRequestContext context)
{
    SetValue(PostBack.UpdateProperty, true);

    base.OnInit(context);
}

Thanks, that’s what I was looking for.

exyi · August 24, 2023, 11:24am

Great!

I’d still recommend placing the smallest possible subtree in Postback.Update. Also prefer to use resource bindings to force server-side only rendering. I think that this might not have worked for you, because the control property is serialized in the control header and the alert element only references that value. If you use a resource binding instead of value binding to bind the property, the value gets hardcoded into element and no references interfere with that.