2

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

缺少表单字段“第二”

Web 部件

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
4

1 回答 1

0

您正在将相同的路由“POST /”路由到两个表单处理程序。您应该为每条路线只有一条路线，否则只会执行其中一条路线。

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

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

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
于 2018-02-01T20:28:57.840 回答