In order to pass a model from the controller action to the view, I included a list of objects and converted it into a JavaScript object to facilitate displaying markers on Google Maps. My goal is to send the selected object (selected marker) back to the controller action when the marker is clicked.
@model List<FleetDesignerMVC.ViewModel.VehicleFullInformations>
<body>
<div style="width:100%; height:650px" id="map"></div>
</body>
<script>
function initMap() {
var initialLatLang = {lat: 36.862499, lng: 10.195556};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: initialLatLang,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//CONVERT CONROLLER MODEL TO JAVASCRIPT OBJECT
var model = @Html.Raw(Json.Encode(Model));
var infowindow = new google.maps.InfoWindow;
//CREATING MARKERS
for (i = 0; i < model.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(model[i].VehicleCurrentPosition.Latitude, model[i].VehicleCurrentPosition.Longitude),
map: map,
icon: model[i].Vehicle.MarkerPicture
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent('<table>'+
'<tbody>'+
'<tr>'+
'<td><img src="' + model[i].Vehicle.VehiclePicture + '" alt="imageed" width="150" height="150" /></td>'+
'<td>'+
'<table>'+
'<tbody>'+
'<tr>'+
'<td><h5>' + model[i].Vehicle.Matricule + '</h5></td>'+
'</tr>'+
'<tr>' +
'<td>Date: ' + new Date(parseInt(model[i].VehicleCurrentPosition.TrackDate.substr(6))).getDate() + '/' + new Date(parseInt(model[i].VehicleCurrentPosition.TrackDate.substr(6))).getMonth() + '/' + new Date(parseInt(model[i].VehicleCurrentPosition.TrackDate.substr(6))).getFullYear() + '</td>' +
'</tr>' +
'<tr><td>Hour: ' + new Date(parseInt(model[i].VehicleCurrentPosition.TrackDate.substr(6))).getHours() + ':' + new Date(parseInt(model[i].VehicleCurrentPosition.TrackDate.substr(6))).getMinutes() + ':' + new Date(parseInt(model[i].VehicleCurrentPosition.TrackDate.substr(6))).getSeconds() + '</td></tr>' +
'<tr>'+
'<td>'+
'<p>Speed: ' + model[i].VehicleCurrentPosition.Speed + ' Km/H</p>'+
'</td>'+
'<tr><td> <button onclick="postData(\'' + model[i]+ '\')">Send</button> <\/td><\/tr>' +
'<\/tbody>'+
'<\/table>'+
'<\/td>'+
'<\/tr>'+
'<\/tbody>'+
'<\/table>');
infowindow.open(map, marker);
}
})(marker, i));
}
}
function postData(model) {
var f = {};
f.type = "POST";
f.url = '@Url.Action("Index", "VehicleDetails")';
f.contentType = "application/json; charset=utf-8";
f.data = JSON.stringify({model});
f.dataType = "json";
f.success = function (response) {
alert("success");
};
f.error = function (response) {
alert("failed");
};
$.ajax(f);
};
</script></pre>
<blockquote>
<p>This is the structure of my model:</p>
</blockquote>
<pre><code>public class VehicleFullInformations
{
public Vehicle Vehicle { get; set; }
public Brand VehicleBrand { get; set; }
public Model VehicleModel { get; set; }
public VehicleType VehicleType { get; set; }
public GpsTrack VehicleCurrentPosition { get; set; }
public FuelType VehicleFuelType { get; set; }
}
Although the markers are displayed correctly on the map, there seems to be an issue when selecting one and clicking the send button. The sent object appears as [object object], which results in a deserialization error "Invalid JSON primitive: object".
This is the code snippet from my action method:
[HttpPost]
public ActionResult Index(string model)
{
var jss = new JavaScriptSerializer();
var dataObject = jss.Deserialize<VehicleFullInformations>(model);
Console.WriteLine(dataObject);
// .. do something with data object
return Json("OK");
}
If you have any suggestions or insights on how to resolve this issue, please feel free to share. Thank you in advance for your assistance, and apologies for any language barriers.