You can’t easily pass the collection from razor view to a jquery function. To do that you need to encode the list, then store the value as raw html using  @Html.Raw(). And pass the collection to the function as a string. From inside the jquery function, you need to parse that by JSON.parse().

Coding sample is here

Steps to pass collection from razor view to jquery function:

  1. Let your list persons at razor view
  2. Convert that by the code ‘@Html.Raw(Json.Encode(Model))’ and store to model variable. ‘(single quote) is used to keep as a string.
  3. Pass to jquery function init(model);
  4. Inside init function parse json from string  JSON.parse(model); and keep to variable persons.
  5. Now you that as you need.

 

Let see an example.

Person DTO to pass data from server to client.

Code to generate person list at the server. Here I use simple data without fetching it from the database.

Pass person list from the controller action to view.

 

View code for the index, which will show the person list in a table view. I am using here Data Table jquery plugin to generate the table. Also used some bootstrap classes.

Check the 2 lines code. Those are actually converting the list to a json string.

 

Code to parse the string data to JSON. And generate the table.

 


Leave a Reply

Your email address will not be published. Required fields are marked *