telerik学习记录-RadButton（上）

李知恩男友

已于 2022-08-27 13:58:41 修改

阅读量402

点赞数

分类专栏： telerik 文章标签：学习 ajax

于 2022-08-26 15:22:27 首次发布

本文链接：https://blog.csdn.net/qq_43561770/article/details/126487575

版权

将RadButton配置为StandardButton

将RadButton配置为LinkButton

将RadButton配置为SkinnedButton

将RadButton配置为ToggleButton

使用自定义切换状态配置RadButton控件

概述

RadButton 控件提供了一组通用的按钮类型。

入门

使用RadButton控件设置页面并附加其OnClick服务器事件：

1.在启用了 ASP.NET AJAX 的新 Web 应用程序的默认页面中，添加一个RadButton控件：

<telerik:RadButton RenderMode="Lightweight" id="RadButton1" runat="server" text="My Button">
</telerik:RadButton>

Text属性指定显示在RadButton控件中的文本。、

2.要挂钩到RadButton的OnClick服务器端事件，请切换到 Visual Studio 的设计视图并双击该按钮。此操作将在代码隐藏文件中插入以下函数：

protected void RadButton1_Click(object sender, EventArgs e)
{
}

以及添加OnClick="RadButton1_Click"到RadButton的声明。在 Click 事件处理程序中添加希望在单击RadButton控件时执行的代码。

按钮类型

概述

RadButton的ButtonType属性控制按钮在客户端上的呈现方式、应用于控件的样式以及每个RadButtonType提供的功能。按钮类型有四个选项：StandardButton（默认）、 LinkButton 、SkinnedButton和ToggleButton。

将RadButton配置为StandardButton

标准按钮（图 1）。控件呈现为<input/>type ="submit"或type="button"。UseSubmitBehavior （默认值“true”）属性确定<input/>类型是“提交”（设置为 true）还是“按钮”（设置为 false）。通过将EnableBrowserButtonStyle属性设置为 true ，用户可以禁用按钮的内置样式和 CSS，并让客户端浏览器将其默认样式应用于<input type="submit|button" />元素。StandardButton特定属性：

使用提交行为
启用浏览器按钮样式

图 1：RadButton 配置为 StandardButton。

示例 1：创建图 1中的StandardButton的代码。

<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Standard Button" 
    ButtonType="StandardButton" UseSubmitBehavior="true" EnableBrowserButtonStyle="false" />

将RadButton配置为LinkButton

链接按钮（图 2）。控件呈现为带有用于指定文本<span/>的子元素的元素。<span/>此按钮类型的目的是提供控件的“LinkButton”外观并使用户能够指定要导航到的 URL，而无需将页面回发到服务器。可以指定目标窗口或框架，当通过Target属性单击控件时，将在其中显示网页内容。LinkButton特定属性：

导航网址
目标

图 2：RadButton 配置为 LinkButton。

示例 2：在图 2中创建LinkButton的代码。

<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Link Button"
    ButtonType="LinkButton" NavigateUrl="https://www.telerik.com" Target="_blank" />

将RadButton配置为SkinnedButton

SkinnedButton（图 3）。该控件使用 CSS3 来配置圆角和渐变。这将创建一个外观，类似于StandardButton，而不需要精灵图像。SkinnedButton的呈现方式与LinkBut ton相同。

图 3：配置为 SkinnedButton 的 RadButton。

示例 3：在图 3中创建SkinnedButton的代码。

<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Skinned Button" ButtonType="SkinnedButton" />

将RadButton配置为ToggleButton

切换按钮。该控件的呈现方式与LinkButton相同，不同之处在于应用的样式。ToggleButton看起来像一个复选框或单选按钮，具体取决于为ToggleType属性指定的值。如果ToggleType设置为“ None ”或使用“ CustomToggle ” ，它也可以看起来像一个简单的文本（标签）按钮 [可点击文本] 。当需要样式丰富的复选框或单选按钮时，应使用此按钮类型。