access Model object in jquery

Question

I have a Model Customers, in which i have a list property PayHistory. I need to bind the table with the PayHistory object using jquery in my ASP.NET MVC (C#) application.

I am binding the table using jquery as:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="PaidDate">
            </div>
        </td>
        <td>
            <div id="PaidAmt">
            </div>
        </td>
    </tr>
</table>

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
      //Initialize the dynamic Value;
      _dynId = 1;
      var data= '<%= Model.PayHistory %>';
       if (data != null) {
            for (i in data) {
                var pay= data[i];
                $('#PaidDate').append('<div id="PaidDate' + _dynId  + '" style="height:20px;padding-left:10px;">' + '<label>' + pay.paidDate+ '</label>');
                $('#PaidAmt').append('<div id="PaidAmt' + _dynId  + '" style="height:20px;padding-left:10px;">' + '<label>' + pay.PaidAmount + '</label>');
                _dynId   += 1;
            }
        }
    });
</script>

In the above html, I am trying to access the list object PayHistory in jQuery, but it gives the type of the object.

How can I access the object in jQuery to bind the table as in the html given above?

Answer 1

You have to do a bit more work to get the data into a form that JavaScript can understand. The easiest way is to encode the data in the object as a JSON string, then emit that to the data variable instead.

You can do this manually (by creating a method of the class that does this) or since you are using ASP.NET MVC you can use the Json method. However, this will have to be done in the Controller instead of the View. So, I would add it to your Model object or in the generic View Data. It can probably exist as a property of the Model object that just calls the Json method on the original value and returns it.

C#

public string JsonPayHistory
{
    get 
    {
        return Json(PayHistory);
    }
}

JS

var data = '<%= Model.JsonPayHistory %>';

You will want to take a look at the string that is returned. It will be in the JSON format and will have to be evaluated. You can do this by adding:

data = eval(data);

This uses the eval function to build the JavaScript object. Now, you should have an object that is similar to your C# object. You can loop over it and reference properties by name. If you provide the basic structure of your PayHistory object, I can give better examples.

Answer 2

Use Json.NET for various conversions between .NET objects and classes and JSON.

http://james.newtonking.com/projects/json-net.aspx

Answer 3

var data= <%= new JavaScriptSerializer().Serialize(Model.PayHistory) %>;