telerik学习记录-RadButton（上）

已于 2022-08-27 13:58:41 修改
阅读量554 收藏
点赞数
分类专栏： telerik 文章标签： 学习 ajax
于 2022-08-26 15:22:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43561770/article/details/126487575
版权
本文档详细介绍了Telerik的RadButton控件，包括如何配置StandardButton、LinkButton、SkinnedButton和ToggleButton等不同类型的按钮，以及如何使用拆分按钮、图像按钮和切换按钮功能。此外，还讨论了内容模板、按钮确认对话框和单击按钮的单次点击功能。对于需要在ASP.NET AJAX环境中使用丰富按钮功能的开发者来说，这是一个全面的指南。

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

目录

概述

 入门

按钮类型

概述

将RadButton配置为StandardButton

将RadButton配置为LinkButton

将RadButton配置为SkinnedButton

将RadButton配置为ToggleButton

拆分按钮

 在客户端使用拆分按钮功能

在服务器端使用拆分按钮功能

图像按钮

切换按钮

将RadButton控件配置为复选框：

将RadButton控件配置为单选按钮 

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

内容模板

在标记中将元素添加到RadButton

从代码隐藏向RadButton添加元素

功能性

按钮确认对话框

特性

使用window.confirm()

使用RadConfirm

不同的按钮类型

单击按钮

概述

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. 使用提交行为
  2. 启用浏览器按钮样式

图 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/>此按钮类型的目的是提供控件的“LinkBut​​ton”外观并使用户能够指定要导航到的 URL，而无需将页面回发到服务器。可以指定目标窗口或框架，当通过Target属性单击控件时，将在其中显示网页内容。LinkBut​​ton特定属性：

  1. 导航网址
  2. 目标

图 2：RadButton 配置为 LinkBut​​ton。

 示例 2：在图 2中创建LinkBut​​ton的代码。

<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

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

拆分按钮

RadButton使开发人员能够在主按钮旁边显示一个附加按钮（图 1），其目的是增强主按钮的可用性。可以通过将EnableSplitButton属性设置为true来启用拆分按钮功能。

图 1：配置为拆分按钮的 RadButton。示例 1 中提供了创建此图的代码。

额外的按钮在右侧（默认）或左侧呈现，具体取决于设置为SplitButtonPosition属性的值。开发人员还可以使用SplitButtonCssClass属性将自定义样式应用于控件。

不能同时启用具有SplitButtonPosition =" Left " 的PrimaryIcon和拆分按钮。SecondaryIcon和SplitButtonPosition =" Right "也是如此。

 在客户端使用拆分按钮功能

可以处理客户端的OnClientClickedOnClientClicked或OnClientClicking事件，然后根据用户单击的按钮执行所需的操作。请参见示例 1中的示例。

示例 1：利用客户端的拆分按钮功能。

<telerik:RadButton RenderMode="Lightweight" ID="SplitButton1" Text="SplitButton" runat="server" EnableSplitButton="true"
    OnClick="SplitButton1_Click" OnCommand="SplitButton1_Command">
</telerik:RadButton> 

protected void SplitButton1_Command(object sender, CommandEventArgs e)
{
    Telerik.Web.UI.ButtonCommandEventArgs args = e as Telerik.Web.UI.ButtonCommandEventArgs;

    if (args.IsSplitButruytonClick)
    {
     //TODO: Split button logic
    }
}
protected void SplitButton1_Click(object sender, EventArgs e)
{
    Telerik.Web.UI.ButtonClickEventArgs args = e as Telerik.Web.UI.ButtonClickEventArgs;

    if (args.IsSplitButtonClick)
    {
     //TODO: Split button logic
    }
}

在服务器端使用拆分按钮功能

可以处理服务器端的 Click 和 Command 事件以执行“拆分按钮”的特定逻辑。事件参数参数应转换为相应的 ButtonClick 或 ButtonCommand 事件参数，以便我们确定哪个按钮发出了点击。

示例 2：利用服务器端的拆分按钮功能。

<telerik:RadButton RenderMode="Lightweight" EnableSplitButton="true" ID="SplitButton" AutoPostBack="false" runat="server" 
    Text="Transfer Item" OnClientClicked="OnClientClicked">
</telerik:RadButton> 

function OnClientClicked(sender, args) {
    if (args.IsSplitButtonClick()) {
        //TODO: Execute SplitButton logic
        alert("Split button clicked!");
    } else {
        //TODO: Execute main button logic
        alert("Main button clicked!");
    }
}

图像按钮

RadButton提供了一种在控件上显示自定义图像的简单方法。图像可以用作背景，也可以代表按钮本身（图像按钮）。当使用RadButton控件作为图像按钮时，用户必须设置Width和Height，因为我们没有使用实际的<img/>标签，而是将图像设置为 Button 的包装元素 ( <span>) 的背景。所有与图像相关的属性都通过RadButton.Image属性进行控制。

