c# - 从 JSON 文件生成 HTML 视图模板

Question

我的任务是制作将从 JSON 文件生成 HTML 视图的应用程序。

我在这里附上 JSON 文件和 HTML 模板。

管理员将编辑或制作新的 JSON 文件，并基于该 HTML 模板生成。

我可以自由地打开任何框架、库等，比如 Jquery、Razor、C# 等。

这是示例 JSON 文件看起来像..

**

"Screens": [
    {
        "Title": "Personal Information Form",
        "NavName": "Personal",
        "Sections":[
            {
                "layout": "full",
                "type": "HTML_P",
                "text": "Some quick information about yourself:"
            },
            {
                "layout": "two_columns",
                "columns": [
                    {
                        "left_column": [
                            {
                                "type": "input",
                                "label": "First Name",
                                "required": true,
                                "placeholder": "Enter First Name",
                                "name": "fName",
                                "valid-feedback": "Valid.",
                                "invalid-feedback": "Please fill out this field."
                            },
                            {
                                "type": "date",
                                "label": "Birth Date:",
                                "required": true,
                                "placeholder": "Enter Birthdate",
                                "name": "dob",
                                "valid-feedback": "Valid.",
                                "invalid-feedback": "Please fill out this field."
                            },
                            {
                                "type": "checkbox",
                                "label": "Check All That Apply:",
                                "required": false,
                                "placeholder": null,
                                "name": null,
                                "valid-feedback": null,
                                "invalid-feedback": null,
                                "options": [
                                    {"label": "Option 1"},
                                    {"label": "Option 2"},
                                    {"label": "Option 3"}
                                ]
                            }
                        ],
                        "right_column": [
                            {
                                "type": "input",
                                "label": "Last Name",
                                "required": true,
                                "placeholder": "Enter Last Name:",
                                "name": "lName",
                                "valid-feedback": "Valid.",
                                "invalid-feedback": "Please fill out this field."
                            },

**

任何回复都会对我很有帮助。

谢谢

标签： c#htmljqueryjsonangular

Answer 1

看起来角度表对您有用。根据需要从 JSON 中获取数据，根据标题生成页面，即可生成 2 列的表格。

您还需要知道 json 在不同场景中的行为方式。根据条件，您可以基于它创建角度组件。

您需要展示一些作品，以便我们帮助或指导您。