title: Model binding to a custom component - Asp.net Mvc
body: <p>I found a great json editor that you can download from <a href="https://github.com/josdejong/jsoneditor/" rel="nofollow">here</a> and you can see it in action from <a href="http://jsoneditoronline.org/" rel="nofollow">here</a>.</p>
  
  <p>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.</p>
  
  <p>Here is my sample code for model and controller:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>And here is the code for my view:</p>
  
  <pre><code>@model WebApplication2.Models.TestModel
  
  &lt;br /&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
               Name
          &lt;/td&gt;
          &lt;td&gt;
               @Html.EditorFor(model =&gt; model.Name, new { htmlAttributes = new { @class = "form-control" } })
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
               Json
          &lt;/td&gt;
          &lt;td&gt;
               &lt;div id="jsoneditor" style="width:500px;height:500px"&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;script&gt;
  // 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));
  //};
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks in advance,</p>