图 1：用作 ImageButton 的 RadButton（图像代表按钮）。

图 2：带有背景图像、图标和文本的 RadButton。

有两种方法可以在控件上显示图像：

  1. 第一种也是最简单的方法是将Image.ImageUrl属性设置为所用图像的位置。将IsBackgroundImage设置为 true 使开发人员可以将图像用作背景，并将文本和图标设置为他/她的按钮。

  2. 使用RadButton的CssClass属性设置图像的第二种方法。基本上我们在CssClass中设置背景图像，并通过设置Image.EnableImageButton=true来启用图像按钮功能（示例 1）。

当想为按钮使用图像精灵时，这种方法是首选（参见下面的示例）。在CssClass中设置背景图像和背景位置，然后在HoveredCssClass和PressedCssClass中，仅设置悬停和按下图像的背景位置。如果用户希望她/他可以在鼠标悬停在控件上时显示不同的图像，或者分别使用HoveredImageUrl和PressedImageUrl属性按下按钮。

示例 1：通过CssClass和Image.EnableImageButton=true属性将 RadButton 配置为图像按钮。

<style type="text/css">
    .classImage
    {
        background: url(img/categories.png);
        background-position: 0 0;
        width: 150px;
        height: 94px;
    }

    .classHoveredImage
    {
        background-position: 0 -100px;
    }

    .classPressedImage
    {
        background-position: 0 -200px;
    }
</style>
<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Image Button" CssClass="classImage"
    HoveredCssClass="classHoveredImage" PressedCssClass="classPressedImage">
    <Image EnableImageButton="true" />
</telerik:RadButton>

无论控件是否仅用作图像按钮（不显示文本和图标），设置Text属性总是好的，因为这样可以提高控件的可访问性。

切换按钮

RadButton控件可以轻松配置为切换按钮。只需将ToggleType属性设置为与 ButtonToggleType.None 不同的值，按钮就会转换为复选框、单选按钮或完全自定义的切换按钮。由于ButtonType属性控制组件的外观，用户可以让他/她的按钮看起来像标准按钮<input type="submit|button" />元素，并且表现得像复选框或单选按钮。以下是一些代码示例，展示了如何实现这一点：

将RadButton控件配置为复选框：

要将 RadButton配置为复选框，必须执行以下步骤：

  1. 将按钮的ToggleType属性设置为“ CheckBox ”。

  2. 通过ButtonType属性选择所需的按钮类型：

    • StandardButton - 用于标准按钮布局。
    • LinkBut​​ton - 用于链接按钮布局。
    • ToggleButton - 用于原生复选框布局。

  3. 通过Checked属性定义复选框是否被选中。

  4. 可以通过RadButtonToggleState类的相应属性（例如Text、Value、Selected、CssClass等）对两种切换状态进行进一步定制。

示例 1：将 RadButton 配置为具有StandardButton、LinkBut ​​ton和ToggleButton按钮类型的复选框。

<telerik:RadButton RenderMode="Lightweight" ID="btnToggle1" runat="server" Text="Checkbox 1" ToggleType="CheckBox"
    ButtonType="StandardButton"></telerik:RadButton>

<telerik:RadButton RenderMode="Lightweight" ID="btnToggle2" runat="server" Text="Checkbox 2" ToggleType="CheckBox" 
    ButtonType="LinkButton"></telerik:RadButton>

<telerik:RadButton RenderMode="Lightweight" ID="btnToggle2" runat="server" Text="Checkbox 3" ToggleType="CheckBox" 
    ButtonType="ToggleButton"></telerik:RadButton>

图 1：RadButton 的复选框功能不仅与本机复选框外观相关，还与 StandardButton 和 LinkBut​​ton 按钮类型相关。

将RadButton控件配置为单选按钮 

为了将RadButton配置为单选按钮，必须执行以下步骤：

  1. 将按钮的ToggleType属性设置为“ Radio ”。

  2. 通过ButtonType属性选择所需的按钮类型：

    • StandardButton - 用于标准按钮布局。
    • LinkBut​​ton - 用于链接按钮布局。
    • ToggleButton - 用于原生单选按钮布局。

  3. 通过Checked属性定义是否选中单选按钮。

  4. 为同一组内的单选按钮的GroupName属性设置一个通用值。

  5. 可以通过RadButtonToggleState类的相应属性（例如Text、Value、Selected、CssClass等）对两种切换状态进行进一步定制。

示例 2：将 RadButton 配置为具有StandardButton、LinkBut ​​ton和ToggleButton按钮类型的单选按钮

