65.9K
CodeProject 正在变化。 阅读更多。
Home

如何自定义新的 AjaxControlToolkit 工具

Joshua Blackstone
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.17/5 (4投票s)

2009年6月29日

CPOL

4分钟阅读

viewsIcon

43281

downloadIcon

612

如何自定义新的 AjaxControlToolkit 工具，例如 Editor、ColorPicker、ComboBox

AjaxTools

引言

Microsoft 在其最新的 AjaxControlToolkit 版本中发布了 3 个新控件。您可以 从这里 下载此版本。

新控件是

  1. HTMLEditor 控件
  2. ComboBox 控件
  3. ColorPicker 控件

这些控件最好的地方在于它们的自定义程度。Microsoft 提供的示例网站中包含文档，但我将简要介绍如何自定义这些控件。

背景

1. HTMLEditor 控件

此控件允许您为控件添加 HTML 格式，并允许对该控件进行大量自定义。

要创建您自己的自定义控件实例，您必须首先在您的 App_Code 文件夹中创建一个新类，并重写 FillTopToolbar 和 FillBottomToolbar 方法。通过这样做，您可以允许用户只使用某些功能，如果您只想让用户对格式进行基本控制，这将非常有用。详细信息包含在 App_Code/MyEditor.vb 的下载文件中。但是，要重写这些项目，您必须在类中包含以下内容。

Protected Overloads Overrides Sub FillTopToolbar()
End Sub 
Protected Overloads Overrides Sub FillBottomToolbar()
End Sub

完成后，您可以在要添加控件的页面中注册您的命名空间

<%@ Register Namespace="MyAjaxControls" TagPrefix="asp" ValidateRequest="false" %>

并从类中调用它。

您还可以使用 CSS 修改外观。可以修改以下属性

.ajax__htmleditor_editor_toptoolbar 
.ajax__htmleditor_editor_editpanel
.ajax__htmleditor_editor_bottomtoolbar
.ajax__htmleditor_editor_container
.ajax__htmleditor_toolbar_button
.ajax__htmleditor_toolbar_button_hover

在提供的示例中，我只是添加了一个类，其中顶部工具栏不包含链接，而底部工具栏只包含设计视图。您可以选择在底部工具栏中不包含任何内容，我认为这在大多数情况下对最终用户来说是理想的。一个快速的例子是将其用于内容管理系统或联系表单。一个快速的警告是，对于任何允许使用 HTML 标签的控件，安全性可能很快成为一个问题，并且您必须在页面顶部包含“ValidateRequest = False”才能允许 HTML 标签。如果您要包含一个联系我们页面，可能看起来会像

<%@ Page Language="VB" ValidateRequest="false" %>

<script runat="server">
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) 
'(1) Create the MailMessage instance (From, To) 
Dim strBody As String 
Dim mm As New MailMessage(txtEmail.Text, EMAIL@Email.com )
strBody = editor1.Content.ToString

(2) Assign the MailMessage's properties 
mm.Subject = "Message from Us" 
mm.Body = strBody
mm.IsBodyHtml = True 
'(3) Create the SmtpClient object 
Dim smtp As New SmtpClient
'(4) Send the MailMessage (will use the Web.config settings) 
smtp.Send(mm)
End Sub
</script> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:MyEditor ID="editor1" runat="server" CssClass="MyEditorStyle" />
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" />
</div>
</form>
</body>
</html>

同样，Microsoft 的示例网站中包含完整的文档。

2. Color Picker 控件

此控件的目的是让您拥有一个可以提供颜色选择器的扩展控件。有一些自定义程度，但大多数情况下，您只需要将控件放到页面上，并在指定 Textbox 的 TargetControlID 时，每次单击 TargetControl 时，它都会显示扩展器，为您提供颜色选择。如果您想自定义您的网站，这会非常有效。

如果您愿意，还可以提供一个 PopupButton 控件和一个 SampleControl ，以允许自定义 ColorPicker 的行为。

一个可能的应用场景是，如果您有一个希望允许自定义的面板。通过使用 ASP.NET 配置文件，您可以修改您的 web.config，使其看起来像

<profile enabled="true" defaultProvider="AspNetSqlProfileProvider">
<properties>
<add name="Color" allowAnonymous="true" defaultValue="White"/>
</properties>
</profile>

接下来，您将创建一个面板，其中包含一个 Color Picker 控件实例，该控件用于触发用户对该面板值的更改。例如，如果我们使用本文提供的示例，它将如下所示

<%@ Page Title="" Language="VB" MasterPageFile="~/Master.master" %>
<script runat="server">

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
ColorChoosePanel.Style.Add("background-color", Profile.Color)
End Sub

Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
If MyColor.Text.ToString <> "" Then
Profile.Color = MyColor.Text.ToString
LabelError.Text = ""
Else
LabelError.Text = "* Please select a Background Color!"
End If
End Sub
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Panel ID="ColorChoosePanel" runat="server" Width="70%">
<table>
<tr>
<td colspan="2">
<asp:Label ID="LabelError" runat="server" Font-Bold="true" />
</td>
</tr>
<tr>
<td>Select a Background Color: </td>
<td>
<asp:TextBox ID="MyColor" runat="server" />
<aspAjax:ColorPickerExtender ID="buttonCPE" runat="server" TargetControlID="MyColor" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:LinkButton ID="LinkButton1" runat="server" Font-Italic="true" 
	OnClick="LinkButton1_Click">Click to Set Panel Color</asp:LinkButton>
</td>
</tr>
</table>
</asp:Panel>
</asp:Content>

这是一个相当通用的示例，但您可以看到它在其他场景中也可能很有用。

3. ComboBox 控件

这可能是这 3 个控件中最好的。它采用了标准的下拉列表控件，并允许进行许多自定义选项，从而使控件更加有效。如果选择，它允许 AutoComplete （自动完成），如果选择，则自动附加，此外还有 3 个级别的外观自定义选项。如果还不够，您还可以通过使用以下方式指定样式

.ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
.ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
.ajax__combobox_itemlist

基本上，它可以在任何使用下拉列表控件的地方使用，但具有主题外观以及自动完成和自动填充功能的优势。我发现的一个缺点是它只包含两个服务器端事件，ItemInserting 和 ItemInserted。

提供的示例包括使用此控件填充美国州列表的功能。这比传统的下拉框更容易使用，例如，如果我想查找印第安纳州，我只需单击 IN 即可选中，而以前我总是知道单击“I”，然后按箭头键查找 IN。这节省了几秒钟，如果您习惯于数据录入，这可能非常有价值，特别是如果您试图查找长度超过两个或三个字符的项目。

我可以给出的最好的例子是使用一个包含许多姓名或地址的列表。使用传统的下拉列表，这可能很难滚动查找项目。在这里，您只需键入直到找到确切的项目，从而节省宝贵的时间。

关注点

本文很简短，但希望示例网站能为您在尝试自定义这些控件时节省一些时间。有关进一步的解释，http://www.asp.net 提供了所有这些控件的视频教程，这些教程做得非常好。

历史

  • 2009 年 6 月 29 日：添加了一些关于如何使用这些控件的示例
© . All rights reserved.