0

我正在尝试jsonform在我的 ASP.NET Core 应用程序中使用。它工作得很好。我不明白为什么我有这个错误

未捕获的错误:JSONForm 包含类型未知的元素:formTree.buildFromLayout (jsonform.js:3300) 处的“VerticalLayout”

在此处输入图像描述

@{
    ViewData["Title"] = "Home Page";
}

<div id="test3"></div>

@section Scripts {
    <script src="~/lib/underscore.js/underscore.js"></script>
    <script src="~/lib/jsonform/jsonform.js"></script>
    <script type="text/javascript">
        $('#test3').jsonForm({
            "schema": {
                "type": "object",
                "properties": {
                    "name": {
                        "type": "string"
                    },
                    "dead": {
                        "type": "boolean"
                    },
                    "kindOfDead": {
                        "type": "string",
                        "enum": [
                            "Zombie",
                            "Vampire",
                            "Ghoul"
                        ]
                    },
                    "vegetables": {
                        "type": "boolean"
                    },
                    "kindOfVegetables": {
                        "type": "string",
                        "enum": [
                            "All",
                            "Some",
                            "Only potatoes"
                        ]
                    }
                }
            },
            "form": [
                {
                    "type": "VerticalLayout",
                    "elements": [
                        {
                            "type": "Control",
                            "label": "Name",
                            "scope": "#/properties/name"
                        },
                        {
                            "type": "Group",
                            "elements": [
                                {
                                    "type": "Control",
                                    "label": "Is Dead?",
                                    "scope": "#/properties/dead"
                                },
                                {
                                    "type": "Control",
                                    "label": "Kind of dead",
                                    "scope": "#/properties/kindOfDead",
                                    "rule": {
                                        "effect": "ENABLE",
                                        "condition": {
                                            "scope": "#/properties/dead",
                                            "schema": {
                                                "const": true
                                            }
                                        }
                                    }
                                }
                            ]
                        },
                        {
                            "type": "Group",
                            "elements": [
                                {
                                    "type": "Control",
                                    "label": "Eats vegetables?",
                                    "scope": "#/properties/vegetables"
                                },
                                {
                                    "type": "Control",
                                    "label": "Kind of vegetables",
                                    "scope": "#/properties/kindOfVegetables",
                                    "rule": {
                                        "effect": "HIDE",
                                        "condition": {
                                            "scope": "#/properties/vegetables",
                                            "schema": {
                                                "const": false
                                            }
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        });
    </script>
}

此外,如果我按下按钮提交表单,验证似乎不起作用。我希望在ProjectTitle字段上看到一个弹出窗口。

4

1 回答 1

0

配置jsonForm时,改为formelements修改后代码如下:

        $('#test').jsonForm({
            "schema": {
                "type": "object",
                "properties": {
                    "name": {
                        "type": "string"
                    },
                    "dead": {
                        "type": "boolean"
                    },
                    "kindOfDead": {
                        "type": "string",
                        "enum": [
                            "Zombie",
                            "Vampire",
                            "Ghoul"
                        ]
                    },
                    "vegetables": {
                        "type": "boolean"
                    },
                    "kindOfVegetables": {
                        "type": "string",
                        "enum": [
                            "All",
                            "Some",
                            "Only potatoes"
                        ]
                    }
                }
            },
            "elements": [
                {
                    "type": "VerticalLayout",
                    "elements": [
                        {
                            "type": "Control",
                            "label": "Name",
                            "scope": "#/properties/name"
                        },
                        {
                            "type": "Group",
                            "elements": [
                                {
                                    "type": "Control",
                                    "label": "Is Dead?",
                                    "scope": "#/properties/dead"
                                },
                                {
                                    "type": "Control",
                                    "label": "Kind of dead",
                                    "scope": "#/properties/kindOfDead",
                                    "rule": {
                                        "effect": "ENABLE",
                                        "condition": {
                                            "scope": "#/properties/dead",
                                            "schema": {
                                                "const": true
                                            }
                                        }
                                    }
                                }
                            ]
                        },
                        {
                            "type": "Group",
                            "elements": [
                                {
                                    "type": "Control",
                                    "label": "Eats vegetables?",
                                    "scope": "#/properties/vegetables"
                                },
                                {
                                    "type": "Control",
                                    "label": "Kind of vegetables",
                                    "scope": "#/properties/kindOfVegetables",
                                    "rule": {
                                        "effect": "HIDE",
                                        "condition": {
                                            "scope": "#/properties/vegetables",
                                            "schema": {
                                                "const": false
                                            }
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        });

如果要提交表单,请尝试将标签更改<div><form>标签。

 <form id="test"></form>

然后,使用上面的 JQuery 脚本填充内容,结果如下:

在此处输入图像描述

于 2020-12-16T09:18:36.233 回答