title: Binding JSON Data Back to the MVC View to dynamically insert data to a table
body: <p>I am working on an MVC4 application. In the submit action of the button, i am making a call to a controller action, which will return data back to me as Json. Number of rows in the table is dependent on the number of rows returned by the service. </p>
  
  <p>I have created a new View Model to support this.</p>
  
  <pre><code>public class DataResponse
  {
      public List&lt;ALSResult&gt; Result { get; set; }
      public string ResponseText {get;set;}
  }
  public class ALSResult
  {
      public string Name {get;set;}
      public string DataResult {get;set;}
  }
  </code></pre>
  
  <p>Controller Action</p>
  
  <pre><code>[HttpPost]
  public ActionResult Submit(CViewModel calcModel)
  {
      try
      {
          DataResponse response = cRepository.GetDetails(calcModel.SelectedPlan,calcModel.EquipmentPrice,calcModel.DownPayment);
          return Json(response, JsonRequestBehavior.DenyGet);
      }
  }
  </code></pre>
  
  <p>js file</p>
  
  <pre><code>$("#Submit").click(function () {
      other code here
      Process("/DPPC/Submit", "POST", JSON.stringify(model), "json", "application/json;charset=utf-8", logError, InvokeSuccess);
  }
  
  function InvokeSuccess(result) {
      i will get json result in result filed
  }
  </code></pre>
  
  <p>index.cshtml</p>
  
  <pre><code>&lt;table id="tblResults"&gt;
      &lt;tr&gt;
           &lt;td id="tdResultEt"&gt;&lt;/td&gt;
           &lt;td id="tdResultEtPrice"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
           &lt;td id="tdResultDt"&gt;&lt;/td&gt;
           &lt;td id="tdResultDtPrice"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      more rows depending on the number of items in the JSON response
  &lt;/table&gt;
  </code></pre>
  
  <p>How do i dynamically bind the response from the Service to create rows for the table and bind the results?</p>