目录
服务器端编程
属性和事件
RadButton常用功能(属性)
PROPERTY | DESCRIPTION |
---|---|
ButtonType | 获取或设置按钮的类型。存在以下类型:StandardButton(默认)、LinkButton、ToggleButton。每个 ButtonType 都提供了某些独特的功能。可以在每个按钮类别中找到有关不同按钮类型功能的更多信息。 |
AutoPostBack | 获取或设置一个布尔值,该值指示控件是否会自动将页面发送回服务器。 |
CausesValidation | 获取或设置一个布尔值,该值指示单击 RadButton 时是否执行验证。 |
Primary | 获取或设置一个布尔值,该值指示按钮是否使用其主要外观。 |
PostbackUrl | 当单击 RadButton 时,获取或设置要从当前页面发布到的页面的 URL。 |
Text | 获取或设置显示在 RadButton 控件中的文本。 |
ValidationGroup | 获取或设置一组控件,当 RadButton 控件回发到服务器时,它会对其进行验证。 |
CommandName | 获取或设置与传递给Command事件的 RadButton 控件关联的命令名称。 |
CommandArgument | 获取或设置与关联的 CommandName 一起传递给Command事件的可选参数。 |
HoveredCssClass | 当鼠标指针悬停在 RadButton 控件上时,获取或设置 CSS 类。 |
PressedCssClass | 当按下 RadButton 控件时,获取或设置 CSS 类。 |
OnClientLoad | 设置将在页面上加载 RadButton 时调用的 JavaScript 函数的名称 |
OnClientClicking | 设置单击 RadButton 时将调用的 JavaScript 函数的名称。活动可以取消。 |
OnClientClicked | 设置在 OnClientClicking 事件之后单击 RadButton 时将调用的 JavaScript 函数的名称。 |
OnClientMouseOver | 设置当鼠标指针悬停在 RadButton 上时将调用的 JavaScript 函数的名称 |
OnClientMouseOut | 设置当鼠标指针离开 RadButton 时将调用的 JavaScript 函数的名称 |
OnClientCheckedChanged | 设置将在 RadButton 的鼠标 Checked 属性更改时调用的 JavaScript 函数的名称 |
OnClientToggleStateChanging | 设置将在 RadButton 的切换状态更改时调用的 JavaScript 函数的名称。该事件是可取消的,当取消时,不会引发OnClientCheckedChanged和OnClientToggleStateChanged 。 |
OnClientToggleStateChanged | 设置在OnClientToggleStateChanging事件之后,当 RadButton 的切换状态发生更改时将调用的 JavaScript 函数的名称。 |
图标特定功能(属性)
PROPERTY | DESCRIPTION |
---|---|
ShowPrimaryIcon | 获取或设置一个布尔值,该值指示 RadButton 是否将显示主图标。 |
ShowSecondaryIcon | 获取或设置一个布尔值,指示 RadButton 是否将显示 |
PrimaryIconUrl | 获取或设置用作主图标的图像的 URL。 |
PrimaryHoveredIconUrl | 获取或设置主图标悬停时显示的图像的 URL |
PrimaryPressedIconUrl | 获取或设置按下主图标时显示的图像的 URL |
PrimaryIconHeight | 获取或设置主图标的高度 |
PrimaryIconWidth | 获取或设置主图标的宽度 |
PrimaryIconCssClass | 获取或设置应用于主图标的 CSS 类。 |
SecondaryIconUrl | 获取或设置用作辅助图标的图像的 URL |
SecondaryHoveredIconUrl | 获取或设置第二图标悬停时显示的图像的 URL |
SecondaryPressedIconUrl | 获取或设置按下辅助图标时显示的图像的 URL |
SecondaryIconHeight | 获取或设置辅助图标的高度 |
SecondaryIconWidth | 获取或设置辅助图标的宽度 |
SecondaryIconCssClass | 获取或设置应用于辅助图标的 CSS 类。 |
PrimaryIconTop | 获取或设置主图标的上边缘,相对于 RadButton 控件的包装元素 |
PrimaryIconLeft | 获取或设置主图标的左边缘,相对于 RadButton 控件的包装元素 |
PrimaryIconRight | 获取或设置主图标的右边缘,相对于 RadButton 控件的包装元素 |
PrimaryIconBottom | 获取或设置主图标的底部边缘,相对于 RadButton 控件的包装元素 |
SecondaryIconTop | 获取或设置辅助图标的上边缘,相对于 RadButton 控件的包装元素 |
SecondaryIconLeft | 获取或设置辅助图标的左边缘,相对于 RadButton 控件的包装元素 |
SecondaryIconRight | 获取或设置辅助图标的右边缘,相对于 RadButton 控件的包装元素 |
SecondaryIconBottom | 获取或设置辅助图标的底部边缘,相对于 RadButton 控件的包装元素 |
图像特定特征(属性)
PROPERTY | DESCRIPTION |
---|---|
IsBackgroundImage | 获取或设置一个布尔值,指示如何使用图像 - 即作为背景图像或图像按钮。 |
ImageUrl | 获取或设置用作按钮的图像的 URL。 |
HoveredImageUrl | 获取或设置 RadButton 悬停时显示的图像的 URL |
PressedImageUrl | 获取或设置按下 RadButton 时显示的图像的 URL |
EnableImageButton | 获取或设置一个布尔值,该值指示 RadButton 是否呈现为图像按钮 |
SplitButton特定功能(属性)
PROPERTY | DESCRIPTION |
---|---|
EnableSplitButton | 获取或设置一个布尔值,该值指示是否将启用 SplitButton 功能 |
SplitButtonPosition | 获取或设置 SplitButton 相对于主按钮(左或右)出现的位置。位置:右(默认),左 |
SplitButtonCssClass | 获取或设置应用于 SplitButton 的 CSS 类 |
类型:按钮特定功能(属性)
PROPERTY | DESCRIPTION |
---|---|
UseSubmitBehavior | 获取或设置一个布尔值,该值指示 RadButton 控件是使用客户端浏览器的提交机制还是 ASP.NET 回发机制。 |
类型:LInkButton特定功能(属性)
PROPERTY | DESCRIPTION |
---|---|
NavigateUrl | 获取或设置要导航到的页面的 URL,而不会将页面发回服务器。设置此属性时,按钮将呈现为(锚)元素。 |
Target | 获取或设置在单击 RadButton 控件时显示链接到的网页内容的目标窗口或框架。 |
类型:ToggleButton特定功能(属性)
PROPERTY | DESCRIPTION |
---|---|
ToggleType | 获取或设置切换按钮的类型。共有三种切换类型:None(默认)、Radio、CheckBox、CustomToggle |
GroupName | 在 ToggleType: Radio 时有效。获取或设置单选按钮所属组的名称。 |
Checked | 获取或设置一个布尔值,该值指示是否选中了 RadButton 控件。在 ToggleButton 具有多于 2(两个)状态的情况下,在 RadButton 的当前状态为 First 状态的情况下不检查控件,在所有其他情况下为 Checked。 |
SelectedToggleState | 获取或设置 RadButton 的当前状态。 |
SelectedToggleStateIndex | 当用作自定义切换按钮时,获取或设置 RadButton 控件当前选定的 ToggleState 的索引。 |
ToggleStates | RadButtonToggleState的集合。不同的状态是通过状态集合来控制的。集合最多可以包含四个状态。切换状态的顺序由集合中状态出现的从 0 开始的位置索引确定。因此,ToggleStates 中的第一项是第一个状态,第二项是第二个状态,依此类推。当 ToggleType 为 Radio 或 CheckBox 时,ToggleStates 的第一项(状态)用作 RadButton 的备用状态。 |
RadButtonToggleState特定功能(属性)
PROPERTY | DESCRIPTION |
---|---|
Text | 获取或设置显示在 RadButton 控件中的文本 |
Selected | 获取或设置一个布尔值,该值指示是否选择了 ToggleState |
CssClass | 获取或设置应用于 RadButton 控件的 CSS 类 |
HoveredCssClass | 获取或设置当鼠标指针悬停在控件上时应用于 RadButton 控件的 CSS 类 |
PressedCssClass | 获取或设置在按下控件时应用于 RadButton 控件的 CSS 类 |
Width | 获取或设置 RadButton 控件的宽度 |
Height | 获取或设置 RadButton 控件的高度 |
PrimaryIconUrl | 获取或设置用作主图标的图像的 URL |
PrimaryHoveredIconUrl | 获取或设置主图标悬停时显示的图像的 URL |
PrimaryPressedIconUrl | 获取或设置按下主图标时显示的图像的 URL |
PrimaryIconHeight | 获取或设置主图标的高度 |
PrimaryIconWidth | 获取或设置主图标的宽度 |
PrimaryIconCssClass | 获取或设置应用于主图标的 CSS 类 |
SecondaryIconUrl | 获取或设置用作主图标的图像的 URL |
SecondaryHoveredIconUrl | 获取或设置主图标悬停时显示的图像的 URL |
SecondaryPressedIconUrl | 获取或设置按下主图标时显示的图像的 URL |
SecondaryIconHeight | 获取或设置主图标的高度 |
SecondaryIconWidth | 获取或设置主图标的宽度 |
SecondaryIconCssClass | 获取或设置应用于主图标的 CSS 类 |
PrimaryIconTop | 获取或设置主图标的上边缘,相对于 RadButton 控件的包装元素 |
PrimaryIconLeft | 获取或设置主图标的左边缘,相对于 RadButton 控件的包装元素 |
PrimaryIconRight | 获取或设置主图标的右边缘,相对于 RadButton 控件的包装元素 |
PrimaryIconBottom | 获取或设置主图标的底部边缘,相对于 RadButton 控件的包装元素 |
SecondaryIconTop | 获取或设置辅助图标的上边缘,相对于 RadButton 控件的包装元素 |
SecondaryIconLeft | 获取或设置辅助图标的左边缘,相对于 RadButton 控件的包装元素 |
SecondaryIconRight | 获取或设置辅助图标的右边缘,相对于 RadButton 控件的包装元素 |
SecondaryIconBottom | 获取或设置辅助图标的底部边缘,相对于 RadButton 控件的包装元素 |
ImageUrl | 获取或设置用作按钮的图像的 URL |
HoveredImageUrl | 获取或设置 RadButton 悬停时显示的图像的 URL |
IsBackgroundImage | 获取或设置一个布尔值,指示如何使用图像 - 即作为背景图像或图像按钮 |
服务器端事件
PROPERTY | DESCRIPTION |
---|---|
OnClick | 单击 RadButton 时引发。(自动回发=真) |
OnCommand | 当 RadButton 指定了 Command 时引发。 |
OnCheckedChanged | 当带有 ButtonType:ToggleButton 的 RadButton 的 Checked 属性发生更改时引发 |
OnToggleStateChanged | 当带有 ButtonType:ToggleButton 的 RadButton 的 State 属性发生更改时引发 |
方法
类型:ToggleButton具体方法
PROPERTY | DESCRIPTION |
---|---|
FindToggleStateByText | 通过其Text属性的值查找 RadButton 的 ToggleState 。采用String类型的单个参数,该参数指定 ToggleState 的文本。 |
FindToggleStateByValue | 通过其Value属性的值查找 RadButton 的 ToggleState 。采用String类型的单个参数,该参数指定 ToggleState 的值 |
SetSelectedToggleStateByText | 通过提供的文本设置选定状态。如果多个 ToggleState 具有相同的文本,则将选择第一个。如果未注册具有提供文本的 ToggleState,则不会更改当前 ToggleState。采用String类型的单个参数,该参数指定要选择的 ToggleState 的文本 |
SetSelectedToggleStateByValue | 通过提供的值设置选定的状态。如果多个 ToggleStates 具有相同的值,则将选择第一个。如果未注册具有提供值的 ToggleState,则不会更改当前 ToggleState。采用String类型的单个参数,该参数指定要选择的 ToggleState 的值 |
客户端编程
概述
RadButton提供了一个灵活的客户端 API。可以使用 RadButton 客户端对象轻松地与浏览器中的按钮进行交互。除了各种客户端事件之外,客户端对象模型还可以让您完成复杂的任务,同时避免不必要的回发。
获取RadButton客户端对象
RadButton使用按钮的ClientID创建一个客户端对象。可以使用以下 JavaScript 代码获取参考:
var button = $find("<%= RadButton1.ClientID %>");
var button = $telerik.findButton("<%= RadButton1.ClientID %>");
客户端对象模型
Telerik RadButton在客户端提供以下对象
EVENTS AND PROPERTIES | DESCRIPTION |
---|---|
.add_load() | 控件加载时调用的 javascript 函数的名称 |
.remove_load() | 删除加载事件的处理程序 |
.add_clicking() | 单击 RadButton 控件时调用的 javascript 函数的名称 |
.remove_clicking() | 删除单击事件的处理程序 |
.add_clicked() | 单击 RadButton 控件时调用的 javascript 函数的名称 |
.remove_clicked() | 删除单击事件的处理程序 |
.add_mouseOver() | 当鼠标悬停在控件上时调用的 javascript 函数的名称 |
.remove_mouseOver() | 删除 mouseOver 事件的处理程序。 |
.add_mouseOut() | 鼠标离开控件时 javascript 函数的名称 |
.remove_mouseOut() | 删除 mouseOut 事件的处理程序 |
.add_checkedChanging() | 即将更改 RadButton 控件的 Checked 属性时调用的 javascript 函数的名称 |
.remove_checkedChanging() | 删除 checkedChanging 事件的处理程序 |
.add_checkedChanged() | 更改 RadButton 控件的 Checked 属性后调用的 javascript 函数的名称。 |
.remove_checkedChanged() | 删除 checkedChanged 事件的处理程序 |
.add_toggleStateChanging() | 将要更改 RadButton 控件的 SelectedToggleStateIndex 属性时调用的 javascript 函数的名称 |
.remove_toggleStateChanging() | 删除 toggleStateChanging 事件的处理程序 |
.add_toggleStateChanged() | 在 RadButton 控件的 SelectedToggleStateIndex 属性更改后调用的 javascript 函数的名称 |
.remove_toggleStateChanged() | 删除 toggleStateChanged 事件的处理程序 |
.clearCheckedRadios() | 清除具有指定 GroupName 的单选按钮的选中状态 |
.focus() | 将焦点带到 RadButton 控件 |
.click() | 执行程序化按钮单击。接受一个可选的布尔参数,该参数指定当以编程方式单击控件时是否会触发 RadButton的客户端单击事件。如果没有参数调用该函数,则不会触发 click 事件。 |
.get_enabled() | 返回一个值,指示是否启用按钮控件 |
.set_enabled() | 设置按钮是否启用。将 true 参数设置为启用,或设置为 false 以禁用按钮 |
.get_readOnly() | 返回一个值,指示按钮控件是否处于只读模式。 |
.set_readOnly() | 设置一个值,指示按钮控件是否处于只读模式。 |
.get_text() | RadButton 控件中显示的文本 |
.set_text() | 设置显示在 RadButton 控件中的文本 |
.get_toolTip() | 获取当鼠标指针悬停在 RadButton 控件上时显示的文本 |
.set_toolTip() | 设置当鼠标指针悬停在 RadButton 控件上时显示的文本 |
.get_uniqueID() | 获取 RadButton 控件的唯一、分层限定标识符。 |
.get_checked() | 获取一个布尔值,该值指示是否选中了 RadButton 控件 |
.set_checked() | 设置一个布尔值,指示是否选中 RadButton 控件。 |
.get_buttonType() | 获取按钮的类型 |
.get_toggleType() | 获取 RadButton 用作切换按钮时的切换类型。 |
.get_target() | 获取在单击 RadButton 控件时显示链接到的网页内容的目标窗口或框架。此属性特定于配置为LinkButton ( ButtonType ="LinkButton" ) 的 RadButton |
.set_target() | 设置在单击 RadButton 控件时显示链接到的网页内容的目标窗口或框架。此属性特定于配置为LinkButton ( ButtonType ="LinkButton" ) 的 RadButton |
.get_navigateUrl() | 获取单击 RadButton 控件时要链接到的 URL。此属性特定于配置为LinkButton ( ButtonType ="LinkButton" ) 的 RadButton |
.set_navigateUrl() | 设置单击 RadButton 控件时要链接到的 URL。此属性特定于配置为LinkButton ( ButtonType ="LinkButton" ) 的 RadButton |
.get_primaryIconElement() | 获取对包含主图标的 HTML 元素的引用 |
.get_secondaryIconElement() | 获取对包含辅助图标的 HTML 元素的引用 |
.get_textElement() | 获取对包含 RadButton 控件文本的 HTML 元素的引用 |
.get_cssClass() | 获取由客户端上的 RadButton 控件呈现的级联样式表 (CSS) 类 |
.get_disabledCssClass() | 获取禁用控件时应用的 CSS 类 |
.get_hoveredCssClass() | 获取当鼠标指针悬停在控件上时应用于 RadButton 控件的 CSS 类 |
.get_pressedCssClass() | 获取按下控件时应用于 RadButton 控件的 CSS 类。 |
.get_commandName() | 获取与传递给 Command 事件的 RadButton 控件关联的命令名称 |
.set_commandName() | 设置与传递给 Command 事件的 RadButton 控件关联的命令名称 |
.get_commandArgument() | 获取传递给 Command 事件的可选参数以及关联的 CommandName |
.set_commandArgument() | 设置传递给 Command 事件的可选参数以及关联的 CommandName |
.get_autoPostBack() | 获取一个 bool 值,该值指示 RadButton 控件在单击时是否自动回发到服务器 |
.set_autoPostBack() | 设置或设置一个布尔值,指示 RadButton 控件在单击时是否自动回发到服务器 |
.get_toggleStates() | 获取属于 RadButton 控件的 RadButtonToggleState 对象的集合 |
.get_selectedToggleState() | 当用作自定义切换按钮时,获取 RadButton 控件当前选定的 ToggleState |
.get_selectedToggleStateIndex() | 当用作自定义切换按钮时,获取 RadButton 控件当前选定的 ToggleState 的索引 |
.set_selectedToggleStateIndex() | 当用作自定义切换按钮时,设置 RadButton 控件当前选定的 ToggleState 的索引 |
.get_groupName() | 获取 ToggleType=Radio 的 RadButton 所属的组的名称 |
.get_height() | 获取 RadButton 控件的高度 |
.get_width() | 获取 RadButton 控件的宽度 |
.get_enableSplitButton() | 指定“拆分按钮”功能是否启用/禁用。 |
.IsImageButton() | 获取一个布尔值,指示按钮是否为图像按钮 |
.IsInputTypeSubmit() | 获取一个布尔值,指示按钮是否为提交按钮 |
.get_singleClick() | 获取一个 bool 值,指示 RadButton 控件在用户单击后是否立即禁用。(即启用/禁用“单击”功能) |
.get_singleClickText() | 获取单击和禁用按钮后显示在 RadButton 控件中的文本。(即用于“单击”功能的文本) |
.enableAfterSingleClick() | 通过单击禁用按钮后,启用按钮并恢复按钮的文本 |
.get_visible() | 获取一个布尔值,指示按钮是否可见 |
.set_visible() | 显示/隐藏按钮 |
.get_validationGroup() | 获取 RadButton 分配到的 ValidationGroup 的名称 |
.set_validationGroup() | 设置应分配 RadButton 的验证组 |
RadButtonToggleState
PROPERTIES | DESCRIPTION |
---|---|
.get_index() | 获取 ToggleStates 集合中 ToggleState 对象的从 0 开始的索引 |
.get_text() | 获取显示在 RadButton 控件中的文本 |
.get_cssClass() | 获取应用于 RadButton 控件的 CSS 类 |
.get_hoveredCssClass() | 获取当鼠标指针悬停在控件上时应用于 RadButton 控件的 CSS 类 |
.get_pressedCssClass() | 获取按下控件时应用于 RadButton 控件的 CSS 类 |
.get_height() | 获取 RadButton 控件的高度 |
.get_width() | 获取 RadButton 控件的宽度 |
.get_primaryIconCssClass() | 获取应用于主图标的 CSS 类 |
.get_primaryIconUrl() | 获取用作主图标的图像的 URL |
.get_primaryHoveredIconUrl() | 获取主图标悬停时显示的图像的 URL |
.get_primaryPressedIconUrl() | 获取按下主图标时显示的图像的 URL |
.get_primaryIconHeight() | 获取主图标的高度 |
.get_primaryIconWidth() | 获取主图标的宽度 |
.get_primaryIconTop() | 获取主图标的上边缘,相对于 RadButton 控件的包装元素 |
.get_primaryIconLeft() | 获取主图标的左边缘,相对于 RadButton 控件的包装元素 |
.get_primaryIconBottom() | 获取主图标的底部边缘,相对于 RadButton 控件的包装元素 |
.get_primaryIconRight() | 获取主图标的右边缘,相对于 RadButton 控件的包装元素 |
.get_secondaryIconCssClass() | 获取应用于辅助图标的 CSS 类 |
.get_secondaryIconUrl() | 获取用作辅助图标的图像的 URL |
.get_secondaryHoveredIconUrl() | 获取第二图标悬停时显示的图像的 URL |
.get_secondaryPressedIconUrl() | 获取按下辅助图标时显示的图像的 URL |
.get_secondaryIconHeight() | 获取辅助图标的高度。 |
.get_secondaryIconWidth() | 获取辅助图标的宽度 |
.get_secondaryIconTop() | 获取辅助图标的上边缘,相对于 RadButton 控件的包装元素 |
.get_secondaryIconLeft() | 获取辅助图标的左边缘,相对于 RadButton 控件的包装元素 |
.get_secondaryIconBottom() | 获取辅助图标的底部边缘,相对于 RadButton 控件的包装元素 |
.get_secondaryIconRight() | 获取辅助图标的右边缘,相对于 RadButton 控件的包装元素 |
.get_isBackgroundImage() | 获取一个布尔值,指示如何使用 iImage - 即作为背景图像或作为图像按钮 |
.get_imageUrl() | 获取要在 RadButton 控件中显示的图像的位置 |
.get_hoveredImageUrl() | 当鼠标指针悬停在控件上时,获取要在 RadButton 控件中显示的图像的位置 |
.get_pressedImageUrl() | 获取按下控件时要在 RadButton 控件中显示的图像的位置 |
RadButton客户端事件
RadButton 公开了几个客户端事件,允许在广泛的应用场景中轻松灵活地使用:
OnClientLoad (load) - 在控件初始化时引发。
OnClientClicking(clicking) - 当用户点击按钮时引发。活动可以取消。
OnClientClicked (clicked) - 单击按钮时引发。该事件在OnClientClicking事件之后。
OnClientMouseOver (mouseOver) - 当鼠标悬停在控件上时引发。
OnClientMouseOut (mouseOut) - 当鼠标离开控件时引发。
OnClientCheckedChanging (checkedChanging) - 当 RadButton 控件的Checked属性即将更改时引发。活动可以取消。
OnClientCheckedChanged (checkedChanged) - 在 RadButton 控件的Checked属性更改后引发。
OnClientToggleStateChanging (toggleStateChanging) - 引发了即将更改的 RadButton 控件的SelectedToggleStateIndex属性。活动可以取消。
OnClientToggleStateChanged (toggleStateChanged) - 在RadButton控件的SelectedToggleStateIndex属性更改后引发。
可以在服务器和客户端上设置任何事件的事件处理程序方法。
服务器端
要处理所需的事件,用户必须将相应的属性设置为处理事件的 JavaScript 函数的名称或匿名 JavaScript 函数。这是一个例子:
- 传递命名(非匿名)JavaScript 函数
<script type="text/javascript">
function Click(sender, args)
{
alert("RadButton was clicked.");
}
</script>
<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" OnClientClicked="Click">
</telerik:RadButton>
RadButton1.OnClientClicked = "Click"; //passing the name of the JS function
- 传递匿名 JavaScript 函数
<script type="text/javascript">
function Click(button, args, arg1, arg2)
{
alert("arg1:" + arg1 + " arg2:" + arg2);
}
</script>
<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" OnClientClicked="function(sender,args){Click(sender, args, 'Value1', 'Value2');}">
</telerik:RadButton>
RadButton1.OnClientClicked = "function(sender,args){Click(sender, args, 'Value1', 'Value2');}"; //passing the name of the JS function
客户端
要处理所需的事件,用户应使用相应的add_(处理函数)附加所需的处理程序(即add_clicked用于单击事件),其中参数handlerFunction应该是function类型。要删除之前添加的处理程序,相应的remove_(处理函数)应该使用。
这是一个显示如何在客户端上添加处理程序的示例:
- 添加命名(非匿名)JavaScript 函数
<script type="text/javascript">
function Click(button, args)
{
alert("Button was clicked");
}
function addHandler()
{
var button = $find("<%=RadButton1.ClientID %>");
button.add_clicked(Click);
}
</script>
- 添加匿名 JavaScript 函数
<script type="text/javascript">
function Click(button, args, arg1)
{
alert("Button was clicked. arg1: " + arg1);
}
function addHandler()
{
var button = $find("<%=RadButton1.ClientID %>");
button.add_clicked(function (button, args) { Click(button, args, "Value1") });
}
</script>
OnClientCheckChanged
checkedChanged事件在 RadButton 的 Checked 属性更改后触发,并且在checkedChanging事件 (OnClientCheckedChanging) 之后。仅当ToggleType属性设置为 [Telerik.Web.UI] 时才会触发该事件。ButtonToggleType.CheckBox或ButtonToggleType.Radio即当控件用作 RadioButton 或 CheckBox 时。用户无法取消该事件。
事件处理程序接收两个参数:
-
单击的 RadButton 控件的实例
-
Telerik.Web.UI 类型的 eventArgs 参数。RadButtonCheckedEventArgs,包含以下属性和方法:
- get_checked() - 返回一个布尔值,指示按钮是否被选中。
- get_toggleType () - 返回 RadButton 的 ButtonToggleType。它可以是ButtonToggleType.CheckBox或ButtonToggleType.Radio。
- get_commandName() - 返回分配给 RadButton 的CommandName属性的值。
- get_commandArgument() - 返回分配给 RadButton 的CommandArgument属性的值。
当用户想要在按钮更改其选中状态时执行自定义客户端代码时,此事件很有用。例如,下面的代码在按钮被选中时显示一个 RadWindow 控件,而在未选中时隐藏它。
<script type="text/javascript">
function ShowHideWindow(sender, args)
{
var oWnd = $find("<%=RadWindow1.ClientID %>");
if (args.get_checked())
{
oWnd.show();
}
else
{
oWnd.hide();
}
}
</script>
<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Show/Hide Window" ToggleType="CheckBox"
ButtonType="ToggleButton" OnClientCheckedChanged="ShowHideWindow" AutoPostBack="false">
</telerik:RadButton>
<telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" NavigateUrl="https://www.telerik.com">
</telerik:RadWindow>
OnClientCheckedChanging
checkedChanging事件在 RadButton 的 Checked 属性更改后触发,并且在checkedChanging事件 (OnClientCheckedChanging) 之后。仅当ToggleType属性设置为 [Telerik.Web.UI] 时才会触发该事件。ButtonToggleType.CheckBox或ButtonToggleType.Radio即当控件用作 RadioButton 或 CheckBox 时。用户无法取消该事件。
事件处理程序接收两个参数:
-
单击的 RadButton 控件的实例
-
Telerik.Web.UI 类型的 eventArgs 参数。RadButtonCheckedEventArgs,包含以下属性和方法:
- get_cancel() - 返回一个布尔值,指示事件是否被取消。True 表示事件被取消。
- set_cancel( shouldCancel ) - 设置一个布尔值,指示事件是否将被取消。设置为 true 意味着事件将被取消。
- get_toggleType () - 返回 RadButton 的 ButtonToggleType。它可以是ButtonToggleType.CheckBox或ButtonToggleType.Radio。
- get_commandName() - 返回分配给 RadButton 的CommandName属性的值
- get_commandArgument() - 返回分配给 RadButton 的CommandArgument属性的值。
此事件在用户希望确保仅在满足特定条件时才选中按钮(单选或复选框)的情况下很有用。请注意,如果按钮自动回发到服务器,这是默认行为,即使取消事件,回发也不会停止。
以下示例要求用户确认 CheckBox 的检查。代码如下:
<script type="text/javascript">
function CheckedChanging(sender, args)
{
args.set_cancel(!window.confirm("Are you sure you want to check the button?"));
}
</script>
<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Checkbox" ToggleType="CheckBox"
ButtonType="ToggleButton" OnClick="RadButton1_Click" OnClientCheckedChanging="CheckedChanging">
</telerik:RadButton>
protected void RadButton1_Click(object sender, System.EventArgs e)
{
RadButton1.Text = "RadButton.Checked=" + RadButton1.Checked.ToString();
}
OnClientClicking
单击 RadButton 控件时,即释放鼠标按钮后立即发生单击事件。该事件在客户端验证发生后触发,并且可以取消。
事件处理程序接收两个参数:
-
单击的 RadButton 控件的实例
-
Telerik.Web.UI 类型的 eventArgs 参数。RadButtonCancelEventArgs,包含以下属性和方法:
-
IsSplitButtonClick() - 返回一个布尔值,指示是否单击了拆分按钮或主按钮。True 表示单击了拆分按钮。
-
get_cancel() - 返回一个布尔值,指示事件是否被取消。True 表示事件被取消。
-
set_cancel( shouldCancel ) - 设置一个布尔值,指示事件是否将被取消。设置为 true 意味着事件将被取消。
-
get_commandName() - 返回分配给 RadButton 的CommandName属性的值
-
get_commandArgument() - 返回分配给 RadButton 的CommandArgument属性的值
-
当用户想要取消页面提交,或者基于特定条件阻止其他客户端事件的执行时,该事件会派上用场。一种这样的情况是确认页面已提交到服务器。我们询问用户是否要提交页面,如果收到否定答案,我们取消点击事件。这是代码:
<script type="text/javascript">
function Clicking(sender, args)
{
args.set_cancel(!window.confirm("Are you sure you want to submit the page?"));
}
</script>
<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Submit" OnClientClicking="Clicking" OnClick="RadButton1_Click">
</telerik:RadButton>
protected void RadButton1_Click(object sender, System.EventArgs e)
{
RadButton1.Text = "RadButton was clicked at: " + DateTime.Now.ToString();
}
OnClientClicked
clicked事件在click 事件之后,在单击RadButton 控件时发生。该事件在客户端验证完成后、页面提交之前触发,并且不能取消。
事件处理程序接收两个参数:
-
单击的 RadButton 控件的实例
-
Telerik.Web.UI 类型的 eventArgs 参数。RadButtonEventArgs,包含以下属性和方法:
-
IsSplitButtonClick () - 返回一个布尔值,指示是单击拆分按钮还是主按钮。True 表示单击了拆分按钮。
-
get_commandName() - 返回分配给 RadButton 的CommandName属性的值
-
get_commandArgument() - 返回分配给 RadButton 的CommandArgument属性的值
-
此事件应该用于用户需要在单击按钮时执行自定义客户端代码的场景。由于发生了验证,因此可以在执行任何客户端代码之前检查页面的有效性。这正是下面的示例所做的,它检查一个有效的 URL,如果输入了一个有效的 URL,它会在 RadWindow 控件中打开它。这是代码:
<script type="text/javascript">
function OpenWindow(sender, args)
{
if (Page_IsValid)
{
var RadWindow = $find("<%=RadWindow1.ClientID%>");
RadWindow.setUrl($get("Textbox1").value);
RadWindow.show();
}
else
{
alert("The page is not valid. Please enter a valid URL.");
}
}
</script>
<span>URL:</span>
<asp:TextBox ID="Textbox1" runat="server" />
<asp:RegularExpressionValidator ID="regNavaigateUrl" runat="server" ForeColor="Red"
ControlToValidate="Textbox1" ValidationGroup="UrlVG" SetFocusOnError="true"
ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?"
ErrorMessage="Valid URL should start with <strong>http://</strong>">
</asp:RegularExpressionValidator>
<br />
<telerik:radbutton id="RadButton1" runat="server" text="Open Window" onclientclicked="OpenWindow"
validationgroup="UrlVG" autopostback="false">
</telerik:radbutton>
<telerik:radwindow id="RadWindow1" runat="server">
</telerik:radwindow>
下面是如何从 eventArgs 参数获取 get_commandArgument() 方法的另一个代码示例:
<asp:ScriptManager runat="server" />
<script type="text/javascript">
function btnEdit_Clicking(sender, eventArgs) {
radconfirm("Are you sure?", confirmCallBackFn, 300, 150, null, eventArgs.get_commandArgument(), "myConfirmImage.png"); return false;
args.set_cancel(true);
}
function confirmCallBackFn(arg) {
radalert("Confirm returned the following result: " + arg);
return false;
}
</script>
<telerik:RadButton ID="RadButton2" AutoPostBack="false"
runat="server" Text="Click Me"
OnClientClicking="btnEdit_Clicking"
CommandArgument="RadConfirm Title">
</telerik:RadButton>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>
还可以使用以下代码行附加到客户端上 RadButton 的单击客户端事件:
button.add_clicked(function() { alert('You have attached to the clicked event of the button'); });
OnClientMouseOver
当用户将鼠标指针移到控件上时会触发mouseOver事件。
事件处理程序接收两个参数:
-
单击的 RadButton 控件的实例
-
Telerik.Web.UI 类型的 eventArgs 参数。RadButtonEventArgs,包含以下属性和方法:
-
get_commandName() - 返回分配给 RadButton 的CommandName属性的值
-
get_commandArgument() - 返回分配给 RadButton 的CommandArgument属性的值
-
<telerik:RadButton ID="RadButton1" runat="server" Text="Click me!" CommandName="SubmitForm"
CommandArgument="Arg1" OnClientMouseOver="onMouseOver">
</telerik:RadButton>
<script>
function onMouseOver(button, args) {
var commandName = args.get_commandName();
var commandArg = args.get_commandArgument();
var text = button.get_text();
alert("The mouse is over a button with \r\n Text: " + text + ", \r\n CommandName: " + commandName + ", \r\n CommandArgumen: " + commandArg);
}
</script>
OnClientMouseOut
当用户将鼠标指针移到控件上时会触发mouseOut事件。
事件处理程序接收两个参数:
-
单击的 RadButton 控件的实例
-
Telerik.Web.UI 类型的 eventArgs 参数。RadButtonEventArgs,包含以下属性和方法:
-
get_commandName() - 返回分配给 RadButton 的CommandName属性的值
-
get_commandArgument() - 返回分配给 RadButton 的CommandArgument属性的值
-
<telerik:RadButton ID="RadButton1" runat="server" Text="Click me!" CommandName="SubmitForm"
CommandArgument="Arg1" OnClientMouseOut="onMouseOut">
</telerik:RadButton>
<script>
function onMouseOut(button, args) {
var commandName = args.get_commandName();
var commandArg = args.get_commandArgument();
var text = button.get_text();
alert("The mouse went over a button with \r\n Text: " + text + ", \r\n CommandName: " + commandName + ", \r\n CommandArgumen: " + commandArg);
}
</script>
OnClientToggleStateChanging
在更改 RadButton的SelectedToggleState和SelectedToggleStateIndex属性之前触发toggleStateChanging事件。仅当ToggleType属性设置为 [Telerik.Web.UI] 时才会触发该事件。ButtonToggleType.CustomToggle。用户可以取消该事件。
事件处理程序接收两个参数:
-
单击的 RadButton 控件的实例
-
Telerik.Web.UI 类型的 eventArgs 参数。RadButtonCheckedEventArgs,包含以下属性和方法:
-
get_cancel() - 返回一个布尔值,指示事件是否被取消。True 表示事件被取消。
-
set_cancel( shouldCancel ) - 设置一个布尔值,指示事件是否将被取消。设置为 true 意味着事件将被取消。
-
get_toggleType () - 返回 RadButton 的 ButtonToggleType。它可以是ButtonToggleType.CheckBox或ButtonToggleType.Radio。
-
get_commandName() - 返回分配给 RadButton 的CommandName属性的值
-
get_commandArgument() - 返回分配给 RadButton 的CommandArgument属性的值。
-
此事件在用户希望确保仅在满足特定条件时才更改 ToggleState 的情况下很有用。请注意,如果按钮自动回发到服务器,这是默认行为,即使事件被取消,回发也不会停止。
以下示例要求用户确认更改三态 CheckBox 的状态。代码如下:
<script type="text/javascript">
function ToggleStateChanging(sender, args)
{
args.set_cancel(!window.confirm("Are you sure you want to change the state of the button?"));
}
</script>
<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Show/Hide Window"
ToggleType="CustomToggle" ButtonType="ToggleButton"
OnClientToggleStateChanging="ToggleStateChanging">
<ToggleStates>
<telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox" />
<telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled" />
<telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked" />
</ToggleStates>
</telerik:RadButton>
OnClientToggleStateChanged
toggleStateChanged事件在 RadButton 的SelectedToggleState和SelectedToggleStateIndex属性发生更改后触发。仅当ToggleType属性设置为 [Telerik.Web.UI] 时才会触发该事件。ButtonToggleType.CustomToggle。用户无法取消该事件。
事件处理程序接收两个参数:
-
单击的 RadButton 控件的实例
-
Telerik.Web.UI 类型的 eventArgs 参数。RadButtonCheckedEventArgs,包含以下属性和方法:
-
get_currentToggleState() - 返回当前 [Telerik.Web.UI]。RadButtonToggleState对象应用于按钮。
-
get_commandName() - 返回分配给 RadButton 的CommandName属性的值
-
get_commandArgument() - 返回分配给 RadButton 的CommandArgument属性的值
-
当用户想要在按钮更改其切换状态时执行自定义客户端代码时,此事件很有用。例如,以下代码显示 RadWindow 控件中的一个页面,当三态复选框为“已填充”时,另一个当状态为“已选中”时,并且在未选中时隐藏窗口。
<script type="text/javascript">
function OpenWindows(sender, args)
{
var oWnd = $find("<%=RadWindow1.ClientID %>");
switch (args.get_currentToggleState().get_text())
{
case "Telerik":
oWnd.setUrl("https://www.telerik.com");
oWnd.show();
break;
case "Google":
oWnd.setUrl("http://www.google.com");
oWnd.show();
break;
default:
oWnd.hide();
break;
}
}
</script>
<telerik:radbutton id="RadButton1" runat="server" text="Show/Hide Window" toggletype="CustomToggle"
autopostback="false" onclienttogglestatechanged="OpenWindows">
<ToggleStates>
<telerik:RadButtonToggleState Text="Hide Windows" PrimaryIconCssClass="rbToggleCheckbox" />
<telerik:RadButtonToggleState Text="Google" PrimaryIconCssClass="rbToggleCheckboxFilled" />
<telerik:RadButtonToggleState Text="Telerik" PrimaryIconCssClass="rbToggleCheckboxChecked" />
</ToggleStates>
</telerik:radbutton>
<telerik:radwindow id="RadWindow1" runat="server"></telerik:radwindow>
RadButton 验证和客户端事件处理程序
当 ASP.NET 验证与附加了客户端事件处理程序的RadButton一起使用时,可能会发生意外行为。客户端脚本将在验证发生之前执行,这是一种预期行为,也可以通过标准 Button 控件观察到。因此,如果依赖于页面的回发并且验证不成功,客户端的脚本逻辑将无法正确执行。
为避免这种影响,应使用客户端方法Page_ClientValidate。它强制客户端进行验证并返回一个布尔值,指示它是否成功。使用此值,可以在页面未验证的情况下停止客户端功能的执行。以下示例显示了如何实现此目的。
在下面的 ASPX 页面标记上添加了一个TextBox,它使用RequiredFieldValidator进行验证。该页面是通过RadButton提交的,该按钮在其OnClientClicking事件上执行回发确认:
<asp:TextBox ID="Textbox1" runat="server" />
<asp:RequiredFieldValidator ID="Requiredfieldvalidator1" ErrorMessage="Field is empty!"
ControlToValidate="Textbox1" runat="server" ValidationGroup="Val" />
<br />
<telerik:RadButton RenderMode="Lightweight" ID="btnStandardConfirm" runat="server" Text="Standard window.confirm"
OnClientClicking="StandardConfirm" ValidationGroup="Val">
</telerik:RadButton>
下面是 JavaScript 函数,指定为OnClientClicking事件的处理程序。请注意,在执行主逻辑之前,使用Page_ClientValidate方法来验证客户端上的页面。如果验证成功,将显示确认对话框:
function StandardConfirm(sender, args) {
var validated = Page_ClientValidate('Val');
if (!validated) return;
args.set_cancel(!window.confirm("Are you sure you want to submit the page?"));
}
将 NavigateUrl 与 StandardButton 类型一起使用
RadButton控件有一个NavigateUrl属性,当按钮设置为ButtonType=LinkButton时,该属性用于指定要重定向到的 URL 。
有一种方法可以通过处理客户端事件OnClientClicking将RadButton配置为StandardButton来实现此功能。在事件处理程序中,应该使用 JavaScript 打开在NavigateUrl属性中指定的 URL。下面的代码演示了如何实现这样的功能:
<script type="text/javascript">
function OnClientClicking(button, args) {
window.location = button.get_navigateUrl();
args.set_cancel(true);
}
</script>
<telerik:RadButton RenderMode="Lightweight" ID="RadButton" runat="server" Text="RadButton" NavigateUrl="https://www.telerik.com/" OnClientClicking="OnClientClicking">
</telerik:RadButton>