Validierung der AJAX-Combobox mithilfe von JavaScript in ASP.NET

Hintergrund:

Klicken Sie hier, um ComboBoxValidation herunterzuladen

Bei der Arbeit müssen Sie möglicherweise AJAX ComboBox (Kombinationsfeld) verwenden, um das ASP.NET-Dropdown-Listensteuerelement zu ersetzen. Mit der Kombinationsbox funktioniert alles einwandfrei, bis wir mit der Überprüfung beginnen. Dann versuchen wir, es mit den von Chrome bereitgestellten Entwicklertools zu debuggen, um zu verstehen, wie die Kombinationsbox aufgebaut ist. Im Wesentlichen besteht es aus den folgenden drei Steuerelementen:

TextBox (Textfeld)

Button (Schaltfläche)

ListBox (Listenfeld)

Initial The Listenfeld-Steuerelemente sind ausgeblendet und werden angezeigt, wenn wir auf die Schaltfläche klicken, um einen Dropdown-Menüeffekt bereitzustellen.

Dann versuchen wir, JavaScript zu verwenden und die Client-ID des Kombinationsfelds an JavaScript zu übergeben und ihren Wert zu überprüfen. Das Kombinationsfeld kann immer noch nicht validiert werden, da ich eine Ausnahme wegen ungültigem Wert erhalte.

Nachdem wir einige Testmethoden verwendet hatten, erhielten wir eine Lösung mit

Funktion validierenCombobox() {
var ComboboxId = document.getElementById('_TextBox ');
if (comboboxId.value != null && comboboxId.value != "") {
alarm(comboboxId.value);
}
else {
al ert (" null value");
}
}

Aus dem obigen Code können Sie schließen, dass wir versuchen, die Textfeldsteuerung des Kombinationsfelds zu erhalten (es ist für die Anzeige verantwortlich). Der ausgewählte Wert und die Bereitstellung weiteren Benutzercodes erzeugen die gleichen verfügbaren Werte.

Aber wenn wir ihn auf einer Seite verwenden, die die Masterseite erbt, ist der HTML-Code anders und diese Methode ist nicht zuverlässig genug. Sie können dies anhand eines Blicks überprüfen in Ihrem Quellcode. Daher muss unsere Funktion wie folgt geändert werden:

functionvalidateCombobox() {
var comboboxId = document.getElementById('_ComboBox1_TextBox') ;
if (comboboxId .value != null && comboboxId.value != "") {
alarm(comboboxId.value);
}
else {
warning("null value" );
}
}

Das ist das eigentliche Problem. Wenn Sie nicht zwei verschiedene Funktionen schreiben möchten, um dieselbe Aufgabe auszuführen, können Sie dies tun Verwenden Sie den folgenden Code:

function activateCombobox() {
var id = document.getElementById('');
var inputs = id.getElementsByTagName( 'input');
var i ;
for (i = 0; i if (inputs[i].type == 'text') {
if (inputs[i].value ! = "" && inputs[i].value != null)
warning(inputs[i].value);
else
warning("null value" );
        break;
}
}
}

Im obigen Code können Sie sehen, dass wir die Kontrolle in JavaScript mit seiner Client-ID erhalten. Dann werden Sie feststellen, dass alle TagName-Eingabesteuerelemente in diesem benutzerdefinierten Steuerelement angezeigt werden. Jetzt führen wir eine Schleife aus, um das Textfeld zu finden und seinen Wert zu vergleichen (ob er ungültig ist oder nicht).

Ebenso können Sie mithilfe von JavaScript auf der Clientseite im Kombinationsfeld nach anderen Werten oder Aufgaben suchen, die Sie bearbeiten möchten.

Nachdem wir dieses Problem gelöst haben, werden wir ein neues Problem sehen: Wenn wir es in einem Div-Positionsattribut verwenden, sehen wir, dass das Listenfeld nicht unter der Textfeldsteuerung des Kombinationsfelds steht. Nach der Suche stellten wir fest, dass das Problem darin bestand, dass das Div eine Combobox mit einem Positionsattribut enthielt. Wenn wir also das Positionsattribut entfernen, funktioniert alles einwandfrei.

Das Listenfeld des Kombinationsfelds verfügt über ein Inline-Stylesheet, das das Attribut position:absolute enthält.

Aber um das Seitenlayout festzulegen, ist es notwendig, das Positionsattribut zu verwenden.

Später stellten wir fest, dass die Aufgabe abgeschlossen werden könnte, wenn wir das Positionsattribut von „absolut“ auf „fest“ überschreiben könnten. Wir können position:static für den gleichen Zweck verwenden.

Nach der Suche werden Sie feststellen, dass das Kombinationsfeld Folgendes integriert hat, das wir abdecken können:

.ajax__combobox_inputcontainer

.ajax__combobox_textboxcontainer

. ajax__combobox_buttoncontainer

.ajax__combobox_itemlist

Dazu verwenden wir folgenden Code:

.combo{
//your style
}
.combo .ajax__combobox_itemlist {
position: static ! important;
     }

Im obigen Code haben wir eine Klassennamenkombination erstellt, um das Positionsattribut der Elementlistenklasse zu überschreiben.

Wir alle wissen, dass Inline-Stylesheets eine höhere Priorität haben und alle widersprüchlichen Attribute weglassen. Sie werden schließlich angewendet und das letzte Stilattribut überschreibt alle übereinstimmenden Attribute.

Deshalb verwenden wir die Regel !important, um die Inline-Stileigenschaften des Stylesheets zu überschreiben, indem wir ihm eine höhere Priorität zuweisen.