Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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!

share|improve this question

1 Answer 1

up vote 2 down vote accepted

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

  1. 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).

  2. 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) {
        ...
    }
}
share|improve this answer
    
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
    
I've added code samples to my answer. –  ThinTim Sep 17 '13 at 23:16
    
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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.