當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

telerik学习记录-RadButton（上）

發布時間：2024/1/1 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 telerik学习记录-RadButton（上）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

概述

?入門

按鈕類型

概述

將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）?？丶尸F為<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）?？丶尸F為帶有用于指定文本<span/>的子元素的元素。<span/>此按鈕類型的目的是提供控件的“LinkBut??ton”外觀并使用戶能夠指定要導航到的 URL，而無需將頁面回發到服務器。可以指定目標窗口或框架，當通過Target屬性單擊控件時，將在其中顯示網頁內容。LinkBut??ton特定屬性：

導航網址

目標

圖 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 logicalert("Split button clicked!");} else {//TODO: Execute main button logicalert("Main button clicked!");} }

圖像按鈕

RadButton提供了一種在控件上顯示自定義圖像的簡單方法。圖像可以用作背景，也可以代表按鈕本身（圖像按鈕）。當使用RadButton控件作為圖像按鈕時，用戶必須設置Width和Height，因為我們沒有使用實際的<img/>標簽，而是將圖像設置為 Button 的包裝元素 (?<span>) 的背景。所有與圖像相關的屬性都通過RadButton.Image屬性進行控制。

圖 1：用作 ImageButton 的 RadButton（圖像代表按鈕）。

圖 2：帶有背景圖像、圖標和文本的 RadButton。

有兩種方法可以在控件上顯示圖像：

第一種也是最簡單的方法是將Image.ImageUrl屬性設置為所用圖像的位置。將IsBackgroundImage設置為 true 使開發人員可以將圖像用作背景，并將文本和圖標設置為他/她的按鈕。

使用RadButton的CssClass屬性設置圖像的第二種方法?；旧衔覀冊?strong>CssClass中設置背景圖像，并通過設置Image.EnableImageButton=true來啟用圖像按鈕功能（示例 1）。

當想為按鈕使用圖像精靈時，這種方法是首選（參見下面的示例）。在CssClass中設置背景圖像和背景位置，然后在HoveredCssClass和PressedCssClass中，僅設置懸停和按下圖像的背景位置。如果用戶希望她/他可以在鼠標懸停在控件上時顯示不同的圖像，或者分別使用HoveredImageUrl和PressedImageUrl屬性按下按鈕。

示例 1：通過CssClass和Image.EnableImageButton=true屬性將 RadButton 配置為圖像按鈕。

無論控件是否僅用作圖像按鈕（不顯示文本和圖標），設置Text屬性總是好的，因為這樣可以提高控件的可訪問性。

切換按鈕

RadButton控件可以輕松配置為切換按鈕。只需將ToggleType屬性設置為與 ButtonToggleType.None 不同的值，按鈕就會轉換為復選框、單選按鈕或完全自定義的切換按鈕。由于ButtonType屬性控制組件的外觀，用戶可以讓他/她的按鈕看起來像標準按鈕<input type="submit|button" />元素，并且表現得像復選框或單選按鈕。以下是一些代碼示例，展示了如何實現這一點：

將RadButton控件配置為復選框：

要將 RadButton配置為復選框，必須執行以下步驟：

將按鈕的ToggleType屬性設置為“?CheckBox?”。

通過ButtonType屬性選擇所需的按鈕類型：

StandardButton?- 用于標準按鈕布局。
LinkBut??ton?- 用于鏈接按鈕布局。
ToggleButton?- 用于原生復選框布局。

通過Checked屬性定義復選框是否被選中。

可以通過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配置為單選按鈕，必須執行以下步驟：

將按鈕的ToggleType屬性設置為“?Radio?”。

通過ButtonType屬性選擇所需的按鈕類型：

StandardButton?- 用于標準按鈕布局。
LinkBut??ton?- 用于鏈接按鈕布局。
ToggleButton?- 用于原生單選按鈕布局。

通過Checked屬性定義是否選中單選按鈕。

為同一組內的單選按鈕的GroupName屬性設置一個通用值。

可以通過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，必須執行以下步驟：

將按鈕的ToggleType屬性設置為“?CustomToggle?”。

通過ButtonType屬性選擇所需的按鈕類型：

StandardButton?- 用于標準按鈕布局。
LinkBut??ton?- 用于鏈接按鈕布局。
ToggleButton?- 用于原生布局。

向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方法，以便在單擊禁用按鈕后可以對其進行檢查。

總結

以上是生活随笔為你收集整理的telerik学习记录-RadButton（上）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： EPSON机械手跟相机搭配走tcp/ip
下一篇： ios 监听一个控制器的属性_iOS 事