CODEWITHSUNDEEP
jqueryasp.net-mvc
Prasad
Prasad

Reputation: 59541

Access Model object in jQuery

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?

Upvotes: 1

Views: 18691

Answers (3)

mare
mare

Reputation: 13083

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

Upvotes: 0

EndangeredMassa
EndangeredMassa

Reputation: 17528

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); // usually a bad idea

or

data = JSON.parse(data); // may require a library if browser doesn't support it

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.

Upvotes: 5

takepara
takepara

Reputation: 10433

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

Upvotes: 2

Related Questions