Appeler la fonction ASP.NET depuis JavaScript ?
https://stackoverflow.com/questions/3713
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'écris une page Web dans ASP.NET.J'ai du code JavaScript et un bouton de soumission avec un événement de clic.
Est-il possible d'appeler une méthode que j'ai créée dans ASP avec l'événement click de JavaScript ?
La solution
Eh bien, si vous ne voulez pas le faire en utilisant Ajax ou de toute autre manière et que vous souhaitez simplement qu'une publication ASP.NET normale se produise, voici comment procéder (sans utiliser d'autres bibliothèques) :
C'est un peu délicat quand même...:)
je.Dans votre fichier de code (en supposant que vous utilisez C# et .NET 2.0 ou version ultérieure), ajoutez l'interface suivante à votre classe Page pour la faire ressembler à
public partial class Default : System.Web.UI.Page, IPostBackEventHandler{}
ii.Cela devrait ajouter (en utilisant Languette-Languette) cette fonction dans votre fichier de code :
public void RaisePostBackEvent(string eventArgument) { }
iii.Dans votre événement onclick en JavaScript, écrivez le code suivant :
var pageId = '<%= Page.ClientID %>';
__doPostBack(pageId, argumentString);
Cela appellera la méthode « RaisePostBackEvent » dans votre fichier de code avec « eventArgument » comme « argumentString » que vous avez transmis depuis le JavaScript.Désormais, vous pouvez appeler n’importe quel autre événement de votre choix.
P.S :C'est 'underscore-underscore-doPostBack'...Et il ne devrait y avoir aucun espace dans cette séquence...D'une manière ou d'une autre, WMD ne me permet pas d'écrire avec des traits de soulignement suivis d'un caractère !
Autres conseils
Le __doPostBack() la méthode fonctionne bien.
Une autre solution (très hackish) consiste simplement à ajouter un bouton ASP invisible dans votre balisage et à cliquer dessus avec une méthode JavaScript.
<div style="display: none;">
<asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" />
</div>
Depuis votre JavaScript, récupérez la référence au bouton à l'aide de son Identité du client puis appelle le .Cliquez sur() méthode dessus.
var button = document.getElementById(/* button client id */);
button.click();
Le Bibliothèque Microsoft AJAX y parviendra.Vous pouvez également créer votre propre solution qui implique d'utiliser AJAX pour appeler vos propres fichiers de script aspx (essentiellement) pour exécuter des fonctions .NET.
Je suggère la bibliothèque Microsoft AJAX.Une fois installé et référencé, il vous suffit d'ajouter une ligne dans votre pageload ou init :
Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))
Ensuite, vous pouvez faire des choses comme :
<Ajax.AjaxMethod()> _
Public Function Get5() AS Integer
Return 5
End Function
Ensuite, vous pouvez l'appeler sur votre page comme :
PageClassName.Get5(javascriptCallbackFunction);
Le dernier paramètre de votre appel de fonction doit être la fonction de rappel javascript qui sera exécutée lorsque la requête AJAX sera renvoyée.
La programmation statique et fortement typée m'a toujours semblé très naturelle, c'est pourquoi au début j'ai résisté à l'apprentissage de JavaScript (sans parler du HTML et du CSS) lorsque je devais créer des frontaux Web pour mes applications.Je ferais n'importe quoi pour contourner ce problème, comme rediriger vers une page juste pour effectuer une action sur l'événement OnLoad, tant que je pourrais coder du C# pur.
Vous constaterez cependant que si vous comptez travailler avec des sites Web, vous devez avoir l'esprit ouvert et commencer à penser davantage vers le Web (c'est-à-dire, n'essayez pas de faire des choses côté client sur le serveur et vice-versa). .J'adore les formulaires Web ASP.NET et je les utilise toujours (ainsi que MVC), mais je dirai qu'en essayant de rendre les choses plus simples et en cachant la séparation du client et du serveur, cela peut dérouter les nouveaux arrivants et finir par rendre les choses parfois plus difficiles.
Mon conseil est d'apprendre quelques bases de JavaScript (comment enregistrer des événements, récupérer des objets DOM, manipuler CSS, etc.) et vous trouverez la programmation Web beaucoup plus agréable (pour ne pas dire plus facile).Beaucoup de gens ont mentionné différentes bibliothèques Ajax, mais je n'ai vu aucun exemple réel d'Ajax, alors voilà.(Si vous n'êtes pas familier avec Ajax, il s'agit simplement d'effectuer une requête HTTP asynchrone pour actualiser le contenu (ou peut-être d'effectuer une action côté serveur dans votre scénario) sans recharger la page entière ni effectuer une publication complète.
Côté client:
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest(); // Create object that will make the request
xmlhttp.open("GET", "http://example.org/api/service", "true"); // configure object (method, URL, async)
xmlhttp.send(); // Send request
xmlhttp.onstatereadychange = function() { // Register a function to run when the state changes, if the request has finished and the stats code is 200 (OK). Write result to <p>
if (xmlhttp.readyState == 4 && xmlhttp.statsCode == 200) {
document.getElementById("resultText").innerHTML = xmlhttp.responseText;
}
};
</script>
C'est ça.Bien que le nom puisse être trompeur, le résultat peut également être en texte brut ou en JSON, vous n'êtes pas limité au XML. jQuery fournit une interface encore plus simple pour effectuer des appels Ajax (entre autres simplification d'autres tâches JavaScript).
La requête peut être HTTP-POST ou HTTP-GET et ne doit pas nécessairement concerner une page Web, mais vous pouvez la publier sur n'importe quel service qui écoute les requêtes HTTP, comme un Reposant API.L'API Web ASP.NET MVC 4 facilite également la configuration du service Web côté serveur pour gérer la demande.Mais beaucoup de gens ne savent pas que vous pouvez également ajouter des contrôleurs API au projet de formulaires Web et les utiliser pour gérer des appels Ajax comme celui-ci.
Du côté serveur:
public class DataController : ApiController
{
public HttpResponseMessage<string[]> Get()
{
HttpResponseMessage<string[]> response = new HttpResponseMessage<string[]>(
Repository.Get(true),
new MediaTypeHeaderValue("application/json")
);
return response;
}
}
Global.asax
Ensuite, enregistrez simplement la route HTTP dans votre fichier Global.asax, afin qu'ASP.NET sache comment diriger la requête.
void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.MapHttpRoute("Service", "api/{controller}/{id}");
}
Avec AJAX et les contrôleurs, vous pouvez publier sur le serveur à tout moment de manière asynchrone pour effectuer n'importe quelle opération côté serveur.Ce doublé offre à la fois la flexibilité de JavaScript et la puissance de C# / ASP.NET, offrant ainsi aux personnes visitant votre site une meilleure expérience globale.Sans rien sacrifier, vous obtenez le meilleur des deux mondes.
Les références
je pense qu'il s'agit d'un article de blog Comment récupérer et afficher les données de la base de données SQL Server dans la page ASP.NET à l'aide d'Ajax (jQuery) va vous aider.
Code JavaScript
<script src="http://code.jquery.com/jquery-3.3.1.js" />
<script language="javascript" type="text/javascript">
function GetCompanies() {
$("#UpdatePanel").html("<div style='text-align:center; background-color:yellow; border:1px solid red; padding:3px; width:200px'>Please Wait...</div>");
$.ajax({
type: "POST",
url: "Default.aspx/GetCompanies",
data: "{}",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: OnSuccess,
error: OnError
});
}
function OnSuccess(data) {
var TableContent = "<table border='0'>" +
"<tr>" +
"<td>Rank</td>" +
"<td>Company Name</td>" +
"<td>Revenue</td>" +
"<td>Industry</td>" +
"</tr>";
for (var i = 0; i < data.d.length; i++) {
TableContent += "<tr>" +
"<td>"+ data.d[i].Rank +"</td>" +
"<td>"+data.d[i].CompanyName+"</td>" +
"<td>"+data.d[i].Revenue+"</td>" +
"<td>"+data.d[i].Industry+"</td>" +
"</tr>";
}
TableContent += "</table>";
$("#UpdatePanel").html(TableContent);
}
function OnError(data) {
}
</script>
Fonction côté serveur ASP.NET
[WebMethod]
[ScriptMethod(ResponseFormat= ResponseFormat.Json)]
public static List<TopCompany> GetCompanies()
{
System.Threading.Thread.Sleep(5000);
List<TopCompany> allCompany = new List<TopCompany>();
using (MyDatabaseEntities dc = new MyDatabaseEntities())
{
allCompany = dc.TopCompanies.ToList();
}
return allCompany;
}
La bibliothèque Microsoft AJAX y parviendra.Vous pouvez également créer votre propre solution qui implique d'utiliser AJAX pour appeler vos propres fichiers de script aspx (essentiellement) pour exécuter des fonctions .NET.
Il s'agit de la bibliothèque appelée AjaxPro dans laquelle un MVP nommé Michael Schwarz.Cette bibliothèque n'a pas été écrite par Microsoft.
J'ai beaucoup utilisé AjaxPro et c'est une très belle bibliothèque que je recommanderais pour de simples rappels au serveur.Il fonctionne bien avec la version Microsoft d'Ajax sans aucun problème.Cependant, je voudrais noter que, compte tenu de la simplicité avec laquelle Microsoft a créé Ajax, je ne l'utiliserais que si c'est vraiment nécessaire.Il faut beaucoup de JavaScript pour exécuter certaines fonctionnalités très compliquées que vous obtenez de Microsoft en les déposant simplement dans un panneau de mise à jour.
C'est très simple pour les deux scénarios (c'est-à-dire synchrone/asynchrone) si vous souhaitez déclencher un gestionnaire d'événements côté serveur, par exemple l'événement de clic de Button.
Pour déclencher un gestionnaire d'événements d'un contrôle :Si vous avez déjà ajouté un ScriptManager sur votre page, ignorez l'étape 1.
Ajoutez ce qui suit dans la section de script client de votre page
//<![CDATA[ var theForm = document.forms['form1']; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]>Écrivez votre gestionnaire d'événements côté serveur pour votre contrôle
protected void btnSayHello_Click(objet send, EventArgs e) { Label1.Text = "Bonjour tout le monde...";}
Ajouter une fonction client pour appeler le gestionnaire d'événements côté serveur
fonction SayHello() { __doPostBack("btnSayHello", "");}
Remplacez le « btnSayHello » dans le code ci-dessus par l’identifiant client de votre contrôle.
Ce faisant, si votre contrôle se trouve dans un panneau de mise à jour, la page ne sera pas actualisée.C'est si simple.
Une autre chose à dire est que :Soyez prudent avec l'identifiant client, car cela dépend de votre politique de génération d'identifiant définie avec la propriété ClientIDMode.
J'essaie de mettre en œuvre cela mais cela ne fonctionne pas correctement.La page est réaffecter, mais mon code ne s'exécute pas.Quand je débogue le page, le RaisePostBackEvent n'est jamais renvoyé.Une chose que j'ai faite autrement est que je fais cela dans un contrôle utilisateur au lieu d'un aspx page.
Si quelqu'un d'autre est comme Merk et a du mal à surmonter cela, j'ai une solution :
Lorsque vous disposez d'un contrôle utilisateur, il semble que vous deviez également créer le PostBackEventHandler dans la page parent.Et puis vous pouvez appeler le PostBackEventHandler du contrôle utilisateur en l'appelant directement.Voir ci-dessous:
public void RaisePostBackEvent(string _arg)
{
UserControlID.RaisePostBackEvent(_arg);
}
Où UserControlID est l'ID que vous avez donné au contrôle utilisateur sur la page parent lorsque vous l'avez imbriqué dans le balisage.
Note:Vous pouvez également simplement appeler directement les méthodes appartenant à ce contrôle utilisateur (auquel cas, vous n'aurez besoin que du gestionnaire RaisePostBackEvent dans la page parent) :
public void RaisePostBackEvent(string _arg)
{
UserControlID.method1();
UserControlID.method2();
}
Vous souhaiterez peut-être créer un service Web pour vos méthodes courantes.
Ajoutez simplement un WebMethodAttribute sur les fonctions que vous souhaitez appeler, et c'est tout.
Disposer d'un service Web avec tous vos éléments communs facilite également la maintenance du système.
Si la fonction __doPostBack n'est pas générée sur la page vous devez insérer un contrôle pour la forcer comme ceci :
<asp:Button ID="btnJavascript" runat="server" UseSubmitBehavior="false" />
Concernant:
var button = document.getElementById(/* Button client id */);
button.click();
Cela devrait ressembler à :
var button = document.getElementById('<%=formID.ClientID%>');
Où formID est l’ID de contrôle ASP.NET dans le fichier .aspx.
Ajoutez cette ligne au chargement de la page si vous obtenez une erreur attendue d’objet.
ClientScript.GetPostBackEventReference(this, "");
Vous pouvez utiliser PageMethods.Your C# method Name afin d'accéder aux méthodes C# ou aux méthodes VB.NET en JavaScript.
Essaye ça:
if(!ClientScript.IsStartupScriptRegistered("window"))
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "window", "pop();", true);
}
Ou ca
Response.Write("<script>alert('Hello World');</script>");
Utilisez la propriété OnClientClick du bouton pour appeler des fonctions JavaScript...
Vous pouvez également l'obtenir en ajoutant simplement cette ligne dans votre code JavaScript :
document.getElementById('<%=btnName.ClientID%>').click()
Je pense que celui-ci est très simple !
Veuillez essayer ceci :
<%= Page.ClientScript.GetPostBackEventReference(ddlVoucherType, String.Empty) %>;
ddlVoucherType est un contrôle que le changement d'index sélectionné appellera...Et vous pouvez mettre n'importe quelle fonction sur le changement d'index sélectionné de ce contrôle.
La manière la plus simple et la meilleure d'y parvenir est d'utiliser le onmouseup() événement JavaScript plutôt que onclick()
De cette façon, vous lancerez JavaScript après avoir cliqué et cela n'interférera pas avec l'ASP. OnClick() événement.
J'essaye cela et je peux ainsi exécuter une méthode Asp.Net tout en utilisant jQuery.
Faites une redirection de page dans votre code jQuery
window.location = "Page.aspx?key=1";Utilisez ensuite une chaîne de requête dans le chargement de la page
protected void Page_Load(object sender, EventArgs e) { if (Request.QueryString["key"] != null) { string key= Request.QueryString["key"]; if (key=="1") { // Some code } } }
Donc pas besoin d'exécuter un code supplémentaire
Cette réponse fonctionne comme un jeu d'enfant pour moi grâce à tous les navigateurs :
La méthode __doPostBack() fonctionne bien.
Une autre solution (très hackish) consiste simplement à ajouter un bouton ASP invisible dans votre balisage et à cliquer dessus avec une méthode JavaScript.
<div style="display: none;">
<asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" />
</div>
Depuis votre JavaScript, récupérez la référence au bouton à l'aide de son ClientID puis appelez la méthode .Click() dessus :
var button = document.getElementByID(/* button client id */);
button.Click();
Citation de bloc
