AJAX Control Toolkit

出自 ProgWiki
前往: 導覽搜尋

AJAX Control Toolkit

AJAX Control Toolkit版本

版本 發行日期 支援.Net版本 OpenSource
7.1213.0 2013-12-14
7.1005.0 2013-10-6
7.1002.0 2013-10-2
7.930.0 2013-9-30
7.725.0 2013-7-25
7.607.0 2013-6-9
7.429.0 2013-4-30
January 2013 Release (4.1.7.123版) 2013-1-24 3.5SP1,4.0,4.5
September 2012 Release (60919版) 2012-9-20 3.5SP1,4.0,4.5
June 2012 Release (60623版) 2012-6-25 3.5SP1,4.0
May 2012 Release (60501版) 2012-5-1 3.5SP1,4.0
November 2011 Release (51116版) 2011-11-17 3.5SP1,4.0
September 2011 Release (50927版) 2011-9-27 3.5SP1,4.0
July 2011 Release (50731版) 2011-7-31 3.5SP1,4.0
May 2011 Release (50508版) 2011-5-6 3.5SP1,4.0
50401版 2011-4-1 3.5SP1,4.0
40412版 2010-4-12 3.5SP1,4.0
30930版 2009-9-30 3.5SP1
30512版 2009-5-13 3.5SP1
20820版 2008-8-20 3.5SP1
20229版 2008-2-29 2.0,3.5
11119版 2007-11-29 2.0,3.5
10920版 2007-09-20 2.0,3.5
10618版 2007-06-18 2.0,3.5
10606版 2007-06-06 2.0
10301版 2007-03-01 2.0

AJAX Control Toolkit 控制項

控制項名稱 用途 備註
Accordion 手風琴摺疊效果
AlwaysVisibleControl 總是可看見的控制項
Animation 動畫效果(淡入、淡出、……)
AutoComplete 自動輸入完成
  1. 如果傳回的字串陣列,為數值的字串,如果字串前面有可能出現數字"0"的字元的話,需用單引號把字串先包起來。參照:[1]
  2. 相關:class AjaxHelper
Calendar 月曆控制項(輸入日期用)
CascadingDropDown 連動式階層下拉式選單
  1. aspx檔的 Page需用 EnableEventValidation="false"
  2. TargetControlID 的 DropDownList 如果位於 UpdatePanel 內的話,禁用 AutoPostBack="true" 與 SelectedValue='<%# Bind("資料繫結的欄位名稱") %>'> 的組合,也就是不能用AutoPostBack,不然會導致DropDownList陷入一直閃爍,而無法下拉其DropDownList的選項
  3. 關於DropDownList的預設值與資料繫結,除了DropDownList用SelectedValue='<%# Bind("繫結欄位") %>'> , CascadingDropDown 也用 Category='<%# Eval("繫結欄位") %>' ,再從CascadingDropDown所對應的WebService中做處理,詳細寫法參照:[2]
CollapsiblePanel 可收合式面板
ColorPicker 色彩選取控制項
ComboBox ComboBox
ConfirmButton 確認按鈕
  1. 當ConfirmButton用於GridView,而GridView又在UpdatePanel內時,GridView的CommandField轉成TemplateField時,會在按鈕的設定中,遺漏 UseSubmitBehavior="False" (VS2005已知bug),導致GridView的按鈕作用失效。
DragPanel 可拖曳式面板
DropDown 下拉式選單
DropShadow 陰影式面板
DynamicPopulate 動態呈現
FilteredTextBox 被過濾的文字輸入框
HTMLEditor HTML編輯用文字框
HoverMenu 停駐選單
ListSearch 可搜尋的選單
MaskedEdit 被遮罩的編輯
ModalPopup 強制回應的彈出式方塊
  • 範例
  • 當ModalPopup內有TextBox時,可能會因為User按下Enter按鈕而誤觸發ModalPopup外的按鈕事件,解法是將TextBox設為 AutoPostBack="true"
