Question

我找到了一个很棒的json编辑器，你可以从here下载，你可以从here看到它。

我想在我的asp.net mvc应用程序中使用它，但我无法弄清楚如何将数据绑定到组件。

以下是模型和控制器的示例代码：

public class TestModel
{
    public string Name { get; set; }

    public string Json { get; set; }
}

public ActionResult Index()
{
    TestModel testModel = new TestModel() { Name = "Test", Json = "{ test: 1 }" };

    return View(testModel);
}

以下是我的观点代码：

@model WebApplication2.Models.TestModel

<br />
<table>
    <tr>
        <td>
             Name
        </td>
        <td>
             @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
        </td>
    </tr>
    <tr>
        <td>
             Json
        </td>
        <td>
             <div id="jsoneditor" style="width:500px;height:500px"></div>
        </td>
    </tr>
</table>
<script>
// create the editor
var container = document.getElementById('jsoneditor');
var editor = new JSONEditor(container);

//// set json
//document.getElementById('setJSON').onclick = function () {
//    var json = {
//        'array': [1, 2, 3],
//        'boolean': true,
//        'null': null,
//        'number': 123,
//        'object': { 'a': 'b', 'c': 'd' },
//        'string': 'Hello World'
//    };
//    editor.set(json);
//};

//// get json
//document.getElementById('getJSON').onclick = function () {
//    var json = editor.get();
//    alert(JSON.stringify(json, null, 2));
//};

</script>

提前致谢，

Answer 1

我认为你必须使用hidden field。将隐藏字段添加到模型中将您的JSON保存到该隐藏字段，并在$(document).ready()

中设置

执行以下操作：

添加隐藏

@Html.HiddenFor(model => model.Json, new { id = "hdnJSONField" })

2.添加以下JavaScript

<script>   
 $(document).ready(function () {
  // create the editor
  var container = document.getElementById('jsoneditor');
  var editor = new JSONEditor(container);    
  editor.set($('#hdnJSONField').val());
});

Answer 2

您甚至不需要使用隐藏字段或类似的东西。这也可以：

动作：

public ActionResult Index()
{
  ViewBag.json = "{ test : 1 }";
  return View();
}

查看：

<body>
    <div>        
        <div id="jsoneditor" style="width: 400px; height: 400px;"></div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {            
            var container = document.getElementById("jsoneditor");
            var options = {
                mode: 'tree'
            };
            var editor = new JSONEditor(container, options);
            var json = @ViewBag.json;
            editor.set(json);
        });
    </script>
</body>

https://github.com/josdejong/jsoneditor/blob/master/docs/usage.md

模型绑定到自定义组件 - Asp.net Mvc

2 个答案: