How To Pass A Javascript Array To Asp.net Mvc Model?

I want to create a field object in ASP.NET MVC and store it to a database. The field should contain its coordinates which the user can select with the google maps api. And now, how

Solution 1:

I understood, (looking by you code) that you want to go with submitting form, and not ajax?

If so, you have two choices (known to me):

1. Create html hidden input and paste there as value serialized JSON of your markers array - but you will have to deserialize this value later. In this example you need to change Coordinates type in your model to string.

JavaScript

// some sample coordinates, you need to extract them from markersvar coordinates = ["12,21","213,231"]; 
var dataToSend = JSON.stringify(coordinates);
$("#coordinatesInput").val(dataToSend);

HTML

<input hidden id="coordinatesInput" name="model.Coordinates" value=""/>

2. Create dynamically, using JavaScript (for example append function) many hidden html inputs with name model.Coordinates[i] and value of single coordinate (use some loop).

JavaScript

var coordinates = ["231,2132","312,231","231,321"];

var container = $("#container");
//container, where you will be adding inputs, in you example it could be form-horizontal class
coordinates.forEach(function(val, i){
  container.append('<input hidden name="model.Coordinates['+i+']" value="'+val+'">');
});

Of course using AJAX is much better way, and AlexB answer is way to go, but mechanism of it is a little different. It is good to use only AJAX (not form submitting), because in your example you need to use two Actions, one for AJAX and one for form submitting.

Solution 2:

You can pass your Javascript array to your controller using an Ajax call :

$.ajax({
        url         :    "@Url.Action("MethodName", "ControllerName")",
        contentType :    "application/json; charset=utf-8",
        dataType    :    "json",
        type        :    "POST",
        data        :    JSON.stringify({coordinates: markers})
 })

(where markers is your JS array to pass to the controller, I guess)

And your controller will look like

public ActionResult MethodName(Single[] coordinates){
    // ...
}