首頁 > php教程 > PHP开发 > 在ASP.NET中使用JavaScript驗證AJAX組合框

在ASP.NET中使用JavaScript驗證AJAX組合框

高洛峰
發布: 2016-11-28 13:42:30
原創
1186 人瀏覽過

背景:

點擊下載ComboBoxValidation

工作中可能會出現必須用AJAX ComboBox(組合框)取代ASP.NET的下來列表控制。使用組合框,一切運作良好,直到開始校驗它,然後我們嘗試用chrome提供的開發者工具調試,由此得知組合框是如何形成的。基本上是由以下三個控制組成:

TextBox(文字方塊)

Button(按鈕)

ListBox(列錶框)

起初列錶框控制都是隱藏的,當我們點擊按鈕提供下拉式選單效果時它才顯示。

然後我們嘗試使用JavaScript並傳送組合框客戶ID給JavaScript並檢查其值,依然不能校驗組合框,因為我得到了無效值異常。

在使用一些試用方法,我們即獲得一個解決方案,所用

function validateCombobox() {
    var comboboxId = document.getElementByBox('        alert(comboboxId.value);
   value");
    }
}


從上述代碼你能夠判斷我們是試圖取得組合方塊的文字方塊控制(它負責顯示選取值並為進一步的使用者程式碼建立相同的可用值。

但是當我們在繼承masterpage的頁面使用它,然後HTML就不一樣了,這個方法就不夠可靠了。

    if (comboboxId.value != null && comboboxId.value != "") {

       

        alert("null value");

    }

}




這才是真正的問題。 >');
    var inputs = id.getElementsByTagName('input');
    var i;
    for (i= 05;    if (inputs[i].type == 'text ') {

            if (inputs[i].value != "" && inputs[i].value ].value);

            else在ASP.NET中使用JavaScript驗證AJAX組合框              break;

        }

    }

}



在上述程式碼中你可以看到我們在JavaScript中使用其客戶ID控制。然後會發現所有TagName input控制都會出現在那個自訂控制中。現在我們運行一個循環來找到文字方塊並比較其值(無論它是否無效)。

同樣地,你可以檢查你想要在客戶端用JavaScript處理組合框的其它值或任務。

在解決這個之後,會看到一個新的問題——當在一個div位置屬性使用它時,我們看到列錶框不在組合框的文字框控制下。在搜尋之後我們得知問題在於div包含含有位置屬性的組合方塊。因此當我們移除位置屬性,一切都運作正常了。




組合框的列錶框有內嵌樣式表,包含position:absolute屬性。

但為了設定頁面佈局,有必要使用位置屬性。

之後我們發現,如果能夠從absolute到fixed覆寫位置屬性,任務就能完成。我們可以為相同的目的用position:static。

在搜尋後會發現組合框有如下內建供我們覆蓋:

.ajax__combobox_inputcontainer 

.ajax__combobox_textboxcontainer

.ajax__

.combo{

//your style

     }

   .combo .ajax__combobox_itemlist{

       .combo .ajax__combobox_itemlist{
        position 覆蓋項目清單類別的位置屬性。

我們都知道,內聯樣式表有更高的優先權並省去了所有矛盾的屬性,它們最終被應用,最後的樣式屬性覆蓋所有值錢匹配的屬性。

因此我們用!important規則,透過給樣式表指定更高的優先權來幫助覆蓋樣式表的內聯樣式屬性。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板