MutuallyExclusiveCheckBox 互斥式核取方塊
NoBot 非機器人
NumericUpDown 數值調整器
PagingBulletedList 分頁式項目符號清單
PasswordStrength 密碼複雜性提示
PopupControl 彈出式控制項
Rating 評等
ReorderList 順序重排清單
ResizableControl 可調整大小的控制項
RoundedCorners 圓角效果
Slider 滑桿
SlideShow 圖檔播放
Tabs 索引標籤
  1. 當Tabs內有使用到GridView,並有使用到GridView的分頁時,必須使用UpdatePanel把Tabs包起來。不然的話,會導致當使用者點選GridView的分頁時,導致Tabs自動跳於預設的Tab頁面,而使得原本預期的GridView分頁無法正常顯示。
TextboxWatermark 浮水印文字方塊
ToggleButton 核取方塊切換按鈕
  1. ToggleButtonExtender 的 ImageWidth 與 ImageHeight 不可小於要顯示的圖檔長寬,不然會導致顯示時, 圖檔下方或右方被裁切。
UpdatePanelAnimation 更新面版的動畫效果
ValidatorCallout 外顯式對話方塊驗證器

FAQ

AJAX Control Toolkit沒有顯示出中文介面?

  1. 在【ScriptManager】或【ToolkitScriptManager】,裡面有兩個屬性【EnableScriptGlobalization】、【EnableScriptLocalization】,把這兩個屬性預設由False改為True
  2. 修改Web.config檔,在<system.web>區塊中加入UI文化特性的設定<globalization culture="zh-TW" uiCulture="zh-TW" />

無法載入檔案或組件 'AjaxControlToolkit' 或其相依性的其中之一。 系統找不到指定的檔案

  1. 更新你的網站上,所參考的 AjaxControlToolkit 之後……
  2. 要記得把 Visual Studio 的工具箱裡的 AjaxControlToolkit,刪掉後,重抓一次。
  3. 不然你的網站會與你的開發工具(Visual Studio)裏的 AjaxControlToolkit 產生版本衝突。

AJAX Control Toolkit 控制項的HTMLEditor的Toolbar斷成數行

  • 當在UpdatePanel裡使用HTMLEditor時,可能導致HTMLEditor使用的下列css無法正常載入,而導致HTMLEditor的Toolbar斷成數行
/* base layout */
.ajax__htmleditor_editor_base .ajax__htmleditor_editor_container
{
	border-collapse: separate;
	empty-cells: show;
	width:100%;
	height:100%;
}
.ajax__htmleditor_editor_base .ajax__htmleditor_editor_toptoolbar
{
	cursor:text;
}
.ajax__htmleditor_editor_base .ajax__htmleditor_toolbar_button
{
	height: 21px; white-space: nowrap; border-width: 0px; padding:0px; cursor:pointer; float:left;
}
.ajax__htmleditor_editor_base img.ajax__htmleditor_toolbar_button
{
	width: 23px;
}
.ajax__htmleditor_editor_base div.ajax__htmleditor_toolbar_button span.ajax__htmleditor_toolbar_selectlable
{
    padding:0px 2px; vertical-align:middle; cursor:text;
}
.ajax__htmleditor_editor_base div.ajax__htmleditor_toolbar_button select.ajax__htmleditor_toolbar_selectbutton
{
    vertical-align:middle; padding:0px; margin:0px; height: 20px; width:120px;
}
.ajax__htmleditor_editor_base div.ajax__htmleditor_toolbar_button select.ajax__htmleditor_toolbar_selectbutton option
{
    vertical-align:middle;
}
.ajax__htmleditor_editor_base .ajax__htmleditor_editor_editpanel
{
	height:100%;
}
.ajax__htmleditor_editor_base .ajax__htmleditor_editor_bottomtoolbar
{
	cursor:text;
}
 
/* default theme */
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_container
{
	border: 1px solid #C2C2C2;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_toptoolbar
{
	background-color:#F0F0F0; padding: 0px 2px 2px 2px;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_toptoolbar .ajax__htmleditor_toolbar_button
{
	background-color:#C2C2C2; margin:2px 0px 0px 0px;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_toptoolbar .ajax__htmleditor_toolbar_button_hover
{
	background-color:#3C8AFF;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_toptoolbar div.ajax__htmleditor_toolbar_button span.ajax__htmleditor_toolbar_selectlable
{
    font-family:Arial; font-size:12px; font-weight:bold;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_toptoolbar div.ajax__htmleditor_toolbar_button select.ajax__htmleditor_toolbar_selectbutton
{
    font-size:12px; font-family:arial; cursor:pointer;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_toptoolbar div.ajax__htmleditor_toolbar_button select.ajax__htmleditor_toolbar_selectbutton option
{
    font-size:12px;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_editpanel
{
	border-width: 0px;
	border-top: 1px solid #C2C2C2;
	border-bottom: 1px solid #C2C2C2;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_bottomtoolbar
{
	background-color:#F0F0F0; padding: 0px 0px 2px 2px;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_bottomtoolbar .ajax__htmleditor_toolbar_button
{
	background-color:#C2C2C2; margin:0px 4px 0px 0px;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_bottomtoolbar .ajax__htmleditor_toolbar_button_hover
{
	background-color:#3C8AFF;
}

AJAX Control Toolkit 控制項的HTMLEditor的中文化

function FixHtmleditorToolbar() {
    var objToolbar = {
        Undo: '取消',
        Redo: '重做',
        Bold: '粗體',
        Italic: '斜體',
        Underline: '底線',
        'Strike through': '刪除線',
        'Sub script': '下標字',
        'Super script': '上標字',
        'Left to right direction': '左向右書寫',
        'Right to left direction': '右向左書寫',
        //'Foreground color': '文字顏色',
        'Clear foreground color': '清除文字顏色',
        //'Background color': '底色',
        'Clear background color': '清除底色',
        'Remove styles': '移除所有格式',
        Cut: '剪下',
        Copy: '複製',
        Paste: '貼上',
        'Paste Plain Text': '貼上純文字',
        'Paste from MS Word (with cleanup)': '貼上(從MS Word)',
        'Decrease Indent': '減少縮排',
        'Increase Indent': '增加縮排',
        'Make Paragraph': '段落',
        'Justify Left': '靠左對齊',
        'Justify Center': '置中',
        'Justify Right': '靠右對齊',
        Justify: '',
        'Remove Alignment': '',
        'Ordered List': '數字列表',
        'Bulleted List': '符號列表',
        'Insert horizontal rule': '插入水平線',
        'Insert/Edit URL link': '插入或編輯超連結',
        'Remove Link': '移除超連結',
        'Design mode': '設計模式',
        'HTML text': 'HTML碼',
        Preview: '預覽'
    };
 
    //按鈕說明修正1
    jQuery.each(objToolbar, function (key, val) {
        $("img.ajax__htmleditor_toolbar_button[title='" + key + "']").attr('title', val);
    });
 
    ///按鈕說明修正2. 'Foreground color', 'Background color'
    $('img[title="Foreground color"], div[title="Foreground color"]').attr('title', '文字顏色');
    $('img[title="Background color"], div[title="Background color"]').attr('title', '底色');
 
 
    //'Size'與'Font'修正
    jQuery.each($('span.ajax__htmleditor_toolbar_selectlable'),function (key, val) {
        //var sText = $(val).text().trim();
        //if (sText == 'Font') $(val).text('字型');
        //else if (sText == 'Size') $(val).text('尺寸');
        var sText = $(val).text();
        if (sText == 'Font ') $(val).text('字型 ');
        else if (sText == 'Size ') $(val).text('尺寸 ');
    });
 
    //'Size'與'Font'的選單修正
    jQuery.each($('select.ajax__htmleditor_toolbar_selectbutton'), function (key, val) {
        var sStyle = $(val).attr('style');
        if (typeof sStyle === "undefined") {
            //Font
            //<option value="">default</option><option value="arial,helvetica,sans-serif">Arial</option><option value="courier new,courier,monospace">Courier New</option><option value="georgia,times new roman,times,serif">Georgia</option><option value="tahoma,arial,helvetica,sans-serif">Tahoma</option><option value="times new roman,times,serif">Times New Roman</option><option value="verdana,arial,helvetica,sans-serif">Verdana</option><option value="impact">Impact</option><option value="wingdings">WingDings</option>
            $(val).html('<option value="">預設</option><option value="細明體">細明體</option><option value="新細明體">新細明體</option><option value="標楷體">標楷體</option><option value="微軟正黑體">微軟正黑體</option><option value="arial,helvetica,sans-serif">Arial</option><option value="courier new,courier,monospace">Courier New</option><option value="georgia,times new roman,times,serif">Georgia</option><option value="tahoma,arial,helvetica,sans-serif">Tahoma</option><option value="times new roman,times,serif">Times New Roman</option><option value="verdana,arial,helvetica,sans-serif">Verdana</option><option value="impact">Impact</option><option value="wingdings">WingDings</option>');
        } else {
            //Size
            //<option value="">default</option><option value="8pt">1 ( 8 pt)</option><option value="10pt">2 (10 pt)</option><option value="12pt">3 (12 pt)</option><option value="14pt">4 (14 pt)</option><option value="18pt">5 (18 pt)</option><option value="24pt">6 (24 pt)</option><option value="36pt">7 (36 pt)</option>
            $(val).html('<option value="">預設</option><option value="8pt">1 ( 8 pt)</option><option value="10pt">2 (10 pt)</option><option value="12pt">3 (12 pt)</option><option value="14pt">4 (14 pt)</option><option value="18pt">5 (18 pt)</option><option value="24pt">6 (24 pt)</option><option value="36pt">7 (36 pt)</option>');
        }
    });
 
/* 以下在部份瀏覽器可能無法正常運作
    var appName = window.navigator.appName;
    var appCodeName = window.navigator.appCodeName;
    var userAgent = window.navigator.userAgent;
 
    if ((appName.indexOf("Netscape") != -1) &&
		(appCodeName.indexOf("Mozilla") != -1) &&
		(userAgent.indexOf("Firefox") != -1)) 
    {
    //常用標點符號點擊插入(IE不支援? 所以只有FireFox才開此功能)        
    var objChar = {
        ',':'逗點',
        '、':'頓號',
        '。':'句點',
        '?':'問號',
        '!':'驚嘆號',
        ';':'分號',
        ':': '冒號',
        '「':'單引號(左)',
        '」':'單引號(右)',
        '『':'雙引號(左)',
        '』':'雙引號(右)',
        '(':'小括號(左)',
        ')':'小括號(左)',
        '—':'連接符號',
        '…':'省略符號'
    };
    var CharInsert = "&nbsp;";
    jQuery.each(objChar, function (key, val) {
        CharInsert = CharInsert + "<span class='ajax__htmleditor_toolbar_CharInsert' title='" + val + "'><a>" + key + "</a></span>&nbsp;";
    });
    var toptoolbar = $('td.ajax__htmleditor_editor_toptoolbar > div');
    toptoolbar.html(toptoolbar.html() + CharInsert);
 
    $("span.ajax__htmleditor_toolbar_CharInsert > a").click(function () {
        var id = $('div.ajax__htmleditor_editor_base').attr('id');
        var editor = $find(id).get_editPanel().get_activePanel();
 
        try {
            //設計模式
            if (typeof editor._saveContent == 'function') {
                editor._saveContent();
 
                var _div = editor._doc.createElement("div");
                _div.innerHTML = $(this).text();
 
                var el = _div.firstChild;
                var place = editor._getSafePlace();
                if (!place) return false;
 
                var parent = place.parentNode;
 
                parent.insertBefore(el, place);
                parent.removeChild(place);
 
                el = (el.nextSibling) ? el.nextSibling : el;
                Sys.Extended.UI.HTMLEditor._setCursor(el, editor);
                setTimeout(function () { editor.onContentChanged(); editor._editPanel.updateToolbar(); }, 0);
 
                editor.focusEditor();
                return false;
            } else {
                //HTML模式
 
                var myField = editor._element;
                var myChar = $(this).text();
 
                if (document.selection) {
                    //IE support
                    myField.focus();
                    var sel = document.selection.createRange();
                    sel.text = myChar;
                }
                else if (myField.selectionStart || myField.selectionStart == '0') {
                    //Mozilla/Firefox/Netscape 7+ support
                    var startPos = myField.selectionStart;
                    var endPos = myField.selectionEnd;
                    myField.value = myField.value.substring(0, startPos) + myChar + myField.value.substring(endPos, myField.value.length);
                } else {
                    myField.value += myChar;
                }
 
                return false;
            }
        } catch (e) {
            alert(e.toString());
        }
    });
    }
*/
}
 
//以下為OnLoadHook機制(依實際需求加掛)
var OnLoadHook = {};
 
OnLoadHook.HtmleditorToolbar = { func: function (sender) {
    FixHtmleditorToolbar();
}};
 
function CallOnLoadHook() {
    for(var name in OnLoadHook)
    {
        OnLoadHook[name].func();
    }
}
 
$(document).ready(function () {
    CallOnLoadHook();
});