Cannot get json data with ajax in Razor Pages [duplicate]

Question

i am trying to get some data from Razor Pages in ASP.NET Core 2.0.

But the problem is that it does not returns any data. I also tried debugging it, it does not fire that method (OnGetProducts) at all.

The model Index.cshtml.cs:

    private IProductRepository _productRepository;

    public IndexModel(IProductRepository repository)
    {
        _productRepository = repository;
    }

    public void OnGet()
    {

    }

    public IActionResult OnGetProducts(int page)
    {
        var model = _productRepository.GetProducts().Skip(page * 10).Take(10);

        return new JsonResult(model);
    }

the razor page Index.cshtml

<div id="products">
</div>

@section scripts{

<script>
    $(function () {
        getProducts(0);

    });


    var isInitialized = false;

    function getProducts(page) {
        $.ajax({
            type: 'GET',
            url: "Products",
            contentType: "application/json",
            dataType: "json",
            data: {
                handler: 'Products',
                page: page
            },
            success: function (datas) {
                console.log(datas);
            }
        });
    }
</script>

}

p.s. this page in in folder Pages/Products/Index.cshtml(.cs)

My first instinct if I was trying to debug an ajax call that was failing would be to set the error callback and see what it was telling me went wrong... — Marc Talbot
– Marc Talbot, Commented Dec 2, 2017 at 21:29
Also hit F12 in your browser and look at the network tab + console. — SpruceMoose
– SpruceMoose, Commented Dec 3, 2017 at 10:32
I asked a similar question and eventually got it to work (see prev comment) but decided creating a Web API controller for the AJAX calls was simpler and better approach. — Brad Patton
– Brad Patton, Commented Dec 4, 2017 at 14:42
I had same problem, the Url needs to be the handler, format like this: url: "?handler=Products" — Blingers
– Blingers, Commented Jan 25, 2018 at 12:32

Neville Nazerane · Accepted Answer · 2017-12-03 16:54:55Z

I usually use razor functions to generate URLs instead of hard coding them in js. If your action is not even being triggered, assuming that you are not accidentally in release mode, it is because the URL doesn't point to the right location. First of all set js variables in razor something like this:

var productsURL = @Url.Context("~/products");

Also run yourdomain/products in your browser and if you get a 404.

Alternatively I use this function to directly use c# objects in js:

public static IHtmlContent ToJS(this IHtmlHelper htmlHelper, object obj)
   => htmlHelper.Raw(JsonConvert.SerializeObject(obj));

With this function created in a static class, you can also create a js object directly something like this:

<script>
    var products = @Html.ToJS(repository.GetProducts().Skip(page * 10).Take(10));
</script>

Of course this will only create the object in page load, if you want it to change after page load, you can consider creating a partial view via ajax. Also note that the second alternative will be slower than the first for ajax.

Collectives™ on Stack Overflow

Cannot get json data with ajax in Razor Pages [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related