无法在 Razor 页面中使用 ajax 获取 json 数据 [重复]答案

【问题标题】：Cannot get json data with ajax in Razor Pages [duplicate]无法在 Razor 页面中使用 ajax 获取 json 数据 [重复]
【发布时间】：2018-05-16 13:01:59
【问题描述】：

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

但问题是它不返回任何数据。我也试过调试它，它根本不会触发那个方法（OnGetProducts）。

模型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

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

}

附言此页面位于 Pages/Products/Index.cshtml(.cs) 文件夹中

【问题讨论】：

如果我尝试调试失败的 ajax 调用，我的第一反应是设置错误回调并查看它告诉我的错误...
也在浏览器中按 F12 并查看网络选项卡 + 控制台。
我问了一个类似的问题并最终让它工作（见上一条评论），但我决定为 AJAX 调用创建一个 Web API 控制器更简单更好的方法。
我遇到了同样的问题，Url 需要是处理程序，格式如下： url: "?handler=Products"
问题出在 AntiForgeryKey。

标签： asp.net-core asp.net-ajax asp.net-core-2.0 razor-pages

【解决方案1】：

我通常使用 razor 函数来生成 URL，而不是在 js 中硬编码它们。如果您的操作甚至没有被触发，假设您不是意外处于发布模式，那是因为 URL 没有指向正确的位置。首先在 razor 中设置 js 变量，如下所示：

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

如果您收到 404，请在浏览器中运行 yourdomain/products。

或者我使用这个函数在js中直接使用c#对象：

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

在静态类中创建这个函数，你也可以像这样直接创建一个js对象：

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

当然这只会在页面加载时创建对象，如果你想在页面加载后改变它，你可以考虑通过ajax创建一个局部视图。另请注意，对于 ajax，第二种选择将比第一种要慢。

【讨论】：