JSON from js to MVC controller

Question

today I'm trying to get JSON from my JS part of code and pass it to c# method. The problem that I got null when I have passed the result to the current method.

Here is my JS part:

    GMaps.on('click',
                    map.map,
                    function(event) {

                        markers.push(new Point(map.markers.length, event.latLng.lat(), event.latLng.lng()));


                        var index = map.markers.length;
                        var lat = event.latLng.lat();
                        var lng = event.latLng.lng();
                        map.addMarker({
                            lat: lat,
                            lng: lng,
                            title: 'Marker #' + index
                        });
                        console.log(JSON.stringify(markers));
                    });

                function TestJSON() {

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

As you see from the code, in console I see that array of markers is not empty and after every new click I add a value to the array. When I will locate all markers I want to save it, so I made a button for it.

Here is my data model:

public class TripPoint

{ 
    public string Name { get; set; }
    public double Latitude { get; set; }
    public double Longitude { get; set; }

}

public class TripRoute
{
    public List<TripPoint> route = new List<TripPoint>();
}

It how looks like my html code:

  <form>
            <button type="button" value="Save your route " onclick="TestJSON()"></button>
        </form>

And at last it how looks like the method which should get JSON string

 [HttpPost]
    public ActionResult ReturnJson(string json)
    {
        //  **********************************
        //  PROBLEM HERE: json is null
        //  **********************************

        TripRoute route = new JavaScriptSerializer().Deserialize<TripRoute>(json);
        return new EmptyResult();
    }

Please, help to find out why I get a null string.

upd.

Here is my route config

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );

        routes.MapRoute(
           name: "ReturnJSON",
           url: "{controller}/{action}/{id}",
           defaults: new { controller = "Home", action = "ReturnJSON", id = UrlParameter.Optional }
       );

        ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
    }
}

What variable is null? When? Are you saying route in ReturnJson() is null or empty? Or some string somewhere? What does JSON.stringify(markers) return? — 15ee8f99-57ff-4f92-890c-b56153
– 15ee8f99-57ff-4f92-890c-b56153, Commented Aug 4, 2016 at 18:41
Please show what you have in the RouteCollection. I mean in RegisterRoutes method in the Global.asax.cs. — Antipod
– Antipod, Commented Aug 4, 2016 at 18:42
@EdPlunkett oh, in the method ReturnJson a parameter "string" json is null. When I press a button (as I understand this) should me called the function TestJson in JS which passes the json value to c sharp method. Am I wrong? What does JSON.stringify(markers) return? As I think it returns data in json format. — whoiskatrin
– whoiskatrin, Commented Aug 4, 2016 at 18:46
@Antipod oh, ok, I added it to the question. Please, take a look on it. — whoiskatrin
– whoiskatrin, Commented Aug 4, 2016 at 18:48

Shyju · Accepted Answer · 2016-08-04 18:52:07Z

1

The items you are adding to the markers is with properties lat,long and title, but your view model (Which you are trying to serialize to) has different property names. So i suggest you to create a class with same property names

public class MarkerItem
{
  public string Title {set;get;}
  public decimal Lat {set;get;}
  public string Long { set;get;}
}

and since you want to send an an array of marker's, use a collection of the above class as your parameter. You do not need to use a string as parameter and deserialize it again. The Default model binder will be able to map the posted data to a list of MarkerItem class objects

public ActionResult ReturnJson(List<MarkerItem> markerItems)
{
    //do something with markerItems list
    // to do : Return something
}

I just noticed your routeconfig. You do not need the second route registration. Your default route registration is good enough.

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
    );
    ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}

edited Aug 4, 2016 at 18:52

answered Aug 4, 2016 at 18:50

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Antipod Over a year ago

This the way to do it. But what if she wants to have a string and then deserialize it.

whoiskatrin Over a year ago

@Antipod Actually, I want to ask which way is better: to have a string and then serialize it or get it at once to list (is it self-serialized inside)?

Shyju Over a year ago

There is no reason to use a string and deserialize. The default model binder is created to map your posted data to your method parameters(assuming the names match). reading as string and serializing seems duplicate and unnecessary as model binder does that for you.

Antipod Over a year ago

Of course it is the right way to use the strongly-typed class, no doubt. Or you have to have a strong reason why you cannot use it.

whoiskatrin Over a year ago

Thank you a lot, now it's pretty clear. Thanks to both of you, guys.

Collectives™ on Stack Overflow

JSON from js to MVC controller

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related