无法在Razor Pages中使用Ajax获取json数据 [英] Cannot get json data with ajax in Razor Pages

问题描述

我正在尝试从ASP.NET Core 2.0中的Razor Pages获取一些数据.

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

但是问题是它不返回任何数据. 我还尝试调试它，它根本不会触发该方法(OnGetProducts).

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.

模型Index.cshtml.cs:

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);
    }

剃须刀页面Index.cshtml

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.此页面在Pages/Products/Index.cshtml(.cs)

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

推荐答案

我通常使用剃刀函数生成URL，而不是用js对其进行硬编码.如果甚至没有触发您的操作(假设您不是意外地处于释放模式)，那是因为URL指向的位置不正确.首先在剃刀中设置js变量，如下所示:

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");

还要在浏览器中运行domain/products，如果您收到404信息.

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

或者，我使用此函数直接在js中使用c#对象:

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));

通过在静态类中创建此函数，您还可以直接创建js对象，如下所示:

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>

当然，这只会在页面加载时创建对象，如果希望在页面加载后更改对象，可以考虑通过ajax创建局部视图.另请注意，第二个替代方法将比第一个替代ajax的方法慢.

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.

这篇关于无法在Razor Pages中使用Ajax获取json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！