telerik学习记录-RadButton(下)

这篇博客详细介绍了Telerik RadButton控件的使用,包括服务器端编程的各种属性和事件,如RadButtonToggleState特定功能、服务器端事件,以及客户端编程的概述、客户端事件如OnClientClicking、OnClientToggleStateChanging等。同时,讨论了验证、客户端事件处理程序的交互,以及NavigateUrl属性与StandardButton类型的结合使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

服务器端编程

属性和事件

RadButton常用功能(属性)

图标特定功能(属性)

图像特定特征(属性)

SplitButton特定功能(属性)

类型:按钮特定功能(属性)

类型:LInkButton特定功能(属性)

类型:ToggleButton特定功能(属性)

RadButtonToggleState特定功能(属性)

服务器端事件

方法

类型:ToggleButton具体方法

客户端编程

概述

获取RadButton客户端对象

客户端对象模型

RadButtonToggleState

RadButton客户端事件

OnClientCheckChanged

OnClientCheckedChanging

OnClientClicking

OnClientClicked

OnClientMouseOver

OnClientMouseOut

OnClientToggleStateChanging

OnClientToggleStateChanged

RadButton 验证和客户端事件处理程序

将 NavigateUrl 与 StandardButton 类型一起使用


服务器端编程

属性和事件

RadButton常用功能(属性)

PROPERTYDESCRIPTION
ButtonType获取或设置按钮的类型。存在以下类型:StandardButton(默认)、LinkBut​​ton、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 函数的名称。该事件是可取消的,当取消时,不会引发OnClientCheckedChangedOnClientToggleStateChanged 。
OnClientToggleStateChanged设置在OnClientToggleStateChanging事件之后,当 RadButton 的切换状态发生更改时将调用的 JavaScript 函数的名称。

图标特定功能(属性)

PROPERTYDESCRIPTION
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 控件的包装元素

图像特定特征(属性)

PROPERTYDESCRIPTION
IsBackgroundImage获取或设置一个布尔值,指示如何使用图像 - 即作为背景图像或图像按钮。
ImageUrl获取或设置用作按钮的图像的 URL。
HoveredImageUrl获取或设置 RadButton 悬停时显示的图像的 URL
PressedImageUrl获取或设置按下 RadButton 时显示的图像的 URL
EnableImageButton获取或设置一个布尔值,该值指示 RadButton 是否呈现为图像按钮

SplitButton特定功能(属性)

PROPERTYDESCRIPTION
EnableSplitButton获取或设置一个布尔值,该值指示是否将启用 SplitButton 功能
SplitButtonPosition获取或设置 SplitButton 相对于主按钮(左或右)出现的位置。位置:右(默认),左
SplitButtonCssClass获取或设置应用于 SplitButton 的 CSS 类

类型:按钮特定功能(属性)

PROPERTYDESCRIPTION
UseSubmitBehavior获取或设置一个布尔值,该值指示 RadButton 控件是使用客户端浏览器的提交机制还是 ASP.NET 回发机制。

类型:LInkButton特定功能(属性)

PROPERTYDESCRIPTION
NavigateUrl获取或设置要导航到的页面的 URL,而不会将页面发回服务器。设置此属性时,按钮将呈现为(锚)元素。
Target获取或设置在单击 RadButton 控件时显示链接到的网页内容的目标窗口或框架。

类型:ToggleButton特定功能(属性)

PROPERTYDESCRIPTION
ToggleType获取或设置切换按钮的类型。共有三种切换类型:None(默认)、Radio、CheckBox、CustomToggle
GroupName在 ToggleType: Radio 时有效。获取或设置单选按钮所属组的名称。
Checked获取或设置一个布尔值,该值指示是否选中了 RadButton 控件。在 ToggleButton 具有多于 2(两个)状态的情况下,在 RadButton 的当前状态为 First 状态的情况下不检查控件,在所有其他情况下为 Checked。
SelectedToggleState获取或设置 RadButton 的当前状态。
SelectedToggleStateIndex当用作自定义切换按钮时,获取或设置 RadButton 控件当前选定的 ToggleState 的索引。
ToggleStatesRadButtonToggleState的集合。不同的状态是通过状态集合来控制的。集合最多可以包含四个状态。切换状态的顺序由集合中状态出现的从 0 开始的位置索引确定。因此,ToggleStates 中的第一项是第一个状态,第二项是第二个状态,依此类推。当 ToggleType 为 Radio 或 CheckBox 时,ToggleStates 的第一项(状态)用作 RadButton 的备用状态。

RadButtonToggleState特定功能(属性)

PROPERTYDESCRIPTION
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获取或设置一个布尔值,指示如何使用图像 - 即作为背景图像或图像按钮

