设置 Kendo UI Grid DataSource Read 属性 with Handler in ASP.NET Core MVC with Razor Pages

Question

我正在使用 Kendo UI for ASP.NET Core MVC 套件和 Razor Pages web 应用程序，所以我正在尝试使用处理程序技术进行网格的服务器操作。

@(Html.Kendo().Grid<CustomerViewModel>()
        .Name("CustomersGrid")
        .Columns(columns =>
        {
            columns.Bound(x => x.CustomerId).Title("Student ID");
            columns.Bound(x => x.CustomerName).Title("Name");
        })
        .Pageable()
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(true)
            .Read(read => read.Url("/Customers?handler=Read")))
         )

我查看了网络选项卡，它正在将 POST 正确设置为 http://localhost:5000/Customers?handler=Read，但是我并没有在我的断点处结束，我得到了状态代码 400。

在剃刀页面的 Action 方法后面的代码中名为 OnPostReadAsync

知道为什么这不起作用吗？除了 .Url 还尝试在 DataSource 的 .Read 属性中使用 read.Action 和 read.Route。

这里是class的动作方法：

public class IndexModel : PageModel
{
    private readonly ICustomerRepository _customerRepository;
    private readonly IMapper _mapper;

    public IndexModel(ICustomerRepository customerRepository, IMapper mapper)
    {
        _customerRepository = customerRepository;
        _mapper = mapper;
    }

    public IList<CustomerViewModel> Customers { get; set; }

    public async Task<IActionResult> OnPostReadAsync([DataSourceRequest] DataSourceRequest request)
    {
        // THIS IS WHERE I WANT IT TO GO FOR READ

        var customersFromDb = await _customerRepository.FilterAsync();
        return new JsonResult(_mapper.Map<IList<Customer>, IList<CustomerViewModel>>(customersFromDb).ToDataSourceResult(request));
    }
}

Answer 1

您可能已经这样做了，但我没有在您的代码中看到它。请记住，Razor Pages 需要防伪令牌。您可以像这样将其注入您的标记中：

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf

并且我添加了此功能以将其设置在网格的 dataSource 请求中：

$(function () {
    const requestVerificationToken = '@Xsrf.GetAndStoreTokens(HttpContext).RequestToken';
    const beforeSend = req => req.setRequestHeader('RequestVerificationToken', requestVerificationToken);
    const grid = $("#grid").getKendoGrid();
    grid.dataSource.transport.options.create.beforeSend = beforeSend;
    grid.dataSource.transport.options.update.beforeSend = beforeSend;
    grid.dataSource.transport.options.destroy.beforeSend = beforeSend;
});

如果没有该标记，所有 PageModel 自定义处理程序都会 return 400 错误。

参考：Prevent Cross-Site Request Forgery (XSRF/CSRF) attacks in ASP.NET Core

Answer 2

对我来说，使用 POST 获取数据是错误的。如果您想使用 GET，请将 .Type(HttpVerbs.Get) 附加到您的 Read 方法：

.DataSource(data =>
{
    data.Ajax()
      .Events(events => events.Error("grid_error"))
      .Read(read => read.Url("./Groups?handler=Read").Type(HttpVerbs.Get));
      //.Sort(sort => sort.Add("Name").Ascending())
      //.PageSize(20);
})

并保留您常用的 Ajax 方法，但约定需要 OnGet 加上 handler=...

指定的值

public IActionResult OnGetRead([DataSourceRequest] DataSourceRequest request)
{
    var result = db.Queryable<IdentityRole>();
    return new JsonResult(result.ToDataSourceResult(request));
}

TagHelper 风格类似：

<datasource type="DataSourceTagHelperType.Ajax" custom-type="AndyB.Identity.IdentityRole">
  <transport>
    <read url="./Groups?handler=Read" type="Get" />
  </transport>
  <sorts>
    <sort field="Name" direction="ascending" />
  </sorts>
</datasource>

不用于插入、更新或删除，继续使用POST

设置 Kendo UI Grid DataSource Read 属性 with Handler in ASP.NET Core MVC with Razor Pages

Setting Kendo UI Grid DataSource Read property with Handler in ASP.NET Core MVC with Razor Pages

c#

kendo-ui-mvc

kendo-ui-grid

asp.net-core

razor-pages