1

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?

Improve this question

3 Answers 3

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I am getting an error: The name 'Json' does not exist in the current context. When i used var data = '<%= Json(Model.PayHistory) %>'; Do i need to add any reference here?
It looks like you will have to move this Json call to the controller. It's not allowed to be used in the view due to its protection level. I updated my answer to reflect that.
+1, you could also try var data = <%= Model.JsonPayHistory %>; and skip the eval.
it says, "The name 'Json' does not exist in the current context". I have also tried with ViewData as ViewData["PayHistory"] = Json(customer.PayHistory); But it returns the type only in jquery assignment.
referred the answers from @EndangeredMassa and @takepara to get the desired result.
|
2 
var data= <%= new JavaScriptSerializer().Serialize(Model.PayHistory) %>;
Improve this answer

2 Comments

is there any easiest jquery option to read serialized object? I need to bind the values to a div by reading the json..
Got the answer.. var data= <%= new JavaScriptSerializer().Serialize(Model.PayHistory) %>; var payhistory = eval(data);
0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.