开始

新Telerik UI for ASP。网络核心?下载30天免费试用

在Razor Pages中使用Telerik UI

ASP。在ASP中引入了asp.net Razor Pages框架。NET Core 2.0作为ASP。网络核心Model-View-Controller (MVC) framework. Some of the key features of Razor Pages are:

  • Razor Pages是以页面为中心的。Razor页面由以下页面组成(.cshtml)和一个PageModel类(.cshtml.cs)，名字相同。

  • 的@page指示放在页面的顶部使它成为一个剃刀页。该页面包含HTML和服务器端逻辑，您可以使用Razor语法将其包含进来。

  • 的@ model指令指定页期望处理的数据类型。页面使用PageModel类本身作为视图模型。所需的数据作为属性公开。

  • 该页面直接处理请求，而不使用控制器。使用命名约定来查找要在PageModel类中执行的适当处理程序方法。处理程序方法以单词作为前缀在后面跟着HTTP动词，用于他们处理的请求:OnGet，OnPost，OnGetAsync而且OnPostAsync．按照这种约定，可以包括其他处理程序，例如OnGetHelloWorld．
  • Razor Pages自动实现防伪验证，防止跨站点请求伪造(XSRF/CSRF)攻击。

您可以在Razor Pages中找到更多信息微软文档

使用Telerik UI实现ASP。网络核心in a Razor Pages Project

有两种方法可以为ASP添加Telerik UI。NET核心到一个新的Razor Pages项目:

  • 使用Telerik扩展Visual Studio创建一个新项目。的网格剃刀页面模板支持Razor Pages示例，该示例包含一个启用了CRUD操作的Grid。这种方法的好处是模板将自动添加必要的配置和依赖项。您可以专注于添加和配置所需的UI组件。

  • 使用默认的Visual StudioASP。NET核心Web应用程序模板，该模板是基于ASP。NET Razor Pages框架。请勿使用Web应用程序(模型-视图-控制器)模板。

    使用默认的Visual Studio Razor Pages模板需要为Telerik UI组件配置项目，如中所示第一步文章—您必须配置NuGet包源代码，安装Telerik组件，添加所需的Kendo.Mvc.UI引用，并提供客户端资源。

向Razor页面添加组件

所有Telerik UI为ASP。网络核心components are compatible with the ASP.NET Razor Pages framework. The following example demonstrates how to add a Grid to a Razor page and configure its CRUD operations.

  1. 添加@ model指令和一个AntiForgeryToken在Razor页面的顶部:

    @model IndexModel @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf @Html.AntiForgeryToken()

  2. 声明网格并在其中设置CRUD url数据源配置。设置数据源模型。Id配置。方法中的URL必须引用处理程序方法的名称PageModel：

    @(Html.Kendo(). grid () . name ("grid") . groupable (). sortable (). editable (). scrollable (). toolbar (x => x. create ()) . columns (columns => {columns.)绑定(列= > column.Freight);列。绑定(列= > column.ShipName);列。绑定(列= > column.ShipCity);列。命令(column => {column. edit ();column.Destroy ();}) .Width (230);}) .DataSource(ds => ds. ajax () .Read(r => r.l l("/Index?handler=Read").Data("forgeryToken")) .Update(u => u.l l("/Index?handler=Update").Data("forgeryToken")) .Create(c => c.l l("/Index?handler=Create").Data("forgeryToken")) .Destroy(d => d.l l("/Index?handler=Destroy").Data("forgeryToken")) .Model(m => m.d (id => id. orderid)) .PageSize(10) .Pageable())
       <可编辑enabled="true" mode="incell" />           < column-command name="destroy">          < model id="OrderID">         .

  3. 随页面的每个POST请求发送AntiForgeryToken: