Binding JSON Data Back to the MVC View to dynamically insert data to a table

Question

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.

I have created a new View Model to support this.

public class DataResponse
{
    public List<ALSResult> Result { get; set; }
    public string ResponseText {get;set;}
}
public class ALSResult
{
    public string Name {get;set;}
    public string DataResult {get;set;}
}

Controller Action

[HttpPost]
public ActionResult Submit(CViewModel calcModel)
{
    try
    {
        DataResponse response = cRepository.GetDetails(calcModel.SelectedPlan,calcModel.EquipmentPrice,calcModel.DownPayment);
        return Json(response, JsonRequestBehavior.DenyGet);
    }
}

js file

$("#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
}

index.cshtml

<table id="tblResults">
    <tr>
         <td id="tdResultEt"></td>
         <td id="tdResultEtPrice"></td>
    </tr>
    <tr>
         <td id="tdResultDt"></td>
         <td id="tdResultDtPrice"></td>
    </tr>
    more rows depending on the number of items in the JSON response
</table>

How do i dynamically bind the response from the Service to create rows for the table and bind the results?

when the model from jquery is returned to the controller is the correct data being returned? If so would not the view itself need to iterate over the ALSResult list to generate the table rows? for a related way to do this client side see http://stackoverflow.com/questions/17759253/binding-json-data-to-a-table-in-mvc-4?rq=1 — Mike Beeler, Oct 16 '13 at 15:11
I am getting proper response from the service call and in client getting proper result in JSON. The deal here is how to construct the table dynamically with these rcords — Bheema, Oct 16 '13 at 15:51

score 0 · Answer 1 · answered Oct 16 '13 at 18:35

I don't test it, and it maybe contain syntax errors

function InvokeSuccess(result) {

    var table = $("#tblResults");
    for(var i = 0; i < result.Result.lenght; ++i)
    {
        var item = result.Result[i];
        var newTr = $("<tr>");
        var newTd1 = $("<td>");
        var newTd2 = $("<td>");

        newTd1.text(item.Name);
        newTd2.text(item.DataResult);

        newTr.append(newTd1);
        newTr.append(newTd2);

        table.append(newTr);
    }
}

THanks mohammad. I fixed this issue – Bheema Oct 17 '13 at 18:26 — Bheema, Oct 17 '13 at 18:26

Binding JSON Data Back to the MVC View to dynamically insert data to a table

1 Answers1