Websharper, Sitelets and Forms - html

Question

I've been trying to create a form using Websharper to collect user input. So far I've identified three actions for my site:
type MyAction =
| [<CompiledName "">] Index
| [<Method "POST">] GetUser of username : string
| Stats of username: string
Using Sitelet.Infer I've managed to implement basic UI, but I have no idea how to refer to the content of my input box (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)] }
I noticed usernameInput doesn't have any field like "Value" or so and I guess either it needs casting or I'm doing something wrong.
I would prefer not to use JavaScript in my code (Is it possible to mix Html.Server and Html.Client Elements in a Sitelet at all ?).

Answer 1

Form POST data is not passed via the URL, so you cannot pass it with ctx.Link. It is automatically passed via the request body, with a format similar to GET query arguments (for example in your case, username=myusername). This is currently not parsed by Sitelet.Infer, although we will probably add it in the future. For now you can use an action without arguments and then extract the data from the request:
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
| // ...