Model binding to a custom component - Asp.net Mvc

Question

I found a great json editor that you can download from here and you can see it in action from here .

I want to use it in my asp.net mvc application but I could not figure out how can I bind data to the component.

Here is my sample code for model and controller:

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);
}

And here is the code for my view:

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

Thanks in advance,

Answer 1

I think you have to use a hidden field . Add hidden field to your model save your JSON to that hidden field, and set in $(document).ready()

Do the followings:

Add a Hidden

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

2.Add the following JavaScript

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

Answer 2

You don't even need to use Hidden fields or anything like that. This will work as well:

Action:

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

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

Model binding to a custom component - Asp.net Mvc

Question

2 answers

solution1
1 ACCPTED 2015-07-23 06:37:24

solution2
1 2015-07-23 06:49:01

Model binding to a custom component - Asp.net Mvc

Question

2 answers

solution1 1 ACCPTED 2015-07-23 06:37:24

solution2 1 2015-07-23 06:49:01

solution1
1 ACCPTED 2015-07-23 06:37:24

solution2
1 2015-07-23 06:49:01