MVC - Sending array with javascript + ajax to Controller - asp.net-mvc

Question

I'm trying to send an array with coordinates to an MVC controller
I'm doing it like this (not posting all the code, only the relevant):
var coords = [];
..for loop
coords.push({ X: x, Y: y});
..end of loop
then I just do an ajax call with the following object as data
var data = {
OtherData: "SomeString",
OtherData2: 1,
Coords: coords
};
When I debug the action on the controller the other data is parsed correctly
The model I expect looks something like this
public class Model
{
public int OtherData2 { get; set; }
public string OtherData { get; set; }
public Point[] Coords { get; set; }
}
What I already tried
- Using List
- Making a class Simple Point with X and Y as properties
- sending the X and Y values as string values
- sending the X and Y values concatenated as 1 string and receiving a list of string
In the cases of the point object as an array I get a list with the same amount of points but they're all empty (0,0) with the List object the list is just null
any idea?
Maybe an important note is that I'm using MVC4

Answer 1

looks like the DefaultModelBinder doesn't know how to bind to a List,
(it's missing the proper type converter)
what you can do is create your own point and a type converter to it:
[TypeConverter(typeof(PointTypeConverter))]
public class Point
{
public int X { get; set; }
public int Y { get; set; }
}
/// <summary>
/// we need this so we can use the DefaultModelBinder to bind to List<Point>
/// example at http://msdn.microsoft.com/en-us/library/ayybcxe5.aspx
/// </summary>
public class PointTypeConverter : TypeConverter
{
public override bool CanConvertFrom(ITypeDescriptorContext context, Type sourceType)
{
return true;
}
public override object ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, object value)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
Point ret = serializer.Deserialize<Point>((string)value);
return ret;
}
}
the controller action will look like this:
[HttpPost]
public ActionResult testPoints(List<Point> cords)
{
//party
}
and the Ajax call like this:
$.ajax({
url: "/Home/testPoints/",
type: "POST",
data: {
//note that i stringify very value in the array by itself
cords: [JSON.stringify({'X':1,'Y':2}),JSON.stringify({'X':3,'Y':4})]
},
success: function (data)
{
//client party
}
});
tested all this in MVC3, and there is no reason it won't work in MVC4
hope this helps