Aspnetcore: Vue-like directives

[andoband]

I've grown to enjoy Vue's v-if, v-show, and v-for directives. Maybe it's because I've gotten used to Vue, but it feels cleaner than the @if and @foreach blocks used by Razor and Blazor. Specifically it's easier for me to visualize the document structure when the code expressions are inlined with the elements versus external to them.

Could Blazor provide a similar syntax?

For example:

Razor/Blazor (today)

@if (bar != null)
{
    <ul>
        @foreach (var foo in bar) 
        {
            <li>@foo.Name</li>
        }
    </ul>
}

Vue-like (suggested)

<ul @if="bar != null">
    <li @foreach="var foo in bar">@foo.Name</li>
</ul>

[awulkan]

Definitely would love to see this happen. It makes the code a bit more compact, which can be very helpful when you're working with complex UI.

[kaagati]

I genuenly want this to be implemented, taghelper as in asp.net would be cool too.

[daveaglick]

This change, if it's implemented, should probably happen to Razor directly and not just Blazor. That said, I enthusiastically +1 this - I've been using a lot of Vue lately and every time I come back to Razor I really miss this style of in-element directives. It would be a great Razor enhancement.

[syedqutub]

According to my knowledge.This is a component based framework.may be foreach,if etc component would be developed in future.

[RyoukoKonpaku]

That's a major change to Razor you're asking overall since that's what Blazor is based on. I'd say it's a lot of work to make that rather than use what Razor already has to offer.

I'd rather let the Blazor team focus on feature parity with other existing SPA JS frameworks for now before delving into that.

[sanny-io]

I really don't like that syntax. It's code disguised as an attribute.

[Andrzej-W]

I have to admit that Vue's syntax is shorter but is harder for people to follow visually. In Razor we clearly see indentations and we immediately know what part is rendered conditionally or in the loop. I 100% agree with @RyoukoKonpaku and @sannysc . Also try to create a little more real life example where you have a lot of attributes in each HTML element (classes, aria-, data-, etc.) and it will be immediately visible that code hidden in HTML elements is very hard to find, read, and follow.

[awulkan]

But they are aready planning on adding code inside of the tags. Blazor's bind directive is inside a tag for example. What's the difference between that and an if statement in terms of readability?

Anyway, even if it gets added or not, I think you are exaggerating this a bit. Vue is one of the most popular frameworks and I've never heard anyone complain about it there.

[andoband]

I wouldn't consider it more "code disguised as an attribute" than tag helpers in Razor or even Blazor parameters (especially event parameters like onclick that are handled by C# code). So I think there's some precedence for this style.

But I admit it's just a stylistic preference. To me, Vue's syntax is easier to read. I've been using it for years and have grown to appreciate it. But I wouldn't say it's technically better than the current style.

I guess I'm not thinking we'd replace @if or @for but provide for an additional, declarative style.
Maybe there is/could be an easy way that folks like me could define directives that would achieve the desire behavior?

[SteveSandersonMS]

Thanks for the suggestions.

Since this is about core Razor syntax, would you mind filing it at https://github.com/aspnet/razor? That's where decisions are made about Razor itself.