代码之家  ›  专栏  ›  技术社区  ›  Enrico

带引导的jsonforms:VerticalLayout丢失

  •  0
  • Enrico  · 技术社区  · 4 年前

    jsonform 在我的ASP.NET核心应用程序。它工作得很好。我不明白为什么我会有这个错误

    未捕获错误:JSONForm包含类型未知的元素:“VerticalLayout”

    enter image description here

    @{
        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>
    }
    

    另外,如果我按下按钮提交表单,验证似乎不起作用。我本想在屏幕上看到一个弹出窗口 项目名称 现场。

    0 回复  |  直到 4 年前
        1
  •  0
  •   Zhi Lv    4 年前

    配置jsonForm时,更改 form elements ,修改后代码如下:

            $('#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脚本填充内容,结果如下:

    enter image description here