Javascript array sending to asp.net MVC controller

Question

I'm currently trying to develop a web app in which a user defines a set of points with coordinates on google maps, these points are stored on an array like this one:

 mvcPolygon: new google.maps.MVCArray(),

Now I need username, password, etc. and submits it to the server. I'm pretty new with javascript and frontend development so I'm quite clueless here as to what is the way to go. So currently I have the javascript code which is storing the coordinates and what I need is that when the user is finnished defining his polygon, and filling a form with username, password, email, etc. all this info gets sent to the controller as soon as the user hits the submit button. The webapplication is currently being developed on ASP.NET MVC 5 and c# , any help would be really appreciated!

score 3 · Accepted Answer · edited May 23 '17 at 11:58

3

There's essentially 2 ways you can get that data back to the server:

You can put the data into a form element and post that form to an action that's set up to receive it. This will require you to put your username, password, etc into a series of html elements with name attributes set up to follow MVC's conventions (This page has some information on the conventions to use).
You can use jQuery's ajax features to send a raw javascript object containing your data to an MVC action (See this answer and it's linked post for details on how to accomplish this).

In either case, you probably shouldn't be sending a username & password to the server with every request, as you can use an authentication cookie to verify a user's identity once they're logged in to your application (there's plenty of resources online explaining how this works).

For option 2:

Javascript:

var myobject = {
    username: "Joe",
    password: "password",
    points: [{ x: 111.1112, y: 22.2222 },{ x: 11.12, y: 21.11 }]
}

jQuery.ajax({
    url: "/MyController/MyAction",
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(myobject)
})

C#:

public class PointModel 
{
    public double x { get; set; }
    public double y { get; set; }
}

public class MyModel
{
    public string username { get; set; }
    public string password { get; set; }
    public IList<PointModel> points { get; set; }
}

public class MyController : Controller 
{
    [HttpPost]
    public JsonResult MyAction(MyModel model) {
        ...
    }
}

edited May 23 '17 at 11:58

Community

1
1

answered Sep 17 '13 at 01:08

ThinTim

565
3
8

I have checked both of the options and I'm not sure if those apply, the scenario is this: A user is goning to signup on the site, this requires the user to fill all of his personal information and aditional to this, a set of points that he defined on the map. These points are being stored on that new array so when the user is finnished defining the points, his username, his email, his age, etc. He will click submit and send the info. The problem is I have no idea how to bind that array to the data sent back to the server once the submit button is hit. Thanks for taking the time and helping me! – oskar132 Sep 17 '13 at 22:47
I realise that's what you're trying to do. You have a complex javascript object that you want to post to the server, so the simplest approach is option 2. You need an MVC controller action on the server which is set up to receive a model that represents the user's personal information, as well as the array of points you want to store. You would then need to use ajax to post your javascript object (the format of which matches the model that the server expects) to the url of the controller action, which could then handle storing / manipulating that data. – ThinTim Sep 17 '13 at 23:03
OK first of all thanks for taking the time and writing that snippet. Second: I've implemented the code and now I have a series of questions. 1st, how would be the form related to the Javascript code, I mean if I have an input for a username, how can I get it from the form and assign it to the javascript variable ( is this done with JQuery? 2. How can I trigger the post call of the ajax piece, I mean how can I set it so it is called as soon as the user clicks submit? I'm trying to assimilate all this information but there's something I'm missing, sorry if this is frustating for you and thanks! – oskar132 Sep 17 '13 at 23:54
One more thing, the method should redirect to an action which will display another screen, in other words this is not asynchronous, in this case is ajax the right option for the job? – oskar132 Sep 17 '13 at 23:56
You'd be well served by taking the time to work through a [course on jQuery](http://www.codecademy.com/learn) and browse through some of the [jQuery documentation](http://api.jquery.com/category/forms/). In response to your questions, usually when you need to redirect after submitting data, a form post is better (as in option 1 in the answer above) however this makes binding arrays a bit tricky in MVC. You can get similar functionality through ajax by returning a redirect url in a json object, and using the [ajax success event](http://api.jquery.com/jQuery.ajax/) to perform the redirect. – ThinTim Sep 18 '13 at 00:46
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/37559/discussion-between-thintim-and-oskar132) – ThinTim Sep 18 '13 at 01:05

score 1 · Answer 2 · answered Jul 09 '15 at 13:22

you can use below java script method to define JavaScript array

<script type="text/javascript">
 var array = [];
    array.push(10);
    array.push(20);
</script>

you use this array to insert points in array and send this array using following Ajax call

 var _data = {
            'array ': array 
        };
$.Post(url ,_data, function(data){
})

Javascript array sending to asp.net MVC controller

2 Answers2

Linked