Question

我必须创建具有多个表单的简单页面。我决定为此目的使用Suave.Experimental。当我点击第二个表单上的submit按钮时，出现以下错误

缺少表单字段＆＃39; Second＆＃39;

的WebPart

let webpart =
    choose [
        GET >=> OK page
        POST >=> bindToForm firstForm firstHandle
        POST >=> bindToForm secondForm secondHandle
    ]

是否可以在Suave.Experimental中使用多种形式？

如果是的话 - 我在这里失踪了什么？

如果没有 - 采取什么措施呢？

最小的例子如下：

open Suave.Form
open Suave.Html

type FirstForm = { First : string }
type SecondForm = { Second : decimal }

let firstForm : Form<FirstForm> = 
    Form ([ TextProp ((fun f -> <@ f.First @>), [ ])],[])

let secondForm : Form<SecondForm> = 
    Form ([ DecimalProp ((fun f -> <@ f.Second @>), [])], [])

type Field<'a> = {
    Label : string
    Html : Form<'a> -> Suave.Html.Node
}

type Fieldset<'a> = {
    Legend : string
    Fields : Field<'a> list
}

type FormLayout<'a> = {
    Fieldsets : Fieldset<'a> list
    SubmitText : string
    Form : Form<'a>
}

let form x = tag "form" ["method", "POST"] x
let submitInput value = input ["type", "submit"; "value", value]

let renderForm (layout : FormLayout<_>) =    
    form [
        for set in layout.Fieldsets -> 
            tag "fieldset" [] [
                yield tag "legend" [] [Text set.Legend]

                for field in set.Fields do
                    yield div ["class", "editor-label"] [
                        Text field.Label
                    ]
                    yield div ["class", "editor-field"] [
                        field.Html layout.Form
                    ]
            ]

        yield submitInput layout.SubmitText
    ]

open Suave
open Suave.Filters
open Suave.Operators
open Suave.Successful
open Suave.Web

open Suave.Model.Binding
open Suave.RequestErrors

let bindToForm form handler = 
    bindReq (bindForm form) handler BAD_REQUEST

let firstHandle first = 
    printfn "first = %A" first
    Redirection.FOUND "/"

let secondHandle second = 
    printfn "second = %A" second
    Redirection.FOUND "/"

let page = 
    html [] [
        head [] [ ]
        body [] [
            div [][
                renderForm
                    { Form = firstForm
                      Fieldsets = 
                        [ { Legend = "1"
                            Fields = 
                              [ { Label = "Text"
                                  Html = Form.input (fun f -> <@ f.First @>) []  }
                                  ] }]
                      SubmitText = "Submit" }

                renderForm
                    { Form = secondForm
                      Fieldsets = 
                        [ { Legend = "2"
                            Fields = 
                              [ { Label = "Decimal"
                                  Html = Form.input (fun f -> <@ f.Second @>) [] }
                                  ] }]
                      SubmitText = "Submit" }
            ]
        ]
    ]
    |> htmlToString

let webpart =
    choose [
        GET >=> OK page
        POST >=> bindToForm firstForm firstHandle
        POST >=> bindToForm secondForm secondHandle
    ]

startWebServer defaultConfig webpart

Answer 1

您正在路由相同的路线＆＃39; POST /＆＃39;两个表单处理程序。每个应该只有一个路由，否则只会执行其中一个路由。

您可以为每个表单设置不同的表单操作，并相应地为这些表单创建路径。

我很快对您的代码进行了这些更改，现在应该可以使用了：

open Suave.Form
open Suave.Html

type FirstForm = { First : string }
type SecondForm = { Second : decimal }

let firstForm : Form<FirstForm> = 
    Form ([ TextProp ((fun f -> <@ f.First @>), [ ])],[])

let secondForm : Form<SecondForm> = 
    Form ([ DecimalProp ((fun f -> <@ f.Second @>), [])], [])

type Field<'a> = {
    Label : string
    Html : Form<'a> -> Suave.Html.Node
}

type Fieldset<'a> = {
    Legend : string
    Fields : Field<'a> list
}

type FormLayout<'a> = {
    Fieldsets : Fieldset<'a> list
    SubmitText : string
    Form : Form<'a>
}

let form action x = tag "form" ["method", "POST"; "action", action] x
let submitInput value = input ["type", "submit"; "value", value]

let renderForm action (layout : FormLayout<_>) =    
    form action [
        for set in layout.Fieldsets -> 
            tag "fieldset" [] [
                yield tag "legend" [] [Text set.Legend]

                for field in set.Fields do
                    yield div ["class", "editor-label"] [
                        Text field.Label
                    ]
                    yield div ["class", "editor-field"] [
                        field.Html layout.Form
                    ]
            ]

        yield submitInput layout.SubmitText
    ]

open Suave
open Suave.Filters
open Suave.Operators
open Suave.Successful
open Suave.Web

open Suave.Model.Binding
open Suave.RequestErrors

let bindToForm form handler = 
    bindReq (bindForm form) handler BAD_REQUEST

let firstHandle first = 
    printfn "first = %A" first
    Redirection.FOUND "/"

let secondHandle second = 
    printfn "second = %A" second
    Redirection.FOUND "/"

let page = 
    html [] [
        head [] [ ]
        body [] [
            div [][
                renderForm "first"
                    { Form = firstForm
                      Fieldsets = 
                        [ { Legend = "1"
                            Fields = 
                              [ { Label = "Text"
                                  Html = Form.input (fun f -> <@ f.First @>) []  }
                                  ] }]
                      SubmitText = "Submit" }

                renderForm "second"
                    { Form = secondForm
                      Fieldsets = 
                        [ { Legend = "2"
                            Fields = 
                              [ { Label = "Decimal"
                                  Html = Form.input (fun f -> <@ f.Second @>) [] }
                                  ] }]
                      SubmitText = "Submit" }
            ]
        ]
    ]
    |> htmlToString

let webpart =
    choose [
        GET >=> OK page
        POST >=> choose 
            [ path "/first" >=> (bindToForm firstForm firstHandle)
              path "/second" >=> (bindToForm secondForm secondHandle) ]
    ]

startWebServer defaultConfig webpart

如何使用Suave.Experimental在单个页面上处理多个表单

1 个答案: