AJAX Control Toolkit

出自ProgWiki
跳至導覽 跳至搜尋

AJAX Control Toolkit

技術文件

應用範例

  • Extenders:
    • AlwaysVisibleControl（總是可看見的控制項）
    • Animation（動畫效果（淡入、淡出、……））
    • AutoComplete（自動輸入完成）
      1. 如果傳回的字串陣列，為數值的字串，如果字串前面有可能出現數字"0"的字元的話，需用單引號把字串先包起來。
      2. 相關：class AjaxHelper
    • BalloonPopup（氣球彈出）
    • 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中做處理
    • CollapsiblePanel（可收合式面板）
    • ColorPicker（色彩選取控制項）
    • ConfirmButton（確認按鈕）
      1. 當ConfirmButton用於GridView，而GridView又在UpdatePanel內時，GridView的CommandField轉成TemplateField時，會在按鈕的設定中，遺漏 UseSubmitBehavior="False" （VS2005已知bug），導致GridView的按鈕作用失效。
    • DragPanel（可拖曳式面板）
    • DropDown（下拉式選單）
    • DropShadow（陰影式面板）
    • DynamicPopulate（動態呈現）
    • FilteredTextBox（被過濾的文字輸入框）
    • HoverMenu（停駐選單）
    • HtmlEditor（HTML編輯用文字框）
      1. 需使用CSS，不然HTMLEditor的Toolbar會自動斷成數行，詳見#AJAX Control Toolkit 控制項的HTMLEditor的Toolbar斷成數行
      2. #AJAX Control Toolkit 控制項的HTMLEditor的中文化
    • ListSearch（可搜尋的選單）
    • MaskedEdit（被遮罩的編輯）
    • MaskedEditValidator（）
    • ModalPopup（強制回應的彈出式方塊）
      • 當ModalPopup內有TextBox時，可能會因為User按下Enter按鈕而誤觸發ModalPopup外的按鈕事件，解法是將TextBox設為 AutoPostBack="true"
    • MultiHandleSlider（）
    • MutuallyExclusiveCheckBox（互斥式核取方塊）
    • NumericUpDown（數值調整器）
    • PagingBulletedList（分頁式項目符號清單）
    • PasswordStrength（密碼複雜性提示）
    • PopupControl（彈出式控制項）
    • ResizableControl（可調整大小的控制項）
    • RoundedCorners（圓角效果）
    • Slider（滑桿）
    • SlideShow（圖檔播放）
    • 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斷成數行
Toolbar.js
/* 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的中文化

FixHtmleditorToolbar.js
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();
});

參考資料

取自「https://www.player.idv.tw/prog/index.php?title=AJAX_Control_Toolkit&oldid=16326」