使用Blazor组件UI的典型工作流程

本文描述了为Blazor组件使用Telerik UI的典型工作流中的步骤—获取用于Blazor组件的Telerik UI并配置您的项目以使用它们。

本文中的信息也可作为Blazor的逐步教程服务器而且WebAssembly应用程序。

要使用Blazor的Telerik UI，您需要:

1. 得到了Telerik Blazor包在你的项目中。

2. 添加客户资产．

3. 建立项目来识别Telerik组件。

Telerik-Specific包

用于Blazor的Telerik UI通过NuGet包．下表表示了包含用于Blazor组件套件的Telerik UI的NuGet包。

如果您使用试用许可证，这些包名有一个.Trial后缀，例如Telerik.UI.for.Blazor.Trial，Telerik.DataSource.Trial,Telerik.Recurrence.Trial．

拿到Telerik包

您可以通过以下四种方式获得Blazor包所需的UI:

• 的私人Telerik NuGet提要：

  • 需要Internet连接和身份验证。
  • 它还通知您有关更新和新版本的信息。

• 的自动MSI安装程序：

  • 你可以从你的Telerik帐户然后在没有网络连接的情况下使用。
  • 它允许您安装与扩展使用各种用于创建新项目的模板和一个向导，使现有项目能够使用Telerik组件．
  • 它不提供关于新版本的信息。
  • 根据您的设置，运行安装向导可能需要更高的权限。
  • 的脱机版本演示．

• 的ZIP归档包:

  • 你可以从你的Telerik帐户然后在没有网络连接的情况下使用。
  • 它不提供关于新版本的信息，也不需要安装。
  • 的脱机版本演示．

• 独立的.nupkg文件:

  • 它们是最低要求。
  • 要使用它们，请遵循使用说明ZIP归档，但请下载.nupkg文件代替。

添加客户端资产

用于Blazor组件的Telerik UI需要一个Telerik样式表和一个JS互操作文件在应用程序的主索引文件中。根据Blazor主机模型和框架版本的不同，该索引文件将有所不同:

• 对于客户端Blazor应用程序，请使用wwwroot / index . html文件。
• 对于服务器端Blazor应用程序，请使用以下文件之一:
  • ~ / / _Host.cshtml页面for .NET 3.x
  • ~ / / _Layout.cshtml页面对于。net 6

要添加这些客户端资产，可以使用静态的资产或者是CDN方法。

使用静态资产

您可以添加Telerik JS互操作文件和Telerik样式表作为静态的资产．静态资产(_content文件夹)会在构建过程中从NuGet包自动包含到解决方案中，因此您所需要的就是启用如下代码片段所示的静态资产。的_content文件夹被框架扩展到本地NuGet缓存中，项目从那里复制它。

要启用在项目中使用静态资产，请添加app.UseStaticFiles ();的启动文件服务器项目(默认情况下，这一行已经存在):

• Startup.csfor .NET 3.x而且．NET 5
• Program.cs对于。net 6

c#

var app = builder.Build();/ /……//要从一个包中启用静态文件，请确保存在此选项。app.UseStaticFiles ();/ /……app.Run ();

