How do I pass multiple objects from a ViewModel to a jQuery function?

Question

I am coding a MVC 5 internet application and would like to know how to pass values from a ViewModel into a jQuery function where I have a list of data to pass.

Usually, I would create a hidden field in the MVC View code, and then retrieve this value in the jQuery code. However, in this situation, there is not just one value from the ViewModel, but a List of objects, where each object has many values.

My ViewModel has a List<MapMarker>, where each MapMarker has the following attributes:

latitude
longitude
title
draggable

This is the jQuery function that I need to call for each MapMarker object:

function LoadMapMarker(latitude, longitude, title, draggable)

How can I call the LoadMapMarker function, with data from each of the MapMarker objects in the ViewModel list?

Thanks in advance

You can add class to your main "div" , and do something like : $(".YourClass").each(function (....)) — Ziv Weissman, May 25 '15 at 08:04
@Daniel, using AJAX is a good option to retrieve data from services or action result that works like a service (eg: returns JSON instead of View). If there is a view for the action result, this is possible in razor and no need for AJAX request to retrieve the data — Kira, May 25 '15 at 09:34

score 0 · Answer 1 · answered May 25 '15 at 08:20

0

You can serialize to JSON and then store in a hidden field, or as a Javascript object like :

myJsonData= [{"id":"15aea3fa","firstname":"John","lastname":"Doe"}];

Alternatively, you can retrieve the data via an ajax call.

answered May 25 '15 at 08:20

robasta

4,621
5
35
53

Ilya Sulimanov · Accepted Answer · 2015-05-26T11:08:49.000

You can serialize your list and storage it in a hidden field. Then call LoadMapMarker by means of Javascript on client side.

Server:

    using System.Web.Script.Serialization; 
    var MapMarkers = new List<MapMarker>();
    var jsonSerialiser = new JavaScriptSerializer();
    var json = jsonSerialiser.Serialize(MapMarkers);
    return View(new MyViewModel({JsonList = json }));

View:

<input type="hidden" id= "MyHiddenFieldForMapMarker" value="@Model.JsonList" >

Client:

var MapMarkers = $("#MyHiddenFieldForMapMarker").val();
for (var MapMarker in MapMarkers) {
   LoadMapMarker(MapMarker["latitude"],
                 MapMarker["longitude"],
                 MapMarker["title"],
                 MapMarker["draggable"]);

}

Kira · Answer 3 · 2015-05-25T09:46:42.500

If your jQuery function is present in a view, use @Html.Raw(Json.Encode(Model.JSonData)) like this

//JavaScript or jQuery function
function javascriptFunction()
{
    var data = @Html.Raw(Json.Encode(Model.JSonData))
}

In the above code, JSonData is the name of the collection variable that contains data from model. In your case a List.

If your jQuery function is in a separate JavaScript file, then an AJAX request can be used to get the data from model

Controller Code

public ActionResult GetData()
{
    //Your logic to get data from model
    //Here data is the variable that holds the collection List<MapMarker>
    return Json(data);
}

JavaScript Code for AJAX Request

function myJavaScriptFunction()
{
     $.ajax({
        url: '/GetData',
        type: 'post',
        success: function (data) {
            alert("data retrieved successfully");
        },

        error: function () {
            alert("Error retrieving data");
        }
     });
}

score 0 · Answer 4 · answered May 25 '15 at 08:40

If you don't want to use JSON and use the data you have on your page you can do this:

You can add class (or some other attribute, for me it is easier to use classes, but it is better "programming" to use another attribute)

@foreach ()... 
{
   <div class="main_Marker">
     <input ... class="lat"/>  //using the @Model render ofc...
     <input ... class="long"/>
   </div>
}

Then jQuery:

$("main_Marker").each(function(index, item)) {
   var lat = $(item).child(".lat");
   .
   .
   LoadMapMarker(lat, long....);
}

How do I pass multiple objects from a ViewModel to a jQuery function?

4 Answers4