我想把一个模型从控制器动作传递给视图。 因此,我发送了对象列表,并将其转换为javascript对象,用于在google Maps中显示标记。 然后我想当标记点击,发送选定的对象(选定的标记)到控制器动作。
@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>'+
'<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>
这是我的模范课
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; }
}
标记显示在映射中,但当我选择一个标记并单击send按钮时,发送的对象类型为[object object],我试图反序列化它,但得到一个错误“Primitive JSON non valide ;:object”
这是我的行动方法
[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");
}
有什么建议吗? 提前感谢并为我糟糕的英语感到抱歉
f.data=json.stringify({model})
似乎很可疑。 您正在此处创建一个对象,其中包含model
。 对象看起来像:
{
model: {
... your actual model ...
}
}
您可能只需要f.data=json.stringify(model)
,它不会在将JS模型发送到控制器之前将其包装在另一个对象中。
另外,在调试器中,您可以在var dataObject=jss.deserialize
行上设置断点,并在C#中检查model
以查看它是否包含您所期望的内容。
更新
几乎肯定没有执行您希望它执行的操作。 加载页面后,在开发工具中检查按钮元素,您将看到它可能类似于
您可能希望执行类似的操作,然后:
function postData(modelIndex) {
let postModel = model[modelIndex];
...
f.data = JSON.stringify(postModel);
...
}