title: How to populate a Table in View with Json results on click of button MVC
body: <p>I have an HTML form with a dropdown, two text boxes and a cancel, submit buttons. During the page load i am loading the dropdown with values from external source. When clicking of the Submit button, i am making a service call and get result as JSON and that data is used to populate the table. Now the table is a static one. Soon the table structure will change and contents of it including the text has to be dynamically populated. This should happen on the submit button click. How do i achieve this?</p>
  
  <pre><code>@model UI.ViewModels.CViewModel
  &lt;div id="mainDiv"&gt;
       @using (Html.BeginForm("Submit","Test",FormMethod.Post))
       {
      &lt;div id="entryDiv"&gt;
              &lt;table id="entryTable"&gt; 
          &lt;tr&gt;
                      &lt;td class="tdDescription"&gt;Select an  Plan &lt;/td&gt;
                      &lt;td class="tdAmount" id="tdPlan"&gt;
                          @Html.DropDownListFor(c =&gt; Model.SelectedPlan, Model.InstallmentPlans, new { @class = "ddlPlanType", @id = "InstallmentPlans" })&lt;br /&gt;
               &lt;div id="divSelectPlan" class="errorText hideElement"&gt;Please select a plan&lt;/div&gt;
              &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
              &lt;td class="tdDescription"&gt;Enter an Item Price &lt;/td&gt;
                      &lt;td class="tdAmount" id="tdItemPrice"&gt;&lt;span&gt;$ &lt;/span&gt;
              @Html.TextBoxFor(model =&gt; model.ItemPrice, new { @class = "tdText", required = "required" })&lt;br /&gt;
              &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="tdDescription"&gt;Enter a Payment &lt;/td&gt;
                      &lt;td class="tdAmount" id="tdPayment"&gt;&lt;span&gt;$ &lt;/span&gt;
                          @Html.TextBoxFor(model =&gt; model.Payment, new { @class = "tdText", required = "required" })&lt;br /&gt;
              &lt;/td&gt;
                  &lt;/tr&gt;           
              &lt;/table&gt;
         &lt;div id="submitDiv"&gt;
              &lt;a href="@Url.Action("Index", "DPPC")"&gt;&lt;span&gt;&lt;span id="spanClear" class="spanButton"&gt;Clear&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;input type="submit" id="spanSubmit" value="Submit" class="spanSubmitButton" /&gt;
         &lt;/div&gt;          
       &lt;/div&gt;
       &lt;div id="ResultsDivWrapper" class="hideElement"&gt;
              &lt;div id="resultsDiv"&gt;&lt;span id="spnReturnedType"&gt;&lt;/span&gt; Plan
                  &lt;table id="tblResults"&gt;
                      &lt;tr&gt;
                          &lt;td id="tdResultData1"&gt;Test Price&lt;/td&gt;
                          &lt;td id="tdResultTestPrice"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td id="tdResultDP"&gt;DP&lt;/td&gt;
                          &lt;td id="tdResultDPS"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td id="tdResultFM"&gt;FM&lt;/td&gt;
                          &lt;td id="tdResultFMS"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td id="tdResultMP"&gt;MP&lt;/td&gt;
                          &lt;td id="tdResultMPS"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td id="tdResultFirstPayment"&gt;FP&lt;/td&gt;
                          &lt;td id="tdResultFPS"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td id="tdResultDD"&gt;DD&lt;/td&gt;
                          &lt;td id="tdResultDDS"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>script call</p>
  
  <pre><code>$("#spanSubmit").click(function () {
  
          var model = {
              Plans: '',
              SelectedPlan: seleted,
              EPrice: $("#ItemPrice").val(),
              DownPayment: $("#Payment").val()
          };
          Process("/DPPC/Submit", "POST", JSON.stringify(model), "json", "application/json;charset=utf-8", logError, InvokeSuccess);
      }
      return false;
  });
  
  function Process(url,type,data,datatype,contenttype,errorCallback,successCallback) {
      $.ajax({ url: url, type: type, data: data, dataType: datatype, contentType: contenttype, error: errorCallback, success: successCallback, async: true, processData: false });
  }
  
  function InvokeSuccess(result) {
  
      $("#tdResultTestPrice").html("$" + $("#ItemPrice").val());
      $("#tdResultDPS").html("$" + $("#Payment").val());
      $("#tdResultFMS").html("$" + result.FM.toFixed(2));
      $("#tdResultMPS").html("$" + result.MP.toFixed(2));
      $("#tdResultFPS").html("$" + result.FP.toFixed(2));
  
  }
  
  public class PPCResponse
      {
          public double FM { get; set; }
          public double MP { get; set; }
          public double FP{ get; set; }
          public double DD { get; set; }
      ..............
      }
  
  [HttpPost]
          public ActionResult SubmitCViewModel cModel)
          {
              try
              {
                  PPCResponse response = cRepository.GetInstallmentDetails(cModel.SelectedPlan,cModel.ItemPrice,cModel.DP);
                  return Json(response, JsonRequestBehavior.DenyGet);
              }
              catch (Exception ex)
              {
                  int errorCode = LogUtility.ErrorLogCustom(ex.ToString());
                  Response.StatusCode = 500;
                  return Json(new { Error = errorCode.ToString() });
              }
          }
  </code></pre>
  
  <p>Now content of the table has to be generated dynamically. I have to change my PPCResponse to have some Dictionary and bind result back to the table. Problem is how do create the table rows runtime and bind the records?</p>
  
  <p>Tutu</p>