命名空间MyBlazorAppName{公共类启动{公共无效配置(IApplicationBuilder app, IWebHostEnvironment env){//…//要从一个包中启用静态文件，请确保存在此选项。app.UseStaticFiles ();/ /……}}}

Telerik样式表

样式表允许您使用一种内置的主题例如，默认主题:

<头>… ——>  .Trial

Telerik JS互操作文件

JS Interop文件提供了原生Blazor无法实现的特性。

<头>… ——> .js"

使用CDN

您可以从云CDN(而不是服务器上的本地资源)引用内置的Telerik资产，如JS Interop文件和主题样式表。

• 的为Blazor CDN的Telerik UI分发最常见的色板对于每个基本主题。
• 附加的主题CDN分发内置主题的所有可用色板．

<！DOCTYPE html>  …<！——只选择一个主题——>   ——>< script src="//www.aliitrade.com/blazor.cdn/blazor/3.7.0/telerik-blazor.min.js" defer> …< / html >

确保url中的版本与用于Blazor包的Telerik UI版本匹配。

如果您决定使用CDN而不是静态资产，您可能需要实现一个回退如果您的用户无法使用CDN。

Telerik推荐使用静态的资产而不是CDN。这种方法依赖于框架中的静态资产特性，并从包中获取正确的文件，因此您不必记得在何时更新CDN路径升级到新版本．

配置项目

要使用Telerik组件，必须向项目中添加一些项。其中一些是常见的，而另一些则取决于项目类型(服务器端或客户端)，并且步骤在语法上略有不同。配置项目。

1. 遵循常见的配置指令。

2. 按照项目类型的部分:

   • 客户端(WASM)．
   • 服务器端．

常见的配置

您可以将项目设置为识别所有Telerik组件而无需显式@using每项声明.razor文件。要实现这一点，请在您的~ / _Imports.razor文件:

@using Telerik。Blazor @using Telerik.Blazor.Components

要启用分离弹出窗口(例如，下拉列表、菜单、网格过滤器等)，您必须添加一个TelerikLayout.razor组件在DOM的根级别:

1.在主布局文件(默认情况下，)旁边~ / / MainLayout.razor共享文件)，添加一个名为TelerikLayout.razor内容如下:

@Body 

2.在主布局文件中(默认情况下，)~ / / MainLayout.razor共享在Blazor项目中的文件)，添加@layout TelerikLayout随着第一行在文件中。这将确保TelerikRootComponent对象中的所有内容进行换行MainLayout．

TelerikLayout @继承LayoutComponentBase @* @ body和其他代码将出现在这里，这取决于您的项目*@

或者,TelerikRootComponent可以直接驻留在MainLayout，但它必须换行所有其他内容，否则弹出窗口可能显示在错误的位置．将TelerikRootComponent在一个单独的Razor文件中有助于更好地分离关注点。

客户端项目细节

最后一步是注册Telerik服务。万博体育手机版网址在客户端Blazor项目中，您可以在万博体育手机版网址Program.csWebAssembly (Client)项目的文件:

使用ClientBlazorProject;使用Microsoft.AspNetCore.Components.Web;使用Microsoft.AspNetCore.Components.WebAssembly.Hosting;var builder = WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add <应用>(“#应用”);builder.RootComponents.Add < HeadOutlet >(“::”);builder.万博体育手机版网址Services。AddScoped(sp => new HttpClient {BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)});//注册Telerik服务。万博体育手机版网址builder.万博体育手机版网址Services.AddTelerikBlazor (); await builder.Build().RunAsync();

使用Microsoft.AspNetCore.Components.WebAssembly.Hosting;使用Microsoft.Extensions.DependencyInjection;使用System.Threading.Tasks;使用System.Net.Http;使用系统;名称空间ClientBlazorProject。客户端//确保这与您实际的WASM项目名称空间相匹配。{public class Program {public static async Task Main(string[] args) {// WASM应用的示例主机构建器，您的可能不同var builder = WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add <应用>(“软件”);builder.万博体育手机版网址Services。AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); // There may be more code here. // Register the Telerik services. builder.Services.AddTelerikBlazor(); // There may be more code here. // sample host builder for a WASM app, yours may differ await builder.Build().RunAsync(); } } }

服务器端项目细节

最后一步是注册Telerik服务。万博体育手机版网址在服务器端Blazor项目中，您可以在项目的启动文件中注册服务，这取决于所使用的.NET版本万博体育手机版网址:

• Startup.csfor .NET 3.x而且．NET 5
• Program.cs对于。net 6

c#

/ /……var构建器= WebApplication.CreateBuilder(args);/ /……builder.万博体育手机版网址Services.AddTelerikBlazor ();/ /……var app = builder.Build();

命名空间MyBlazorAppName{公共类Startup{公共无效ConfigureServices(IServiceCollection 万博体育手机版网址services){//…万博体育手机版网址services.AddTelerikBlazor ();} //…}}

下一个步骤

• 探索Blazor演示的Live Telerik UI

• 开始使用数据网格

• 参见用于Blazor Components的Telerik UI的数据绑定基础．

• 浏览可用组件列表．

另请参阅

• Telerik私有NuGet提要
• 自动MSI安装程序
• ZIP归档