渲染模式

一些Telerik控件支持不同的呈现模式。他们可以改变实际超文本标记语言是为了方便使用而创建的CSS3、语义标签和现代蒙皮机制。这是通过他们来控制的RenderMode财产。

本文包含以下部分:

• 渲染模式
  • RenderMode选项
  • 渲染模式回退顺序
    • 经典RenderMode
    • 轻量级RenderMode
    • 移动RenderMode
    • 汽车RenderMode
  • 设置渲染模式
• 另请参阅

RenderMode选项

• 经典—默认值。它保留了以前使用过的原始呈现和样式，这通常意味着要使用许多表来创建布局，这导致了可以避免的嵌套元素和一些标记。

  经典渲染模式自2015年第三季度以来一直处于维护模式，只提供了关键的bug修复。所有的新功能，控制和功能都是为现代轻量级和移动渲染模式开发的。

• 轻量级-这种模式强调语义HTML和CSS3。它减少了控件呈现的标记量(包括嵌套元素的深度)，并使其更容易定制。这也减少了控件使用的图像精灵的数量，以及每个皮肤(包括自定义皮肤)的总体大小和复杂性。

• 移动这个模式是对Telerik控件的自适应渲染的一个补充。它的目的是根据显示控件的设备使用最好的HTML。这种模式强制布局，以适应触摸环境的需要。该模式的区别如下:

  • 更大的内容文本适用于屏幕较小的设备，这提高了用户的可读性体验;

  • 更大尺寸的按钮，触摸手柄等，更容易互动;

  • 更大的按钮，触摸手柄等更容易交互;

• 汽车-此模式使每个控件根据所使用的浏览器选择适当的呈现模式-经典，轻量级或移动.受影响的控件的行为也取决于可用的渲染模式，例如在触摸设备中，模式将自动更改为移动，如果支持。如果不是，该模式将退回，直到遇到适合环境的最佳模式。该功能是在2013年第三季度添加的。

  为了使自动RenderMode检测工作，您的项目必须引用Telerik.Web.Device.Detection.dll组装．

控件中支持替代呈现模式的控件列表渲染模式列表帮助文章。

渲染模式冲突(“混合渲染模式”)

对于每种控件类型，每页只支持一种呈现模式。否则，会出现渲染模式冲突，导致控件外观失真。

渲染模式由样式集应用。因此，如果同一个控件的多个实例被设置为在同一页面上使用不同的渲染模式，将导致样式冲突。多个渲染模式将尝试对同一元素应用不同的样式，这将导致外观问题。

直接违反这一规则是很容易确定和避免的:例如，页面上的所有RadButton控件必须有相同的值设置为RenderMode属性。这包括母版页、内容页和用户控件的实例。

如果在母版页上有一个在轻量级渲染模式下的RadButton，在内容页上有一个在经典渲染模式下的RadButton，这两个RadButton控件都会为其渲染模式加载样式，这就是你如何得到混合渲染模式问题。

间接渲染模式冲突:

一些Telerik控件是由多个嵌入式子控件组成的复杂组件。这可能是一个混合渲染的原因，即使在它的表面上，只有一个特定的控制实例。

让我们用一个例子来说明这一点:

如果你在轻量级渲染模式下有一个RadButton，在经典渲染模式下有一个RadMenu，就不会有冲突的控制，因此没有问题。

如果你有一个轻量级的RadGrid和一个经典渲染模式的RadMenu，那么就会有一个问题。为什么?因为RadGrid是一个复杂控件，并且有一个RadMenu作为子控件。这意味着你将有一个RadGrid和一个RadMenu(网格的子)在轻量级渲染模式和独立的RadMenu在经典渲染模式。每个RadMenu都将加载其渲染模式的样式，这就是你如何得到混合渲染模式问题。

若要确定页面上的混合呈现模式问题并避免此问题，请查看确定所有Telerik控件的呈现模式并捕获混合呈现模式问题KB文章。

渲染模式回退顺序

在某些情况下，为RenderMode设置一个值可能会导致控件使用另一个模式。这受到用于请求页面的浏览器的UserAgent字符串的影响。下面列出了各种可能性，以及你如何影响或预测它们。

经典RenderMode

如果显式设置此模式，它将永远不会更改。它总是可用的最后一个备用选项。

轻量级RenderMode

该模式针对现代浏览器(IE8+， Chrome, Firefox, Edge)。如果请求浏览器是IE7，控件将退回到经典渲染模式。如果IE在兼容模式下运行，这种情况经常发生。

在R3 2017中，你可以通过添加X-UA兼容带有值的头文件IE =边缘对于回应:

<系统。webServer>       . add name="X-UA-Compatible" value="IE=Edge

响应。一个ddHeader("X-UA-Compatible", "IE=Edge");

移动RenderMode

如果控件不支持此模式，它将尝试使用轻量级模式。

当显式设置时，此模式甚至将用于非移动浏览器。在这种情况下，建议使用“自动”模式，因为“移动”模式仅在移动设备下进行测试和支持。

汽车RenderMode

这种模式尝试回到…轻量级在大多数情况下。例外情况如下:

• 请求浏览器是IE7，控件的版本比R1 2017和X-UA兼容带有值的头文件IE =边缘没有设置。在这种情况下，它将回落到经典。

• 请求浏览器被标识为移动浏览器，具体控件提供特定于移动的呈现。在这种情况下，它将回到莫比尔。

设置渲染模式

有两种方法来设置RenderMode每一个Telerik控制：

• 使用RenderMode财产每个控件都公开。当在标记中设置时，您可以输入字符串，当在代码中设置时，它接受Telerik.Web.UI.RenderMode枚举。例如:

  ASP。网

• 一个web.config中的全局设置文件，该文件将影响整个应用程序，除非为给定的控制实例指定了具体的值:

  • 更改渲染模式所有控件在应用中

    . config

  • 的渲染模式更改给定控制类型：

    . config

    在哪里菜单可以替换为任何控件名，没有Rad．

另请参阅

• 支持可选渲染模式的控件列表

• Telerik®UI for ASP。净AJAX轻量级Rendering – Going deeper into HTML semantics and CSS3

• 轻渲染的攻击或轻量级如何击败重量级的CSS3和HTML5

• 确定所有Telerik控件的呈现模式并捕获混合呈现模式问题