转换为Telerik应用程序
本文演示了如何在现有的Blazor应用程序中,通过几次鼠标点击,为Blazor组件启用Progress®Telerik®UI。如果你已经有了一个实质性的应用程序,或者你想使用微软模板开始使用身份验证等功能,然后再添加UI组件,这可能会很有帮助。
若要将Telerik组件添加到现有Blazor应用程序,请使用转换项目向导。向导检测所有已安装的Telerik UI版本,并在版本组合框-这使您能够使用所需的版本启动项目。你也可以获取最新版本确保你是最新的。
该向导为您自动执行几个步骤,否则您必须手动执行:
将客户端资产添加到项目中:
- 添加Telerik样式表.
- 添加JS互操作文件.
配置项目为Blazor组件使用Telerik UI:
- 添加要求
@using
指令到~ / _Imports.razor
文件。 - 添加
TelerikLayout.razor
组件在DOM的根级别。 - 为注册Telerik服务万博体育手机版网址客户端项目和服务器端项目.
- 添加要求
获取向导
使用转换项目为Blazor Visual Studio Extensions安装Telerik UI。你可以从以下途径获取扩展名:
- Visual Studio市场(用于Visual Studio 2022 for Windows而且Visual Studio 2019 for Windows).
- 的Telerik UI Blazor自动安装(适用于Windows和Mac)。
- 你的Telerik.com帐户- - -
.mpack
为Mac的VS文件。
启动向导
您有两个选项来启动向导:
项目上下文菜单
- 在解决方案资源管理器,选择您想要添加Telerik组件的Blazor应用程序(WebAssembly或服务器端Blazor)。
- 右键单击项目节点,然后选择Blazor的Telerik UI>转换为Telerik应用程序.
- 按照向导操作。
从项目上下文菜单中启动转换向导
扩展菜单
或者,代替上下文菜单,你可以使用顶部的Visual Studio扩展菜单:
- 在解决方案资源管理器,选择您想要添加Telerik组件的Blazor应用程序(WebAssembly或服务器端Blazor)。
- 打开扩展菜单。
- 点击Telerik>Blazor的Telerik UI>转换为Telerik应用程序.
- 按照向导操作。
从“扩展”菜单中启动向导
特性
该向导提供了以下选项:
- 能够下载最新的可用版本。
- 版本选择器,可以选择要添加到项目中的特定版本。
- 在您的机器上找到可供选择的版本的列表。
- 是否在转换前备份项目状态(在名为
< ProjectName > _Backup > _ <时间>
).
转换项目向导选项
向导为您自动执行几个步骤,您也可以手动执行这些步骤。为了更好地理解向导为您做了什么,请参阅以下任何一篇文章(它们以不同的格式提供了相同的信息):
故障排除
转换项目时有三个常见问题:
- 属性导致转换向导失败错误的屏幕.
- 的Telerik组件不能工作在运行转换后的项目之后。
- 一个额外的共享文件夹出现了。
错误的屏幕
如果您看到类似于下图的错误屏幕,请确保在解决方案资源管理器中选择了实际的Blazor应用程序。这在WebAssembly类型的应用程序中是最常见的,因为它们默认由服务器和共享项目组成,只有客户端项目才是需要Telerik组件的实际Blazor应用程序。
某些特定的项目设置也可能在转换过程中导致异常。最快的解决办法是手动配置Telerik组件的项目.
当项目无法转换时出现错误屏幕
组件失败
这个问题可以通过以下几个方面表现出来:
- 组件没有样式。
- 存在无法找到Telerik对象的JavaScript错误。
导致此问题的最常见原因是安装的版本与您拥有的实际许可证之间不匹配。例如:
- 在您的开发机器上只安装了一个试用版本,但是您已经拥有商业许可证,但是您从未安装过商业版本。
- 向导没有正确检测到已安装的版本。
原因是错误的路径所需的网络资产。要解决这个问题,打开索引文件:
wwwroot / index . html
用于WebAssembly Blazor应用程序~ / / _Host.cshtml页面
服务器端Blazor应用程序使用。net 3。x或。net 5~ / / _Layout.cshtml页面
用于服务器端Blazor应用程序使用。网6
寻找向导留下的注释。评论在< >头
Telerik资产附近,并显示试验和商业许可证的正确路径。
额外共享文件夹
你可能会得到共享
包含TelerikLayout.razor
在项目中意想不到的地方进行文件整理。如果在运行转换向导时选择的是项目中的文件夹而不是项目本身,就会发生这种情况。
解决办法是移动TelerikLayout.razor
文件到原始文件共享
的文件夹中MainLayout.razor
文件。