开始

新为Blazor的Telerik UI?下载30天免费试用

Blazor客户端UI的第一步

本文解释如何获取用于Blazor组件的Telerik UI在你的客户端(WebAssembly)Blazor项目，并开始快速使用它们。您将从零开始创建一个新的应用程序，学习如何将Blazor组件的UI添加到项目中，最后将UI组件添加到视图中。

这个循序渐进的教程从基础开始。如果您已经熟悉Telerik NuGet Feed和Blazor，您可能更喜欢用于Blazor工作流的Telerik UI篇文章。

先决条件

  • 要成功完成本教程中的步骤，请确保您已经安装了一个当前Visual Studio的版本。

  • 要了解更多关于用于Blazor组件的Telerik UI与不同浏览器和。net版本的兼容性的信息，请参见系统需求．

最新版本的Telerik UI为Blazor3.6.1，它支持.NET Core 3.1.11和。net 6．

步骤0:为Blazor下载Telerik UI

  • 如果您已经购买了用于Blazor许可证的Telerik UI，请继续使用下一步，创建一个新项目．

  • 如果你是新UI为Blazor，还没有购买许可证，你必须下载并安装试用版这将激活您的免费试用，并允许您使用这些组件。在安装过程中，选择设置Telerik NuGet包源复选框，安装程序将配置Telerik在线NuGet饲料自动。您将在本教程的后面使用此提要。

试用用户必须完成组件的安装。否则他们的试用许可证将无法激活，他们也无法成功完成教程。

步骤1:创建一个新项目

  1. 打开Visual Studio并选择创建一个新项目．

  2. 选择Blazor WebAssembly应用项目类型，输入项目的名称，然后单击下一个．

  3. 选择ASP。网主办的核心复选框和所需的框架，然后单击创建．

步骤2:添加Telerik NuGet Feed到Visual Studio

在本教程中，您将使用Telerik NuGet饲料下载Blazor组件的UI。这个NuGet提要是私有的，需要您使用Telerik用户名和密码进行身份验证:

  1. 在Visual Studio中转到工具>NuGet包管理器>包管理器设置．

  2. 选择包的来源然后单击+按钮以添加新的包源。

  3. 输入一个的名字例如，对于新的包源，telerik.com．

  4. 添加https://nuget.telerik.com/v3/index.jsonURL是一个源．点击好吧．

    在Visual Studio中添加Telerik NuGet提要

有关其他下载方法，请检查工作流的文章．

步骤3:为Blazor Components安装Telerik UI

  1. 右键单击.Client在解决方案中进行投影并选择NuGet包管理．

    NuGet包管理

  2. 安装Telerik.UI.for.Blazor包:

    1. 选择telerik.com包的来源你添加之前．由于这是一个私有的NuGet提要，您必须使用您的Telerik帐户用户名和密码。
    2. 选择浏览选项卡,找到Telerik.UI.for.Blazor包,然后单击安装．如果使用试用许可证，则只能看到Telerik.UI.for.Blazor.Trial相反)。

    将Telerik Blazor包添加到客户端项目

步骤4:启用Blazor UI组件

要启用Blazor组件的Telerik UI，您必须向应用程序添加几个客户端依赖项:

1.添加telerik-blazor.js文件到您的主索引文件-wwwroot / index . html．

超文本标记语言

<头>… ——> .js"

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

  • 使用Startup.cs对于。net 3. x
  • 使用Program.cs为。net 6

c#

命名空间MyBlazorAppName{公共类启动{公共无效配置(IApplicationBuilder app, IWebHostEnvironment env){//更多代码可能出现在这里。//要从一个包中启用静态文件，请确保存在此选项。app.UseStaticFiles ();//这里可能有更多的代码。}}}
//这里可能有更多的代码。//要从一个包中启用静态文件，请确保存在此选项。app.UseStaticFiles ();//这里可能有更多的代码。

3.在~ / wwwroot / index . html文件的客户端web应用程序，添加主题样式表．这允许您为UI组件选择可视主题。

<头>… ——>  .Trial

4.在~ / Program.cs客户端web应用程序的文件，注册Telerik Blazor服务。

c#

使用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(); } } }
使用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();

5.在~ / _Imports.razor文件,添加@using这将配置项目以识别所有文件中的Telerik组件。

_Imports.razor

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

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

@Body

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

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

或者,TelerikRootComponent可以直接驻留在MainLayout，但是将它放在另一个文件中有助于更好地分离关注点。

现在您的项目可以为Blazor组件使用Telerik UI了。

步骤5:向视图中添加组件

本教程的最后一步是在视图中为Blazor组件使用Telerik UI，并在浏览器中运行它。

  1. 在~ / / Index.razor页面视图,添加一个TelerikButton组件。

    剃须刀

    < TelerikButton > < / TelerikButton问好>

  2. 可选地，连接一个将显示消息的单击处理程序。生成的视图如下所示:

    剃须刀

    @page "/" Say Hello 
     @helloString @code {MarkupString helloString;void SayHelloHandler(){字符串msg =字符串。格式("Hello from Telerik Blazor at {0}. "
     Now you can use c# write前端!"，DateTime.Now);helloString = new MarkupString(msg);}}

  3. 通过按在浏览器中运行应用程序F5．你应该会看到如下内容:

    浏览器中的应用程序

做得好!现在您有您的第一个Telerik UI为Blazor组件运行在您的Blazor应用程序。

下一个步骤

视频教程

如果你更喜欢视频指导，也可以查看下面的视频教程。

另请参阅

在这篇文章中
相关文章
找不到你需要的帮助? 改善这篇文章
Baidu
map