How do I fill a Javascript var with Json data from a Controller in Asp.net Core

Question

I have a controller that returns a JsonResult

    [HttpGet]
    public JsonResult ShopMarkers()
    {
        var shops = repository.Shops;
        return Json(shops);
    }

In my view I'd like to fill a var with the data from that method. In an older MVC project I remember I'd write an ajax call to fill the var. Something like this:

    var markers;
    $.ajax({
      type: 'POST',
      url: '/Map/ShopMarkers',
      dataType: 'json',
      contentType: dataType,
      data: data,
      success: function (result) {
          markers = result;
      }
   });

Or I could return a string to a view and Json.Parse it there inside a script tag.

Neither of these seem right. Is there a better way to fill my var in .Net Core?

What you've posted looks right enough. So perhaps elaborate on what's actually happening when you try it...? — Reddog, Apr 06 '17 at 23:29
It's not that I'm having a problem running the ajax call, I'm just wondering if this is how you connect a JsonResult to a var. I'm not sure why I got the impression there's a tidier way in Core. — Mikey Mouse, Apr 06 '17 at 23:44
That seems very tidy already... What exactly is your problem with it? — Reddog, Apr 07 '17 at 02:42
Thanks for the feedback, it's not that I have a problem with it, I just had a feeling that there was some way of passing this it to a View without 10 lines of JS, somehow have it in the Model, but it looks like this is the way to go — Mikey Mouse, Apr 07 '17 at 07:46

Shyju · Accepted Answer · 2017-04-07T01:11:00.787

Your client code is currently making the ajax call with POST type request. But your action method is decorated with HttpGet. So you should be getting a 404 error (If you inspect your browser dev tools, you should be able to see the status of the network (ajax) call)

[HttpPost]
public JsonResult ShopMarkers()
{
    var shops = repository.Shops;
    return Json(shops);
}

This should work assuming your code inside ShopMarkers method is not crashing ! (throwing any exceptions or so)

In your client side code you are trying to send an object. If you are sending a complex object, you should specify the contentType as "application/json" and send the data using JSON.stringify method.

var dataType = "application/json";
var data = { userId: 12, Password: 'ss' };

$.ajax({
    type: 'POST',
    url: '/Home/ShopMarkers',
    dataType: 'json',  // not really needed in your case
    contentType: dataType,
    data: JSON.stringify(data),
    success: function (result) {
        var markers = result;
        console.log(result);
        //Use result only here. Not outside
    }
});

Since the ajax call is sending data in the request body, you should decorate the method parameter with [FromBody] attribute so that model binder will be able to map the posted data (from the request body) to your parameter.

[HttpPost]
public JsonResult ShopMarkers([FromBody] YourUserViewModel model)
{
    //to do : Return some JSON
}

One last question if you have the time, would it be considered bad practice to use the URL as a string rather than a URL Helper? '@Url.Action("ShopMarkers")' — Mikey Mouse, Apr 07 '17 at 09:00
Using the helper method to generate the correct url is a best practice IMHO. If your js code is inside a external js file, you can use the solution explained in this answer. [How do I make JS know about the application root?](http://stackoverflow.com/questions/34360537/how-do-i-make-js-know-about-the-application-root/34361168#34361168) — Shyju, Apr 07 '17 at 12:26

How do I fill a Javascript var with Json data from a Controller in Asp.net Core

1 Answers1