ASP.NET で JavaScript を使用して AJAX コンボボックスを検証する

背景:

クリックして ComboBoxValidation をダウンロードします

職場では、ASP.NET ドロップダウン リスト コントロールを置き換えるために AJAX ComboBox (コンボ ボックス) を使用する必要がある場合があります。コンボ ボックスを使用すると、検証を開始するまではすべて正常に動作します。その後、Chrome が提供する開発者ツールを使用してデバッグを試み、コンボ ボックスがどのように形成されるかを理解します。基本的に次の 3 つのコントロールで構成されます:

TextBox (テキスト ボックス)

Button (ボタン)

ListBox (リスト ボックス)

最初はリスト ボックス コントロールが非表示になっており、ボタンをクリックすると表示されます。ドロップダウン メニュー エフェクトが有効な場合にのみ表示されます。

次に、JavaScript を使用してコンボ ボックスのクライアント ID を JavaScript に渡し、その値を確認しましたが、無効な値の例外が発生したため、コンボ ボックスを検証できませんでした。

いくつかの試用方法を使用した後、

function validateCombobox() {
var comboboxId = document.getElementById('_TextBox');
if (comboboxId .value ! = null && comboboxId.value != "") {
alert(comboboxId.value);
}
else {
alert("null value");
}
}

上記のコードから判断できますコンボ ボックスのテキスト ボックス コントロールを取得しようとしています (選択された値を表示し、その後のユーザー コードで使用可能な同じ値を作成する役割を果たします)

ただし、マスターページを継承するページでそれを使用する場合、HTML は異なります、このメソッドは十分に信頼できるものではありません。そのため、関数を次のように変更する必要があります。

function validateCombobox() {
var comboboxId = document.getElementById(' _ComboBox1_TextBox');
if (comboboxId.value != null && comboboxId.value != "") {
alert(comboboxId.value);
}
else {
alert("null value ");
}
}

これが本当の問題です。同じタスクを実行するために 2 つの異なる関数を作成したくない場合は、次のコードを使用できます。

function validateCombobox() {
var id = document.getElementById('');
var inputs = id.getElementsByTagName('input');
var i;
for (i = 0; i if (inputs[i ].type == 'text') {
alert( "null value");
ブレーク;その後、すべての TagName 入力コントロールがそのカスタム コントロールに表示されることがわかります。次に、ループを実行してテキストボックスを検索し、その値 (無効かどうか) を比較します。

同様に、クライアント側のJavaScriptを使用して処理したいコンボボックスの他の値やタスクを確認することができます。

これを解決すると、新しい問題が発生します。これを div 位置属性で使用すると、リスト ボックスがコンボ ボックスのテキスト ボックス コントロールの下にないことがわかります。検索した結果、div に位置属性を持つコンボボックスが含まれていることが問題であることがわかりました。したがって、position 属性を削除すると、すべてが正常に機能します。

コンボボックスのリストボックスには、position:absolute属性を含むインラインスタイルシートがあります。

ただし、ページレイアウトを設定するには、position属性を使用する必要があります。

後で、位置属性を絶対から固定にオーバーライドできれば、タスクを完了できることがわかりました。同じ目的で、position:static を使用できます。

検索すると、コンボ ボックスに次の組み込みが含まれていることがわかります。

これには次のコードを使用します:

.combo{

//your Style

} om .combo .ajax__combobox_itemlist {

posity: state! 重要;

}

プロジェクト リスト クラスの location 属性をカバーするクラス名の組み合わせを作成しました。 。

インライン スタイルシートの優先順位が高く、矛盾する属性がすべて省略されることは誰もが知っています。それらは最終的に適用され、最後のスタイル属性が一致するすべての属性をオーバーライドします。

そこで、! important ルールを使用して、スタイル シートのインライン スタイル プロパティを優先してオーバーライドできるようにします。