<telerik:RadButton RenderMode="Lightweight" ID="btnToggle1" runat="server" Text="Radio Button 1" ToggleType="Radio" 
    ButtonType="StandardButton"></telerik:RadButton>

<telerik:RadButton RenderMode="Lightweight" ID="btnToggle2" runat="server" Text="Radio Button 2" ToggleType="Radio" 
    ButtonType="LinkButton"></telerik:RadButton>

<telerik:RadButton RenderMode="Lightweight" ID="btnToggle3" runat="server" Text="Radio BUtton 3" ToggleType="Radio" 
    ButtonType="ToggleButton"></telerik:RadButton>

图 2：RadButton 的单选按钮功能不仅与本机单选按钮的外观相关，还与 StandardButton 和 LinkBut​​ton 按钮类型相关。

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

为了配置具有自定义切换状态的RadButton，必须执行以下步骤：

  1. 将按钮的ToggleType属性设置为“ CustomToggle ”。

  2. 通过ButtonType属性选择所需的按钮类型：

    • StandardButton - 用于标准按钮布局。
    • LinkBut​​ton - 用于链接按钮布局。
    • ToggleButton - 用于原生布局。

  3. 向ToggleStates集合添加任意数量的RadButtonToggleState实例。通过RadButtonToggleState类的相应属性（例如Text、Value、Selected、CssClass等）对每个切换状态进行进一步定制。

示例 3：使用StandardButton、LinkBut ​​ton和ToggleButton按钮类型的自定义切换状态配置 RadButton 。

<telerik:RadButton RenderMode="Lightweight" ID="btnToggle1" runat="server" ToggleType="CustomToggle" ButtonType="StandardButton">
    <ToggleStates>
     <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox" />
     <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled" />
     <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked" />
    </ToggleStates>
</telerik:RadButton>

<telerik:RadButton RenderMode="Lightweight" ID="btnToggle1" runat="server" ToggleType="CustomToggle" ButtonType="LinkButton">
    <ToggleStates>
     <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox" />
     <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled" />
     <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked" />
    </ToggleStates>
</telerik:RadButton>

<telerik:RadButton RenderMode="Lightweight" ID="btnToggle1" runat="server" ToggleType="CustomToggle" ButtonType="ToggleButton">
    <ToggleStates>
     <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox" />
     <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled" />
     <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked" />
    </ToggleStates>
</telerik:RadButton>

图 3：RadButton 的自定义切换状态功能也与 StandardButton 和 LinkBut​​ton 按钮类型相关。


在上面的代码中，PrimaryIconCssClass属性用于指定一个三态（3-state）复选框，Text 属性根据当前选定的状态具有不同的文本。 

内容模板

接下来将展示展示了如何在RadButton中而不是纯文本中添加复杂的内容（服务器端控件和 HTML 元素） 。可以在标记中或在后面的代码中执行此操作：

在标记中将元素添加到RadButton

为了将控件添加到标记中的RadButton，应该将它们直接放在复合ContentTemplate属性中（示例 1）。

示例 1：将控件添加到标记中RadButton的ContentTemplate。

<telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton1">
    <ContentTemplate>
        <img alt="cog" src="https://demos.telerik.com/aspnet-ajax/button/examples/contenttemplate/Img/cog.png" />
        <span>Tasks</span>
        <telerik:RadRating RenderMode="Lightweight" ID="RadRating1" runat="server" Enabled="false" Value="3" SelectionMode="Continuous" ItemCount="5" />
    </ContentTemplate>
</telerik:RadButton>

从代码隐藏向RadButton添加元素

可以通过两种方式从代码隐藏向RadButton添加控件：

  • 将元素添加到RadButton的Controls集合（示例 2）。示例 2 ：从后面的代码向RadButton的Controls集合添加控件。
<telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton1" Width="160px" Height="70px">
</telerik:RadButton>
protected void Page_Init(object sender, EventArgs e)
{
    Literal radButtonContent = new Literal();
    radButtonContent.ID = "radButtonContent";
    radButtonContent.Text = "<img alt='car' src='https://demos.telerik.com/aspnet-ajax/button/examples/contenttemplate/Img/car.png' /><span>Vehicles</span>";
    RadButton1.Controls.Add(radButtonContent);
}
  • 将ContentTemplate属性设置为实现ITemplate接口的类的实例（示例 3）。示例 3 ：使用ITemplate类向RadButton添加控件。
<telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton1" Width="160px" Height="70px">
</telerik:RadButton>
protected void Page_Init(object sender, EventArgs e)
{
    RadButton1.ContentTemplate = new ButtonContentTemplate();
}

