Skip to content

Instantly share code, notes, and snippets.

@rynowak
Last active March 10, 2019 15:07
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rynowak/e82159b167a0f211523a0a395ae6939a to your computer and use it in GitHub Desktop.
Save rynowak/e82159b167a0f211523a0a395ae6939a to your computer and use it in GitHub Desktop.

LOL What?

Allows you to write methods that contain mixed HTML and C# in Razor Views (.cshtml) / Razor Components (.razor) files.

This is a primitive for composing Razor code that is very low overhead / low concept. Your code calls your code.

In Views (not components): Can be async, can use tag helpers. In Components (not views): Usage and semantics still need figuring out, but we want to build something like this.

Sample

<h1>Here is some info about people on the team</h1>

@foreach(var person in people)
{
    DisplayPerson(person);
}

@functions {
    void DisplayPerson(Person person)
    {
       @<div>
            <h3>
                @person.Name is @person.Age
            </h3>

            @if (DateTime.Now.DayOfYear == person.Birthday.DayOfYear)
            {
                <h4>Happy Birthday! @person.Name</h4>
            }
        </div>
    }

    Person[] people = new Person[]
    {
        new Person()
        {
            Name = "Ryan",
            Age = 33,
            Birthday = new DateTime(1985, 9, 9),
        },
        new Person()
        {
            Name = "Dan", // Not Dan Roth, some other guy. 
            Age = 53,
            Birthday = new DateTime(1965, 2, 3),
        },
    };

    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public DateTime BirthDay { get; set; }
    }
}

Your feedback

Is this W A V Y ? SPICY? Have you had cases where you wanted this? What would you add/change/remove?

@adrianwright109
Copy link

I get the @ in front of person e.g. @person. and if e.g. @if (... but don't think the one at the start makes sense e.g. @<div>

@HerraHak
Copy link

HerraHak commented Mar 10, 2019

The @ in front of the div is a bit confusing but overall templating html using a method in the @functions that way is good.

@Bartmax
Copy link

Bartmax commented Mar 10, 2019

This:
poke:
It felt that natural to me that you had to call it out explicitly here for me to notice.

Exactly the same feeling.

I understand some can make a mess out of this but that's up to the developer. Totally want to have the option.

The example doesn't help understand why this could be usable

@SoftwareDreamer
Copy link

SoftwareDreamer commented Mar 10, 2019

To make a comparison as someone who went to the "dark side" of pure frontend development (but still doing a lot of C#, just more PAI and no Razor no more) I have to say there is a reason that vue.js is so successful and got traction: the .vue files just click with people. And the .vue files big thing: template markup, then script, then style tag, having everything in one place, making it a real component. Makes it much simpler to read the markup, too .

Sure, that is not the topic here, but just saying that having the option to just put markup in a Razor file at the top and markup-less C# code at the bottom with some binding-magic would solve sooth the "razor is a mess" fraction (I'm partially in), because.. well.. sorry.. having converted old Razor code to a modern frontend framework.. yeah, it's a mess. Or at least it's hard to read without a proper colorization, and often even with one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment