Tag helpers

[dharmatech]

In a previous post, I mentioned MvcMovieGiraffe.

Here's a usage of the input tag helper from the C# version of that project:

<input asp-for="Title" class="form-control" />

It references the following member of the model:

[StringLength(60, MinimumLength = 3), Required]
public string Title { get; set; }

If you look at source of the resulting page, that tag helper expands into:

<input 
    class="form-control" 
    type="text" 
    data-val="true" 
    data-val-length="The field Title must be a string with a minimum length of 3 and a maximum length of 60." 
    data-val-length-max="60" 
    data-val-length-min="3" 
    data-val-required="The Title field is required." 
    id="Title" 
    maxlength="60" 
    name="Title" 
    value="" />

Is there something like tag helpers for Giraffe? Either built-in or available as a library?

I messed around with putting together something like a tag helper (source). Example call:

input_helper typedefof<Movie> "Title" "" "Title" [ _class "form-control" ]

That expands into:

<input class="form-control" type="text" data-val="true" data-val-length-max="60" id="Title" name="Title" value="">

Thanks for any suggestions!

[dustinmoris]

Giraffe doesn't have something like tag helpers at the moment and I don't know of any project which adds that functionality to Giraffe, but it's certainly something which is possible. It would have to use reflection, but it shouldn't be too difficult for a function to accept a a model and the name of property and then do the magic. The only issue I think we won't get away (even with F# trickery) is the fact that one has to pass the name of the property as a "magic" string into such a function, but given that this is what the C# tag helper is doing as well the F# version wouldn't be any less good.

[baronfel]

Well yes, in that case I'd expect you to use something like Unchecked.defaultof<Movie>.Title in that case to get a property accessor expression that would work for you. What the aspnetcore tag helpers do is effectively that, but they rewrite the property accessors into generator functions, and then fill in the model at runtime and run them against a specific instance. You could do something similar as well.

Here's an example of what the 'staged' version of what I did before might look like:

[<RequireQualifiedAccess>]
type Input =
    static member Delayed([<ReflectedDefinition>] expr: Expr<'t -> 'a>, ?attrs: XmlAttribute list) = 
        let rec getProp e = 
            match e with
            /// since we're only caring about properties on records, we can just pull out the relevant data
            | PropertyGet (_, propInfo, _) ->
                Some(propInfo)
            | Lambda (var, expr) -> (|PropInfo|_|) expr
            | _ ->
                None
        let attrs = defaultArg attrs []
        match getProp expr with
        | Some prop ->
            let staticParts = [prop.Name; prop.PropertyType.Name] @ attrs
            fun (obj: 't) -> [prop.GetValue(obj) |> string ] @ staticParts
        | _ -> fun (obj: 't) -> ["got nothin'"] @ attrs

    
let cachedForm = Input.Delayed((fun (f: Foo) -> f.Name))

let result1 = cachedForm ({ Name = "chet" })

I encourage you to play around with the Expr modules and namespaces, there's really a lot of nice metaprogramming stuff in there!

[dharmatech]

@baronfel,

Wow... that's awesome. 🙂

I didn't know about Unchecked.defaultof<...>.

The following based on your suggestion:

MvcMovieGiraffe.TagHelpers.Input.Of(Unchecked.defaultof<Movie>.Title, [])

works fine!

Thanks again!

[dharmatech]

OK, I've updated the code to use the expression-based tag helpers.

From the edit view in the original project:

<div class="form-group">
    <label asp-for="Title" class="control-label"></label>
    <input asp-for="Title" class="form-control" />
    <span asp-validation-for="Title" class="text-danger"></span>
</div>

The equivalent code in the F# version:

div [ _class "form-group" ] [
    TagHelpers.Label.Of(model.Title, [ _class "control-label" ])

    TagHelpers.Input.Of(model.Title, [ _class "form-control" ])

    TagHelpers.SpanValidation.Of(model.Title, [ _class "text-danger" ])
]

Thanks to @baronfel for his help 🙂

[dharmatech]

@baronfel wrote:

Here's an example of what the 'staged' version of what I did before might look like

For anyone who's curious about that technique, here's a short program based on @baronfel's example:

open FSharp.Quotations
open FSharp.Quotations.Patterns

type Foo = { Name: string }

type XmlAttribute = string

let (|PropInfo|_|) (e : Expr) =
    match e with
    | Patterns.PropertyGet (obj_instance, prop_info, _body_expressions) ->
        let getter =
            match obj_instance with
            | None                                -> fun () -> prop_info.GetValue(null)
            | Some (ValueWithName(v, _ty, _name)) -> fun () -> prop_info.GetValue(v)
            | _                                   -> fun () -> box null

        Some(prop_info)

    | _ -> None
 
[<RequireQualifiedAccess>]
type Input =
    static member Delayed([<ReflectedDefinition>] expr: Expr<'t -> 'a>, ?attrs: XmlAttribute list) = 
        let rec getProp e = 
            match e with
            | PropertyGet (_, propInfo, _) -> Some(propInfo)
            | Lambda (var, expr) ->  (|PropInfo|_|) expr
            | _ ->
                None
        let attrs = defaultArg attrs []
        match getProp expr with
        | Some prop ->
            let staticParts = [prop.Name; prop.PropertyType.Name] @ attrs
            fun (obj: 't) -> [prop.GetValue(obj) |> string ] @ staticParts
        | _ -> fun (obj: 't) -> ["no property"] @ attrs
    
let cachedForm = Input.Delayed((fun (f: Foo) -> f.Name))

let result1 = cachedForm ({ Name = "chet" })

printfn "%A" result1

[dharmatech]

@baronfel wrote:

What the aspnetcore tag helpers do is effectively that, but they rewrite the property accessors into generator functions, and then fill in the model at runtime and run them against a specific instance. You could do something similar as well.

Here's an example of what the 'staged' version of what I did before might look like:
...

So that's a pretty cool technique. As I mentioned in my last post, I did get it to run.

What I'm wondering is, how do you envision something like this being used by the tag-helpers? Here's what some calls to the tag helpers look like right now:

div [ _class "form-group" ] [
    TagHelpers.Label.Of(model.Title, [ _class "control-label" ])

    TagHelpers.Input.Of(model.Title, [ _class "form-control" ])

    TagHelpers.SpanValidation.Of(model.Title, [ _class "text-danger" ])
]

How would that change given this new technique?

[dharmatech]

The source for the tag helpers that are built-in to ASP.NET Core:

https://github.com/dotnet/aspnetcore/tree/master/src/Mvc/Mvc.TagHelpers/src

It would be nice if we could use those from F#. :-)

Asking in aspnetcore regarding the programmatic use of the existing tag helpers:

dotnet/aspnetcore#28648