public class ButtonContentTemplate : ITemplate
{
    void ITemplate.InstantiateIn(Control container)
    {
        System.Web.UI.WebControls.Image contentImage = new System.Web.UI.WebControls.Image();
        contentImage.ID = "contentImage";
        contentImage.ImageUrl = "https://demos.telerik.com/aspnet-ajax/button/examples/contenttemplate/Img/envelope.png";
        contentImage.AlternateText = "envelope";
        container.Controls.Add(contentImage);

        Label contentLabel = new Label();
        contentLabel.ID = "contentLabel";
        contentLabel.Text = "E-Mail";
        container.Controls.Add(contentLabel);
    }
}

功能性

按钮确认对话框

用于显示确认弹出/对话框的内置功能，要求用户确认下一步操作，无论是执行客户端脚本还是完成回发。

从 R2 2019 开始，除了RadRadioButtonList和RadCheckboxList之外的所有按钮类型都带有内置的确认对话框，只需为ConfirmText属性定义一个文本即可启用它。

特性

  • ConfirmText：启用确认对话框功能并设置确认消息
  • UseRadConfirm：在 RadConfirm 和 window.confirm() 对话模式之间切换。
    • 默认值：真
    • UseRadConfirm="True"需要页面上的RadWindowManager
  • 标题：设置对话窗口的标题（仅适用于 RadConfirm）
  • 高度：设置对话框高度（仅适用于 RadConfirm）
  • 宽度：设置对话框宽度（仅适用于 RadConfirm）

使用window.confirm()

通过为ConfirmText属性定义一个值来启用确认对话框

<telerik:RadButton runat="server" ID="RadButton1" Text="RadButton">
    <ConfirmSettings ConfirmText="Are you sure you want to continue?" />
</telerik:RadButton>

使用RadConfirm

除了 RadButton，还可以在页面上添加一个 RadWindowManager。

<telerik:RadButton runat="server" ID="RadButton1" Text="RadButton">
    <ConfirmSettings ConfirmText="Are you sure you want to continue?"  />
</telerik:RadButton>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>

不同的按钮类型

辐射复选框

<telerik:RadCheckBox ID="RadCheckBox1" runat="server" Text="RadCheckBox">
    <ConfirmSettings ConfirmText="Are you sure you want to continue?" />
</telerik:RadCheckBox>

辐射按钮

<telerik:RadPushButton ID="RadPushButton1" runat="server" Text="RadPushButton1">
    <ConfirmSettings ConfirmText="Are you sure you want to continue?" />
</telerik:RadPushButton>

辐射链接按钮

<telerik:RadLinkButton ID="RadLinkButton1" runat="server" Text="RadLinkButton1" NavigateUrl="https://demos.telerik.com/aspnet-ajax/button" Target="_blank">
    <ConfirmSettings ConfirmText="Are you sure you want to continue?" />
</telerik:RadLinkButton>

RadToggleButton

<telerik:RadToggleButton runat="server" ID="RadToggleButton1">
    <ConfirmSettings ConfirmText="Are you sure you want to continue?" />
    <ToggleStates>
        <telerik:ButtonToggleState Text="RadToggleButton1 - First Toggle"></telerik:ButtonToggleState>
        <telerik:ButtonToggleState Text="RadToggleButton1 - Second Toggle"></telerik:ButtonToggleState>
    </ToggleStates>
</telerik:RadToggleButton>

辐射图像按钮

<telerik:RadImageButton ID="RadImageButton1" runat="server" Text="RadImageButton1" Width="230px" Height="230px">
    <ConfirmSettings ConfirmText="Are you sure you want to continue?" />
    <Image Url="https://demos.telerik.com/aspnet-ajax/editor/images/top_image.png" />
</telerik:RadImageButton>

单击按钮

单击按钮（图 1）用于避免对服务器的多次回发/回调。当开发人员应防止向服务器多次提交相同的内容时，此功能在数据库和/或电子邮件发送场景中很有用。

图 1：在单击前后具有 SingleClick 功能的 RadButton。

应使用以下属性来启用单击功能：

  • SingleClick - 确定RadButton控件在用户单击后是否立即被禁用。将其设置为true以启用单击功能。

  • SingleClickText - 确定在单击和禁用按钮后显示在RadButton控件中的文本。

示例 1：在图 1中的RadButton中启用单击功能的代码。

<asp:TextBox ID="txtName" runat="server" />

<telerik:RadButton RenderMode="Lightweight" ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"
    SingleClick="true"  SingleClickText="Processing...">
</telerik:RadButton>

<asp:Label ID="lblGreeting" runat="server" />
protected void btnSubmit_Click(object sender, EventArgs e)
{
    if (Page.IsPostBack) System.Threading.Thread.Sleep(3000);
    lblGreeting.Text = String.Format("Hello, {0}!", txtName.Text);
}

提交的文本在服务器端进行处理。请注意，使用了System.Threading.Thread.Sleep方法 ，以便在单击禁用按钮后可以对其进行检查。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值