服务器端事件

PROPERTYDESCRIPTION
OnClick单击 RadButton 时引发。(自动回发=真)
OnCommand当 RadButton 指定了 Command 时引发。
OnCheckedChanged当带有 ButtonType:ToggleButton 的 RadButton 的 Checked 属性发生更改时引发
OnToggleStateChanged当带有 ButtonType:ToggleButton 的 RadButton 的 State 属性发生更改时引发

方法

类型:ToggleButton具体方法

PROPERTYDESCRIPTION
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 PROPERTIESDESCRIPTION
.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 控件时显示链接到的网页内容的目标窗口或框架。此属性特定于配置为LinkBut​​ton ( ButtonType ="LinkBut​​ton" ) 的 RadButton
.set_target()设置在单击 RadButton 控件时显示链接到的网页内容的目标窗口或框架。此属性特定于配置为LinkBut​​ton ( ButtonType ="LinkBut​​ton" ) 的 RadButton
.get_navigateUrl()获取单击 RadButton 控件时要链接到的 URL。此属性特定于配置为LinkBut​​ton ( ButtonType ="LinkBut​​ton" ) 的 RadButton
.set_navigateUrl()设置单击 RadButton 控件时要链接到的 URL。此属性特定于配置为LinkBut​​ton ( ButtonType ="LinkBut​​ton" ) 的 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

PROPERTIESDESCRIPTION
.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.CheckBoxButtonToggleType.Radio即当控件用作 RadioButton 或 CheckBox 时。用户无法取消该事件。

事件处理程序接收两个参数:

  1. 单击的 RadButton 控件的实例

  2. Telerik.Web.UI 类型的 eventArgs 参数。RadButtonCheckedEventArgs,包含以下属性和方法:

    • get_checked() - 返回一个布尔值,指示按钮是否被选中。
    • get_toggleType () - 返回 RadButton 的 ButtonToggleType。它可以是ButtonToggleType.CheckBoxButtonToggleType.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.CheckBoxButtonToggleType.Radio即当控件用作 RadioButton 或 CheckBox 时。用户无法取消该事件。

事件处理程序接收两个参数:

  1. 单击的 RadButton 控件的实例

  2. Telerik.Web.UI 类型的 eventArgs 参数。RadButtonCheckedEventArgs,包含以下属性和方法:

    • get_cancel() - 返回一个布尔值,指示事件是否被取消。True 表示事件被取消。
    • set_cancel( shouldCancel ) - 设置一个布尔值,指示事件是否将被取消。设置为 true 意味着事件将被取消。
    • get_toggleType () - 返回 RadButton 的 ButtonToggleType。它可以是ButtonToggleType.CheckBoxButtonToggleType.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 控件时,即释放鼠标按钮后立即发生单击事件。该事件在客户端验证发生后触发,并且可以取消。

事件处理程序接收两个参数:

  1. 单击的 RadButton 控件的实例

  2. 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 控件时发生。该事件在客户端验证完成后、页面提交之前触发,并且不能取消。

事件处理程序接收两个参数:

  1. 单击的 RadButton 控件的实例

  2. 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- ./?%&amp;=]*)?"
    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事件。

事件处理程序接收两个参数:

  1. 单击的 RadButton 控件的实例

  2. 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事件。

事件处理程序接收两个参数:

  1. 单击的 RadButton 控件的实例

  2. 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的SelectedToggleStateSelectedToggleStateIndex属性之前触发toggleStateChanging事件。仅当ToggleType属性设置为 [Telerik.Web.UI] 时才会触发该事件。ButtonToggleType.CustomToggle。用户可以取消该事件。

事件处理程序接收两个参数:

  1. 单击的 RadButton 控件的实例

  2. Telerik.Web.UI 类型的 eventArgs 参数。RadButtonCheckedEventArgs,包含以下属性和方法:

    • get_cancel() - 返回一个布尔值,指示事件是否被取消。True 表示事件被取消。

    • set_cancel( shouldCancel ) - 设置一个布尔值,指示事件是否将被取消。设置为 true 意味着事件将被取消。

    • get_toggleType () - 返回 RadButton 的 ButtonToggleType。它可以是ButtonToggleType.CheckBoxButtonToggleType.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 的SelectedToggleStateSelectedToggleStateIndex属性发生更改后触发。仅当ToggleType属性设置为 [Telerik.Web.UI] 时才会触发该事件。ButtonToggleType.CustomToggle。用户无法取消该事件。

事件处理程序接收两个参数:

  1. 单击的 RadButton 控件的实例

  2. 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=LinkBut​​ton时,该属性用于指定要重定向到的 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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值