一般问题
本页提供了您在使用Telerik UI for Blazor组件时可能遇到的常见问题的解决方案。
- 弹出窗口不起作用
- 错误的弹出位置
- 无法找到软件包Telerik.Documents.SpreadsheetStreaming
- 无法为属性“Localizer”提供值
- 缓慢的性能
- JavaScript错误
- 部署后注意事项
- 内容安全策略
- NuGet Feed故障处理
- 上传故障排除
弹出窗口不起作用
这有三个常见的原因
- 失踪
< TelerikRootComponent >
从应用程序。 - 缺少JS互操作文件
- 特殊定位
<应用>
元素。
的<应用>
元素是开发人员在Blazor中可以访问的最顶层组件。这意味着我们不能将我们的弹出框放置在高于DOM的位置。因此,它们的位置和可见度取决于它们的位置<应用>
元素的位置匹配身体< >
元素。
默认的应用模板有位置:相对
规则应用程序
元素,可以破坏我们的弹出框的外观和位置(在Firefox中最明显)。解决的办法是去掉这种特殊的定位。例如,修改默认值site.css
像这样的文件:
App{/*删除这一行*/ /*位置:相对;*/ /*如果你仍然遇到这个问题,试着删除这些行,并确保应用元素的定位与body元素匹配并且是可见的*/ display: flex;flex-direction:列;}
错误的弹出位置
弹出窗口(窗口,各种下拉菜单,如下拉列表,组合框,日期picker)的位置可能是错误的或偏移。
这种问题最常见的原因是< TelerikRootComponent >
不匹配身体< >
浏览器视窗——这是必需的,因为该组件是我们的组件可以访问的最顶层的元素,以便呈现弹出/下拉窗口。
出现这种不匹配的常见情况有以下几种:
的位置和大小
<应用>
元素(或者你的Blazor应用的根组件被调用)不匹配身体< >
。不止一个
< TelerikRootComponent >
(例如,某个Razor组件有它自己的组件)。应该只有一个实例——要么在MainLayout
,或在单独的布局文件中,该文件在MainLayout
。为了更好地分离关注点,我们推荐第二种选择。CSS相关案例:
有一些CSS规则可以抵消
<应用>
元素或它的父元素(例如位置:绝对的
或保证金:汽车
或者将其放在某种形式的弹出框中,比如jQuery对话框)。默认的
保证金
的身体
元素(例如Bootstrap引入的元素)不会被删除。有了这个保证金就可以玩了身体< >
和浏览器视窗不完全匹配,teleerik弹出框可能会被空白的值所取代。这种情况下的解决方案是使用如下规则删除它正文{边距:0;}
,因此弹出框被正确放置。有一些CSS规则可以改变Telerik弹出元素中使用的元素或类的定位。
您可以检查应用程序是否存在此类问题,并确保<应用>
元素的大小和位置与身体< >
还有浏览器视窗,那就是< TelerikRootComponent >
的直接子<应用>
元素并将@Body
在主布局中。
无法找到软件包Telerik.Documents.SpreadsheetStreaming
方法还原包或构建解决方案时Telerik.UI.for.Blazor
NuGet包,你可能会得到一个类似的错误
无法找到软件包Telerik.Documents.SpreadsheetStreaming。在源代码Microsoft Visual Studio Offline packages、nuget.org、Telerik、myofflineppackages中不存在带有此id的包
的Telerik.Documents.SpreadsheetStreaming
包在内部用于导出,主包引用它。它也可以从我们的在线订阅中获得,它在dpl
离线安装的文件夹。
看到此错误(无法恢复此特定包)的最常见原因和解决方案是:
正在使用的脱机包源不包含该包。确保添加了来自
包
和dpl
文件夹到这样的自定义本地提要。连接到我们的在线信息流有一个问题。例如,防火墙、网络停机或使用了错误的凭据。检查故障排除NuGet Feed问题节,以了解如何处理该问题。
当Visual Studio“将警告视为错误”设置打开时,可用于恢复的版本和引用的版本之间存在不匹配。如果引用了一个版本,但另一个版本可用(例如,只有某些版本在自定义本地提要中可用),则会发生这种情况文档处理包,但主包引用旧版本)。在这种情况下,工具通常会解决最新的版本,但它会显示一个警告,VS可以将其视为一个错误,不让你构建。解决方案是检查所引用的版本
Telerik.UI.for.Blazor
并确保你可以访问它。清理解决方案、手动恢复软件包和重新构建也会有所帮助。
无法为属性“Localizer”提供值
如果你得到类似这样的错误:
无法为类型telerikblazor . components . telerikmenu [[TelerikBlazorApp1.Models.]提供属性'Localizer'值。MenuItem, TelerikBlazorApp1, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]]。没有类型为'Telerik.Blazor.Services.ITelerikStringLocalizer'的万博体育手机版网址注册服务。
这个问题可能有两个常见原因:
Telerik服务没有在万博体育手机版网址应用程序上注册,这条线类似于
万博体育手机版网址services.AddTelerikBlazor ();
不见了。你可以阅读更多关于你需要在哪里添加你需要什么-项目配置文章部分。应用程序使用本地化,或者有一个代码片段这样做(例如,一个带有自定义按钮的网格被本地化,从另一个地方复制过来),但当前的应用程序没有提供必要的项目特定服务。您可以在本地化篇文章。
缓慢的性能
在构建Blazor应用程序时,特别是在WebAssembly风格上,当您向项目中添加Telerik Grid时,您可能会第一次拥有大量数据集和复杂的交互。所以,这看起来像是来自电网的减速,但事实并非如此,有几个重要因素在起作用:
是否构建WebAssembly应用
调试
或释放
模式对其性能有很大的影响。要想知道你的用户会看到什么,就要把你的应用建进去释放
模式。默认为调试
当你在开发它的时候。遵循微软的最佳实践来优化Blazor WebAssembly的总体性能。WebAssembly仍然比服务器端Blazor慢得多,微软正在努力解决这个问题。
- 该框架应该带来的第一个重大改进是AOT编译(提前编译),当它可用时,电网应该立即从中受益。另一个可以提高性能的特性是实际的多线程。
Telerik组件的性能非常接近纯HTML元素呈现,特别是考虑到它们添加的所有附加功能、事件和漂亮的呈现。
一般来说,web应用程序也应该采取某些措施来提高其性能。例如:
启用分页或虚拟滚动在网格中,并使用合理的页面大小(例如,10到20或40,因为屏幕上几乎不可能容纳超过20个项目)。另外,如果您有很多列,请启用列虚拟化。
避免一次加载所有数据,只加载和渲染相关的块。例如,使用网格的OnRead事件为网格执行所有操作,并使用在组合框中通过自己的OnRead事件进行自定义过滤。这也适用于在您自己的列表中创建许多组件
foreach
循环——考虑实现你自己的虚拟滚动或使用Telerik寻呼机帮你把它们分成更小的组。当在页面上使用一系列您自己的组件时,请考虑覆盖它们
ShouldRender
方法,以便它们仅在需要时呈现。例如,EventCallback
其处理程序是异步任务
将渲染它自己的组件,它的父组件和兄弟组件两次,你可以把它减少到一次。按需加载内容(比如单元格值)应该通过嵌套组件及其组件来完成
OnParemetersSetAsync
方法。中提供了一个类似的示例根据需要加载工具提示内容和按需加载层次结构数据示例项目。你不应该在组件中使用异步方法模板
(或任何RenderFragment
),因为在片段渲染之前,框架会等待它们的执行(模板
和RenderFragment
实例基本上是同步的)。如果需要生成文档或准备一些数据,请尝试将此任务卸载给服务器。您可以创建HTTP请求并收集处理后的信息。使用这种方法,您将获得更好的服务器端性能,并且不需要在客户端下载所有数据。可以找到该方法的示例在服务器上将网格导出为PDF示例项目。