Imaginary [dot:Hyperlink] control comes to life (or at least tries to)

It’s alive!

Hmm, I’ve quickly figured out that there’s no equivalent DotVVM control for the WebForms’ asp:Hyperlink control, so I’ve ventured to make one based on HtmlGenericControl and by looking at the code of <bp:Button and dot:LinkButton controls.

Why? Because I want the Enable true/false feature from the asp control that you do not have when using just the HTML anchor (<a>):

So far, it seems to work well and the coder makes silly happy jokes…
but there’s something

These two CSS classes sync with the Enabled state and they’re just boilerplate, repeating on each and every Link control.

My question is: how can I integrate this into the code control ?
Looking into the options for the IHtmlWriter comes up with some methods that seem to be purposed for adding CSS classes but no sign of their counterparts for removing CSS classes:
image

I can send you the control’s code if needed.

PS:
When I disable the Link control I also need to make Href = null otherwise the link will still be usable in the UI despite the disabled="disabled" being applied, this being so because it renders an <a> tag in the HTML for which that attribute is not officially valid, from what I’ve understood. But I’m wondering how to integrate this also into the control’s code. The toggling of the href attr in sync with the enabling/disableing, I mean.

To disable the link, you can add the dotvvm-enable knockout binding even if Enabled is a static value (writer.AddKnockoutDataBind("dotvvm-enable", "false") after AddAtrribute("disabled", ...)

Since you inherit from HtmlGenericControl, the easiest way add the class binding is to insert it into the CssClasses collection:

this.CssClasses.Add("link-btn", this.GetValueOrBinding<bool>(EnabledProperty));

this.CssClasses.Add("link-btn-disabled", this.GetValueOrBinding<bool>(EnabledProperty).Negate());
1 Like

Unfortunately I didn’t understand this paragraph.
The Enabled control property has a dynamic value (it is value bound):
image

Fortunately, your suggestion for the CSS classes worked. Here’s the result:

If the Enabled property is bound to a value binding, my suggestion is irrelevant. Just if you would like to also support hardcoded values (or resource bindings), you might still want add data-bind="dotvvm-enable: false", which blocks clicks on the link.

1 Like

I see that when dealing with other ways of enabling/disabling the Link control (besides the case of value binding Enabled to a bool variable - that works) the code needs something else.

I tried resolving it for these other cases: resource binding to variable, resource binding to true/false, simple static binding (Enabled=“true” or false) and value binding to true/false and did not succeed. I don’t know how to write this code, tried all sorts of versions with no luck in satisfying all the cases. Please help!

What I got now:

At least I know that:

  1. I don’t know how to properly apply your suggestion of data-bind="dotvvm-enable: false";
  2. removing the href attribute from the anchor element ensures the link is disabled but I don’t have a writer.RemoveAttribute method. And only adding it by KO data binding by using writer.AddAttribute does not work like it works for the “disabled” attr.

Worth mentioning that those two lines dealing with CSS class toggling do not work for the case of resource binding to variable.

PS:

I tried with this:

And with this: