Rostyslav Rostyslav - 7 months ago 20
Javascript Question

Asp.net-MVC and AJAX. Don`t see nested list values

My problem is in sended data via ajax.

All ok, but coordinates of my list equals 0. But length of list is valid and equals 3.

I tried use JSON.stringify (with ContenType) on all data and only on nested array, but it didn`t help.

I also tried write numbers "48.30055320091479" instead of 48.30055320091479. It also didn`t help.

I have 2 models:

public class District
{
public int Id { get; set; }

public string Name { get; set; }

public List<Coordinate> Polygon { get; set; }

public bool Deleted { get; set; }

public District()
{
Polygon = new List<Coordinate>();
}
}


and:

public class Coordinate
{
public int Id { get; set; }

public double Latitude { get; set; }

public double Longitude { get; set; }
}


Control:

[HttpPost]
public JsonResult AddDistrict(District district)
{
DistrictModelValidator validator = new DistrictModelValidator();
var checkedDistirct = validator.Validate(district, ruleSet: "AddDistrict");
if (!checkedDistirct.IsValid)
{
return Json(new { success = false }, JsonRequestBehavior.AllowGet);
}
else
{
string statusMessage = districtManager.addDistrict(district.Name);
if (statusMessage == "Error") { return Json(new { success = false }, JsonRequestBehavior.AllowGet); }
else
{
var districts = districtManager.getDistricts();
return Json(new { success = true, districts }, JsonRequestBehavior.AllowGet);
}
}
}


and .js code:

var data = {
Name: newDistrictName,
Deleted: false,
Polygon: [
{
Latitude: 48.30055320091479,
Longitude: 25.914092659950256
},
{
Latitude: 48.30055320091479,
Longitude: 25.914092659950256
},
{
Latitude: 48.30055320091479,
Longitude: 25.914092659950256
}
]
};

$.ajax({
type: "post",
url: "./AddDistrict",
data: data
}).done(function (result) {
if (result.success && result != null) {
jsController.data.items = result.districts;
jsController.renderData();
document.getElementById("add-district-form").reset();
}
else {
jsController.getDistrictErrorMessage();
document.getElementById("add-district-form").reset();
}
})
.always(function () {
$("#add-item").modal('hide');
});


colnsole.log(data)

How my code works

Requst data:

Name:adsadd
Deleted:false
Polygon[0][Latitude]:48.30055320091479 Polygon[0][Longitude]:25.914092659950256
Polygon[1][Latitude]:48.30055320091479 Polygon[1][Longitude]:25.914092659950256
Polygon[2][Latitude]:48.30055320091479 Polygon[2][Longitude]:25.914092659950256

K10 K10
Answer

Looks like you are sending wrong data to action method. You are sending object of following structure from js side,

{
    district : {
        Id : <id_value>
        Name : <name_value>
        Polygon : [<list_of_Coordinate_objects>]
        Deleted : <deleted_value>
    }
}

But on controller side your action method is expecting data in following format. (which is a structure of your District class)

{
    Id : <id_value>
    Name : <name_value>
    Polygon : [<list_of_Coordinate_objects>]
    Deleted : <deleted_value>
}

Thats why the data you are sending using ajax is not being deserialized properly on server side & you are getting wrong values.

Modifying your ajax code a little bit will help you fix this problem.

$.ajax({
    type: "post",
    dataType: "json",
    url: "./AddDistrict", 
    data: JSON.stringify(data)
    contentType: 'application/json; charset=utf-8',
})

I hope this helps.