Cet article combine des exemples pour décrire comment utiliser des scripts Javascript côté client dans les applications ASP.net afin d'améliorer l'efficacité de l'exécution du programme et d'obtenir davantage de fonctions.
1. ASP.Net et Javascript
.Net est au cœur de la stratégie de nouvelle génération de Microsoft, et ASP.Net est la mise en œuvre spécifique de la stratégie .Net dans le développement Web. Il hérite de la simplicité et de la facilité d'utilisation d'ASP, tout en palliant les défauts des programmes ASP mal structurés et difficiles à lire et à comprendre. En particulier, l'introduction de contrôles côté serveur et de modèles pilotés par les événements a rapproché le développement d'applications Web du développement de programmes de bureau dans le passé.
Dans divers articles et livres présentant ASP.Net, l'accent est mis sur les contrôles serveur et le SDK .Net Framework, car il s'agit des améliorations les plus récentes et les plus révolutionnaires d'ASP.Net, par opposition au script Javascript côté client (incluant également VBScript) ; joué un rôle important dans le développement Web dans le passé, est rarement mentionné. Il semble qu'avec les programmes côté serveur, les scripts côté client ne soient plus nécessaires. Cependant, le programme côté serveur nécessite une interaction entre le navigateur et le serveur Web. Pour ASP.Net, il s'agit d'une soumission de page, qui nécessite cependant l'envoi d'une grande quantité de données, ainsi que de nombreuses tâches. la vérification des entrées ou la confirmation de la suppression sont tout à fait correctes. Implémenté en utilisant Javascript. Par conséquent, il est encore nécessaire d’explorer comment utiliser Javascript dans ASP.Net.
2. Exemples d'applications Javascript
1. Ajout d'un événement Javascript à un contrôle serveur sur la page.
Le contrôle serveur génère finalement du HTML ordinaire, tel que <asp:textbox> générant du texte d'entrée. Chaque contrôle HTML du formulaire possède son propre événement Javascript, tel que Textbox a un événement onchange, Button a un événement onclick, Listbox a un événement onchange, etc. Pour ajouter des événements côté client à un contrôle serveur, vous devez utiliser la propriété Attributes. L'attribut Attributs est un attribut que possèdent tous les contrôles serveur. Il est utilisé pour ajouter des balises personnalisées au HTML final généré. Supposons qu'il existe un bouton de sauvegarde btnSave sur le formulaire Web et que vous souhaitiez demander à l'utilisateur s'il souhaite réellement enregistrer lorsqu'il clique sur ce bouton (par exemple, une fois enregistré, il ne peut pas être restauré, etc.), le code suivant devrait être ajouté à l'événement Page_Load :
sinon page.isPostBack() alors
btnSave.Attributes.Add("onclick","Javascript:return confirm('Are you sure to save?');")
end if
Il convient de noter que « retour » n'est pas omis, sinon même si l'utilisateur clique sur Annuler, les données seront toujours enregistrées.
2. Ajoutez un événement Javascript pour chaque ligne de la Datagrid
. Supposons que chaque ligne de la Datagrid ait un bouton de suppression. Lorsque l'utilisateur clique sur ce bouton, on espère qu'il sera demandé s'il souhaite réellement supprimer cet enregistrement, au cas où. l'utilisateur clique sur la mauvaise ligne ou clique simplement sur le bouton Supprimer.
Quel que soit le nom de ce bouton de suppression, il ne peut pas être directement référencé comme dans l'exemple précédent, car chaque ligne possède un tel bouton et ce sont des contrôles enfants dans la grille de données. Dans ce cas, vous devez utiliser l'événement OnItemDataBound de Datagrid. L'événement OnItemDataBound se produit une fois que chaque ligne de données de la Datagrid est liée à la Datagrid (c'est-à-dire qu'il se déclenche une fois par ligne). Tout d'abord, ajoutez le code suivant à la déclaration Datagrid :
<asp:datagrid id="grd1" runat="server" OnItemDataBound = "ItemDataBound" >
...Définition des colonnes ici
</asp:datagrid> Ici, il est expliqué que le ItemDataBound est appelée lorsque l'événement OnItemDataBound se produit, ajoutez la définition de cette méthode dans le fichier code-behind :
Sub ItemDataBound (ByVal sender As Object, ByVal e As DataGridItemEventArgs)
Si e.Item.ItemType <> ListItemType.Header et e.Item.ItemType <> ListItemType.Footer Then
Dim oDeleteButton As LinkButton = e.Item.Cells(5). Controls(0)
oDeleteButton.Attributes("onclick") = "javascript:return Confirm ("Êtes-vous sûr de vouloir supprimer" & DataBinder.Eval(e.Item.DataItem, "m_sName") & "?')"
End If
End Sub
Étant donné que la ligne de titre et la ligne de pied de page de Datagrid déclencheront également cet événement, il est d'abord jugé que la ligne qui déclenche cet événement n'est pas la ligne de titre ou la ligne de pied de page. On suppose ici que le bouton Supprimer est situé dans la colonne 6 de la Datagrid (la première colonne est 0), et que la Datasource de la Datagrid contient une colonne nommée "m_sName".
3. Référence aux contrôles de la Datagrid à l'état d'édition
La fonction d'édition intégrée de la Datagrid est une méthode d'édition lorsque le nombre de champs dans l'enregistrement est petit. L'utilisateur n'a pas besoin d'entrer une page distincte pour modifier l'enregistrement, mais peut directement cliquer sur le bouton Modifier pour mettre la ligne actuelle en mode modification. D'un autre côté, certains programmes Javascript doivent faire référence au nom du contrôle. Par exemple, de nombreux programmes fournissent un contrôle de date lorsque l'utilisateur doit saisir une date pour garantir la légalité du format de date. Lorsque l'utilisateur clique sur l'icône de contrôle, une nouvelle fenêtre apparaît pour lui permettre de sélectionner une date. À ce stade, vous devez fournir l'ID de la zone de texte qui affiche la date dans la nouvelle fenêtre afin que la valeur puisse être renseignée dans la zone de texte lorsque l'utilisateur sélectionne la date.
S'il s'agit d'un contrôle de zone de texte serveur ordinaire, son ID est le même que l'ID de la zone de saisie HTML générée ; mais dans l'état d'édition de Datagrid, les deux ID ne sont pas les mêmes (la raison est la même que dans l'exemple ci-dessus) ), qui nécessite d'utiliser la propriété ClientID du contrôle.
Sub ItemEdit protégé (ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
Dim sDateCtrl sous forme de chaîne
sDateCtrl = grd1 Items (e.Item.ItemIndex) FindControl("txtDate"). . ClientID
End Sub
On suppose ici que la méthode ItemEdit est le gestionnaire d'événements OnItemEdit de Dategrid et que la troisième colonne de Datagrid contient un contrôle de zone de texte serveur nommé txtDate.
4.
fait référence au programme Javascript généré automatiquement par ASP.Net
est destiné aux développeurs. Il n'y a aucune distinction entre serveur et client dans le programme source HTML généré. Ils sont tous standard HTML, DHTML et. Javascript. La raison pour laquelle il peut répondre aux entrées de l'utilisateur est que le gestionnaire d'événements de chaque contrôle génère finalement un script. Ce script renvoie la page afin que le serveur Web ait la possibilité de répondre et de traiter à nouveau. Normalement, nous n'avons pas besoin de savoir ce qu'est ce script ni de l'appeler directement, mais dans certains cas, appeler ce script de manière appropriée peut simplifier beaucoup de travail. Jetez un œil aux deux exemples suivants.
● Cliquez n'importe où sur la grille de données pour sélectionner une ligne.
La grille de données fournit un bouton de sélection intégré. Lorsque vous cliquez sur ce bouton, la ligne actuelle est sélectionnée (la propriété SelectedItemStyle peut être définie pour donner à la ligne actuelle une apparence différente). Cependant, les utilisateurs peuvent être plus habitués à sélectionner une ligne en cliquant n'importe où. Il serait assez fastidieux d'implémenter cette fonction entièrement par eux-mêmes. Une bonne idée est d'ajouter un bouton de sélection, mais de masquer la colonne et d'appeler le Javascript généré par ce bouton lorsque vous cliquez sur une ligne.
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) Et _
(itemType <> ListItemType.Footer) Et _
(itemType <> ListItemType.Separator) Puis
Dim oSelect As LinkButton = CType(e.Item.Cells(5).Controls(0), LinkButton)
e.Item.Attributes("onclick") = Page. ")
End Sub
Cela suppose que le bouton de sélection est situé dans la colonne 6. e.Item représente une ligne À en juger par le code HTML généré, un événement onclick est ajouté à chaque <tr>. La méthode Page.GetPostBackClientHyperLink renvoie le script client généré par le contrôle LinkButton dans la page. Le premier paramètre est le contrôle Linkbutton et le deuxième paramètre est le paramètre passé à ce contrôle, qui est généralement vide. S'il ne s'agit pas d'un contrôle LinkButton, il existe une fonction similaire GetPostBackClientEvent. Les lecteurs peuvent se référer à MSDN.
● Les scripts générés par le serveur entrent en conflit avec les scripts ajoutés manuellement.
Les événements serveur des contrôles serveur correspondent généralement aux événements correspondants des contrôles clients. Par exemple, l'événement SelectedIndexChanged de Dropdownlist correspond à l'événement onchange de HTML <Select>. Si vous souhaitez ajouter manuellement un événement onchange, deux onchanges seront générés côté client et le navigateur en ignorera un. Par exemple, l'utilisateur souhaite enregistrer dans la base de données chaque fois qu'il modifie les options de la liste déroulante (même si ce n'est pas très courant, mais ce besoin existe), mais en même temps, il souhaite également rappeler à l'utilisateur s'il veut vraiment économiser. Évidemment, le code enregistré doit être placé dans l'événement SelectedIndexChanged et le rappel doit être ajouté manuellement avec un événement onchange. Le résultat est qu’un seul des deux onchanges peut être exécuté. La méthode correcte devrait être d'ajouter un bouton de sauvegarde invisible et d'appeler le programme généré par ce bouton dans l'événement onchange ajouté manuellement.
La méthode Page_Load est la suivante :
Dim sCmd as string
sCmd=Page.GetPostBackClientHyperlink(btnUpdate, "")
Si ce n'est pas page.isPostback alors
Dropdownlist1.Attributes.add("onchange","ConfirmUpdate(""" & sCmd & """ )")
Terminer si
La fonction ConfirmUpdate est la suivante
<Script language="javascript">
function ConfirmUpdate(cmd){
if confirm("Etes-vous sûr de mettre à jour ?")
eval(cmd
}
</Script>
La fonction Javascript eval est utilisée ici pour appeler une chaîne de commandes contenues dans . Il convient de noter que la chaîne contenant la commande ne peut pas être placée entre guillemets simples, car le script généré automatiquement inclut des guillemets simples, donc ici deux guillemets doubles sont utilisés pour représenter les guillemets doubles de la chaîne elle-même.
3. Conclusion Ce
qui précède a brièvement abordé plusieurs situations d'insertion de Javascript dans ASP.Net. L'insertion correcte de scripts Javascript côté client dans le programme serveur peut améliorer l'efficacité de l'exécution du programme et fournir une interface utilisateur plus conviviale.