Websharper、Sitelets 和表格

Question

我一直在尝试使用 Websharper 创建一个表单来收集用户输入。到目前为止，我已经为我的网站确定了三个操作：

type MyAction =
    | [<CompiledName "">] Index
    | [<Method "POST">] GetUser of username : string
    | Stats of username: string

使用 Sitelet.Infer 我已经设法实现了基本的 UI，但我不知道如何引用我的输入框 (usernameInput) 的内容：

Sitelet.Infer <| function
    | Index ->
        Content.PageContent <| fun ctx ->
            let usernameInput= Input [Text ""]
            { Page.Default with
                Title = Some "Welcome!"
                Body = 
                    [ 
                        Div [
                            Form
                                [
                                    usernameInput-< [Name "username" ]
                                    Input [Value "Request"] -< [Type "submit" ]

                                ] -< [ Attr.Action (ctx.Link (* GetUser usernameInput.Content *) ); Method "POST" ]
                        ]
                    ]
            }
    | GetUser username ->
        Content.Redirect <| Stats username
    | Stats username ->
        Content.PageContent <| fun ctx ->
            { Page.Default with
                Body = [Text ("Stats for " + username)] }

我注意到 usernameInput 没有任何像 "Value" 这样的字段，我猜它需要转换或者我做错了什么。

我不想在我的代码中使用 JavaScript（是否可以在 Sitelet 中混合使用 Html.Server 和 Html.Client 元素？）。

Answer 1

表单 POST 数据不通过 URL 传递，因此您不能通过 ctx.Link 传递它。它通过请求主体自动传递，格式类似于 GET 查询参数（例如，在您的情况下，username=myusername）。 Sitelet.Infer 目前还没有解析它，尽管我们将来可能会添加它。现在您可以使用不带参数的操作，然后从请求中提取数据：

type MyAction =
    | [<Method "POST">] GetUser
    | // ...

Sitelet.Infer <| function
    | GetUser ->
        Content.CustomContentAsync <| fun ctx ->
            match ctx.Request.Post.["username"] with
            | None -> Content.NotFound
            | Some username -> Content.Redirect <| Stats username
            |> Content.ToResponseAsync ctx
    | // ...

Websharper、Sitelets 和表格

Websharper, Sitelets and Forms

html

forms

f#

websharper