Taghelper attributes must be well formed

Question

I am using Razor pages in .net 5.0

I wanted to use anchor tag helper to generate href as shown below

<a asp-page="/Add" class="ml-4 d-lg-block" @* something *@)"

When add any c# code with tag helper it is giving a compile error in this I have added @* something *@ but it is giving a compile error

and also If I use any condition to render a tag, It is throwing compile error

<a asp-page="/Edit" @(Model.Condition?"":"disabled")>

saying compile error : The taghelper 'a' must not have c# in the elemnts attribute declaration area

How can I use C# along with tag helpers to satisfy both of the above condtions

The thing is, I should only use tag helper, not `href`. Can you please suggest any other — manish, Oct 10 '22 at 19:38
Does this answer your question? [asp.net conditionally disable a tag helper (textarea)](https://stackoverflow.com/questions/34866539/asp-net-conditionally-disable-a-tag-helper-textarea) — Poul Bak, Oct 10 '22 at 21:18

Dimitris Maragkos · Answer 1 · 2022-10-11T07:36:11.713

0

This is the syntax you have to use to conditionally add the disabled attribute:

<a asp-page="/Edit" disabled="@Model.Condition">...</a>

When condition is true it will generate:

<a href="..." disabled="disabled">...</a>

and when condition is false it will generate:

<a href="...">...</a>

Keep in mind that anchor elements do not have a disabled attribute so you have to add additional CSS to disable them:

a[disabled] {
    pointer-events: none;
}

This solution is explained in more detail here: https://stackoverflow.com/a/10276157/10839134

edited Oct 11 '22 at 07:36

answered Oct 10 '22 at 19:48

Dimitris Maragkos

8,932
2
8
26

1

While your answer is technically correct, the overriding detail is that there simply isn't any `disabled` attribute on HTML's `` element, so it has no effect at all. – Dai Oct 11 '22 at 02:44
That's true, but you can use the attribute in a CSS selector like this: https://stackoverflow.com/a/35746332/10839134 – Dimitris Maragkos Oct 11 '22 at 07:13
That's a horrible abuse of `pointer-events: none;` - and it doesn't stop keyboard navigation either. – Dai Oct 11 '22 at 07:16
`pointer-events: none;` is the most popular solution for disabling anchor elements: https://stackoverflow.com/a/10276157/10839134 – Dimitris Maragkos Oct 11 '22 at 07:38

score 0 · Answer 2 · answered Oct 11 '22 at 02:37

disabled will not work for a tag,you can try to use a button,and add window.location.href in onclick:

@if(Model.Condition==""){
    <button onclick="window.location.href='/Edit'" >...</button>
 }else
{
    <button onclick="window.location.href='/Edit'" disabled">...</button>                
}

Taghelper attributes must be well formed

2 Answers2