Dieser Artikel kombiniert Beispiele, um zu beschreiben, wie man clientseitige Javascript-Skripte in ASP.net-Anwendungen verwendet, um die Effizienz der Programmausführung zu verbessern und mehr Funktionen zu erreichen.
1. ASP.Net und Javascript
.Net ist der Kern der Strategie der nächsten Generation von Microsoft, und ASP.Net ist die spezifische Implementierung der .Net-Strategie in der Webentwicklung. Es übernimmt die Einfachheit und Benutzerfreundlichkeit von ASP und überwindet gleichzeitig die Mängel von ASP-Programmen, die schlecht strukturiert und schwer zu lesen und zu verstehen sind. Insbesondere die Einführung serverseitiger Steuerungen und ereignisgesteuerter Modelle hat die Entwicklung von Webanwendungen in der Vergangenheit näher an die Entwicklung von Desktop-Programmen herangeführt.
In verschiedenen Artikeln und Büchern, in denen ASP.Net vorgestellt wird, liegt der Schwerpunkt auf Serversteuerungen und dem .Net Framework SDK, da dies die neuesten und revolutionärsten Verbesserungen in ASP.Net sind, im Gegensatz zu clientseitigem Skript-Javascript (einschließlich VBScript). spielte in der Vergangenheit eine wichtige Rolle und wird selten erwähnt. Es scheint, dass bei serverseitigen Programmen keine clientseitigen Skripte mehr erforderlich sind. Das serverseitige Programm erfordert jedoch eine Interaktion zwischen dem Browser und dem Webserver. Bei ASP.Net handelt es sich um eine Seitenübermittlung, die das Hin- und Hersenden einer großen Datenmenge erfordert, z B. Eingabeverifizierung oder Löschbestätigung, sind völlig ok. Mit Javascript umgesetzt. Daher muss noch untersucht werden, wie Javascript in ASP.Net verwendet wird.
2. Beispiele für Javascript-Anwendungen
1. Hinzufügen eines Javascript-Ereignisses zu einem Serversteuerelement auf der Seite
Das Serversteuerelement generiert letztendlich gewöhnlichen HTML-Code, z. B. <asp:textbox>, der Eingabetext generiert. Jedes HTML-Steuerelement im Formular verfügt über ein eigenes Javascript-Ereignis, z. B. Textbox hat ein Onchange-Ereignis, Button hat ein Onclick-Ereignis, Listbox hat ein Onchange-Ereignis usw. Um clientseitige Ereignisse zu einem Serversteuerelement hinzuzufügen, müssen Sie die Attributes-Eigenschaft verwenden. Das Attribut „Attribute“ ist ein Attribut, über das alle Serversteuerelemente verfügen. Es wird verwendet, um dem endgültig generierten HTML einige benutzerdefinierte Tags hinzuzufügen. Angenommen, es gibt eine Speichern-Schaltfläche btnSave im Webformular und Sie möchten den Benutzer fragen, ob er wirklich speichern möchte, wenn er auf diese Schaltfläche klickt (z. B. kann die Speicherung nach dem Speichern nicht wiederhergestellt werden usw.). Der folgende Code sollte dies tun zum Page_Load-Ereignis hinzugefügt werden:
if not page.isPostBack() then
btnSave.Attributes.Add("onclick","Javascript:return bestätigen('Sind Sie sicher, dass Sie speichern?');")
end if
Es sollte beachtet werden „return“ darf nicht weggelassen werden, andernfalls werden die Daten auch dann gespeichert, wenn der Benutzer auf „Abbrechen“ klickt.
2. Fügen Sie für jede Zeile im Datagrid ein Javascript-Ereignis hinzu
. Wenn der Benutzer auf diese Schaltfläche klickt, wird er hoffentlich gefragt, ob er diesen Datensatz wirklich löschen möchte Der Benutzer klickt auf die falsche Zeile oder klickt einfach versehentlich auf die Schaltfläche „Löschen“.
Unabhängig vom Namen dieser Löschschaltfläche kann nicht wie im vorherigen Beispiel direkt auf sie verwiesen werden, da jede Zeile über eine solche Schaltfläche verfügt und es sich um untergeordnete Steuerelemente im Datagrid handelt. In diesem Fall müssen Sie das OnItemDataBound-Ereignis des Datagrids verwenden. Das OnItemDataBound-Ereignis tritt auf, nachdem jede Datenzeile im Datagrid an das Datagrid gebunden wurde (d. h. es wird einmal pro Zeile ausgelöst). Fügen Sie zunächst den folgenden Code zur Datagrid-Deklaration hinzu:
<asp:datagrid id="grd1" runat="server" OnItemDataBound = "ItemDataBound" >
...Columns definition here
</asp:datagrid> Hier wird erklärt, dass der ItemDataBound Wenn die Methode aufgerufen wird, wenn das OnItemDataBound-Ereignis auftritt, fügen Sie die Definition dieser Methode in die Code-Behind-Datei ein:
Sub ItemDataBound(ByVal sender As Object, ByVal e As DataGridItemEventArgs)
Wenn e.Item.ItemType <> ListItemType.Header und e.Item.ItemType <> ListItemType.Footer, dann
dimmen Sie oDeleteButton als LinkButton = e.Item.Cells(5). Controls(0)
oDeleteButton.Attributes("onclick") = "javascript:return Confirm ('Sind Sie sicher, dass Sie löschen möchten" & DataBinder.Eval(e.Item.DataItem, "m_sName") & "?')"
Ende Wenn
End Sub
Da die Titelzeile und die Fußzeile von Datagrid dieses Ereignis ebenfalls auslösen, wird zunächst beurteilt, dass die Zeile, die dieses Ereignis auslöst, nicht die Titelzeile oder Fußzeile ist. Hier wird davon ausgegangen, dass sich die Schaltfläche „Löschen“ in Spalte 6 des Datagrids befindet (die erste Spalte ist 0) und die Datenquelle des Datagrids eine Spalte mit dem Namen „m_sName“ enthält.
3． Verweis auf die Steuerelemente im Datagrid im Bearbeitungszustand
Die integrierte Bearbeitungsfunktion des Datagrid ist eine Bearbeitungsmethode, wenn die Anzahl der Felder im Datensatz gering ist. Der Benutzer muss zum Bearbeiten des Datensatzes keine separate Seite aufrufen, sondern kann direkt auf die Schaltfläche „Bearbeiten“ klicken, um die aktuelle Zeile in den Bearbeitungsmodus zu versetzen. Andererseits gibt es einige Javascript-Programme, die auf den Namen des Steuerelements verweisen müssen. Viele Programme bieten beispielsweise eine Datumssteuerung, wenn der Benutzer ein Datum eingeben muss, um die Rechtmäßigkeit des Datumsformats sicherzustellen. Wenn der Benutzer auf das Steuerungssymbol klickt, wird ein neues Fenster angezeigt, in dem er ein Datum auswählen kann. Zu diesem Zeitpunkt müssen Sie die ID des Textfelds angeben, das das Datum im neuen Fenster anzeigt, damit der Wert in das Textfeld eingefügt werden kann, wenn der Benutzer das Datum auswählt.
Wenn es sich um ein gewöhnliches Server-Textfeldsteuerelement handelt, ist seine ID dieselbe wie die ID des generierten HTML-Eingabefelds, aber im Bearbeitungsstatus von Datagrid sind die beiden IDs nicht identisch (der Grund ist derselbe wie im obigen Beispiel). ), was die Verwendung der ClientID-Eigenschaft des Steuerelements erfordert.
Protected Sub ItemEdit(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
Dim sDateCtrl as string
sDateCtrl = grd1. FindControl("txtDate") . ClientID
End Sub
Es wird hier davon ausgegangen, dass die ItemEdit-Methode der OnItemEdit-Ereignishandler des Dategrids ist und dass die dritte Spalte des Datagrids ein Server-Textfeld-Steuerelement mit dem Namen txtDate enthält.
4.
sich auf das von ASP.Net automatisch generierte Javascript-Programm bezieht,
richtet sich an Entwickler. Im generierten HTML-Quellprogramm wird nicht zwischen Server und Client unterschieden Javascript. Der Grund, warum es auf Benutzereingaben reagieren kann, besteht darin, dass der Ereignishandler jedes Steuerelements schließlich ein Skript generiert. Dieses Skript sendet die Seite erneut, damit der Webserver erneut reagieren und verarbeiten kann. Normalerweise müssen wir nicht wissen, was dieses Skript ist, oder dieses Skript direkt aufrufen, aber in manchen Fällen kann ein geeigneter Aufruf dieses Skripts viel Arbeit vereinfachen. Schauen Sie sich die folgenden zwei Beispiele an.
● Klicken Sie auf eine beliebige Stelle im Datagrid, um eine Zeile auszuwählen.
Das Datagrid bietet eine integrierte Auswahlschaltfläche. Wenn Sie auf diese Schaltfläche klicken, wird die aktuelle Zeile ausgewählt (die SelectedItemStyle-Eigenschaft kann so festgelegt werden, dass die aktuelle Zeile anders aussieht). Allerdings sind Benutzer möglicherweise eher daran gewöhnt, eine Zeile durch Klicken auf eine beliebige Stelle auszuwählen. Es wäre ziemlich umständlich, diese Funktion vollständig selbst zu implementieren. Eine gute Idee ist es, eine Auswahlschaltfläche hinzuzufügen, die Spalte jedoch auszublenden und das von dieser Schaltfläche generierte Javascript aufzurufen, wenn auf eine Zeile geklickt wird.
Sub Item_Bound(ByVal sender As Object, ByVal e As DataGridItemEventArgs )
Dim itemType As ListItemType
itemType = CType(e.Item.ItemType, ListItemType)
If (itemType <> ListItemType.Header) And _
(itemType <> ListItemType.Footer) And _
(itemType <> ListItemType.Separator) Dann
Dim oSelect As LinkButton = CType(e.Item.Cells(5).Controls(0), LinkButton)
e.Item.Attributes("onclick") = Page. ")
End Sub
Dies setzt voraus, dass sich die Auswahlschaltfläche in Spalte 6 befindet. e.Item stellt eine Zeile dar. Dem generierten HTML nach zu urteilen, wird jedem <tr> ein Onclick-Ereignis hinzugefügt. Die Page.GetPostBackClientHyperLink-Methode gibt das vom LinkButton-Steuerelement auf der Seite generierte Client-Skript zurück. Der erste Parameter ist das Linkbutton-Steuerelement und der zweite Parameter ist der an dieses Steuerelement übergebene Parameter, der normalerweise leer ist. Wenn es sich nicht um ein LinkButton-Steuerelement handelt, gibt es eine ähnliche Funktion, auf die sich Leser bei GetPostBackClientEvent beziehen können.
● Vom Server generierte Skripte stehen in Konflikt mit manuell hinzugefügten Skripten.
Serverereignisse von Serversteuerelementen entsprechen im Allgemeinen den entsprechenden Ereignissen von Clientsteuerelementen. Beispielsweise entspricht das SelectedIndexChanged-Ereignis von Dropdownlist dem onchange-Ereignis von HTML <Select>. Wenn Sie ein Onchange-Ereignis manuell hinzufügen möchten, werden auf der Clientseite zwei Onchanges generiert und einer wird vom Browser ignoriert. Beispielsweise möchte der Benutzer jedes Mal, wenn er die Optionen in der Dropdown-Liste ändert, in der Datenbank speichern (obwohl dies nicht sehr häufig vorkommt, aber dieser Bedarf besteht), aber gleichzeitig möchte er den Benutzer auch daran erinnern, ob er möchte unbedingt sparen. Offensichtlich sollte der gespeicherte Code im SelectedIndexChanged-Ereignis platziert werden und die Erinnerung sollte manuell mit einem onchange-Ereignis hinzugefügt werden. Das Ergebnis ist, dass nur einer der beiden onchanges ausgeführt werden kann. Die richtige Methode sollte darin bestehen, eine unsichtbare Schaltfläche zum Speichern hinzuzufügen und das von dieser Schaltfläche generierte Programm im manuell hinzugefügten onchange-Ereignis aufzurufen.
Die Page_Load-Methode lautet wie folgt:
Dim sCmd als String
sCmd=Page.GetPostBackClientHyperlink(btnUpdate, "")
If not page.isPostback then
Dropdownlist1.Attributes.add("onchange","ConfirmUpdate(""" & sCmd & """ )")
Ende wenn
Die Funktion „ConfirmUpdate“ lautet wie folgt:
<Script language=“javascript“>
function ConfirmUpdate(cmd){
if bestätigen(“Sind Sie sicher, dass Sie aktualisieren?)
eval(cmd);
}
</Script>
Die Javascript-Funktion „eval“ wird hier verwendet Rufen Sie die darin enthaltenen Zeichenfolgenbefehle auf. Es ist zu beachten, dass die Zeichenfolge, die den Befehl enthält, nicht in einfache Anführungszeichen eingeschlossen werden darf, da das automatisch generierte Skript einfache Anführungszeichen enthält. Daher werden hier zwei doppelte Anführungszeichen verwendet, um die doppelten Anführungszeichen der Zeichenfolge selbst darzustellen.
3. Schlussfolgerung
Oben wurden kurz mehrere Situationen beim Einfügen von Javascript in ASP.Net besprochen. Durch das ordnungsgemäße Einfügen clientseitiger Javascript-Skripte in das Serverprogramm kann die Ausführungseffizienz des Programms verbessert und eine benutzerfreundlichere Benutzeroberfläche bereitgestellt werden.