Blazor服务器端UI的第一步

本文解释了如何在您的服务器端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服务器应用程序项目类型，输入项目的名称，然后单击下一个．

3. 选择所需的框架并单击创建．

步骤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是一个源．点击好吧．

   

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

步骤3:为Blazor Components安装Telerik UI

1. 右键单击解决方案中的Blazor Server项目并选择NuGet包管理．

   

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

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

   

步骤4:启用Blazor UI组件

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

1.添加telerik-blazor.js文件到你的主索引文件:

• ~ / / _Host.cshtml页面对于。net 3. x
• ~ / / _Layout.cshtml页面为。net 6

超文本标记语言

<头>… ——> .js"

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

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

c#

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

//这里可能有更多的代码。//要从一个包中启用静态文件，请确保存在此选项。app.UseStaticFiles ();//这里可能有更多的代码。

3.要为UI组件选择可视主题，请添加主题样式表在你的主索引文件中:

• 使用~ / / _Host.cshtml页面.NET 3.x的索引文件
• 使用~ / / _Layout.cshtml页面.NET 6的索引文件

<头>… ——>  .Trial

4.在Blazor Server项目的启动文件中，注册Telerik Blazor Service:

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

c#

命名空间MyBlazorAppName{公共类Startup{公共void ConfigureServices(IServiceCollecti万博体育手机版网址on services){//更多代码可能在这里。万博体育手机版网址services.AddTelerikBlazor ();} //这里可能有更多的代码。}}

//这里可能有更多的代码。builder.万博体育手机版网址Services.AddTelerikBlazor ();//这里可能有更多的代码。

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

_Imports.razor

@using Telerik。Blazor@using Telerik。Blazor．Components

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

@Body 

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

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

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

现在您的Blazor Server项目可以为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应用程序。

下一个步骤

• 探索Blazor演示的Live Telerik UI

• 开始使用数据网格

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

• 浏览可用组件列表．

视频教程

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

另请参阅

• 开始使用客户端Blazor
• Telerik私人NuGet Feed
• Blazor入门视频