Appeler la fonction ASP.NET à partir de JavaScript?

J'écris une page Web dans ASP.NET. J'ai du code JavaScript et j'ai un bouton d'envoi 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?

Eh bien, si vous ne voulez pas le faire en utilisant Ajax ou de toute autre manière et que vous voulez 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 cependant ... :)

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 qu'elle ressemble à

public partial class Default : System.Web.UI.Page, IPostBackEventHandler{}

ii. Cela devrait ajouter (en utilisant Tab- Tab) cette fonction à 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 passé à partir du JavaScript. Désormais, vous pouvez appeler tout autre événement de votre choix.

PS: C'est 'underscore-underscore-doPostBack' ... Et, il ne devrait pas y avoir d'espace dans cette séquence ... D'une manière ou d'une autre, le WMD ne me permet pas d'écrire sur des traits de soulignement suivis d'un caractère!

La __doPostBack()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 en utilisant son ClientID , puis appelez la méthode .click () dessus.

var button = document.getElementById(/* button client id */);

button.click();

La bibliothèque Microsoft AJAX accomplira cela. Vous pouvez également créer votre propre solution qui implique l'utilisation d'AJAX pour appeler vos propres fichiers de script aspx (en gros) 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 page load 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 est renvoyée.

Vous pouvez le faire de manière asynchrone en utilisant .NET Ajax PageMethods. Voir ici ou ici .

Je pense que l'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) vous aidera.

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 programmation statique et fortement typée m'a toujours semblé très naturelle, alors au début, j'ai résisté à l'apprentissage de JavaScript (sans parler du HTML et du CSS) lorsque je devais créer des front-ends basés sur le Web pour mes applications. Je ferais n'importe quoi pour contourner ce problème, comme la redirection vers une page juste pour effectuer et agir sur l'événement OnLoad, tant que je pourrais coder en C # pur.

Vous constaterez cependant que si vous allez travailler avec des sites Web, vous devez avoir l'esprit ouvert et commencer à penser plus orienté 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 simplifier les choses et en cachant la séparation du client et du serveur, cela peut confondre les nouveaux arrivants et finir par rendre les choses plus difficiles parfois .

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 pas vu d'exemples Ajax réels, alors voilà. (Si vous n'êtes pas familier avec Ajax, tout ce que c'est, c'est faire une requête HTTP asynchrone pour actualiser le contenu (ou peut-être effectuer une action côté serveur dans votre scénario) sans recharger la page entière ou faire 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 tout. Bien que le nom puisse être trompeur, le résultat peut également être en texte brut ou JSON, vous n'êtes pas limité au XML. jQuery fournit une interface encore plus simple pour effectuer des appels Ajax (parmi la simplification d'autres tâches JavaScript).

La requête peut être HTTP-POST ou HTTP-GET et ne doit pas nécessairement être sur une page Web, mais vous pouvez publier sur n'importe quel service qui écoute les requêtes HTTP, comme une API RESTful . 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 d'API au projet de formulaires Web et les utiliser pour gérer les 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 de nouveau sur le serveur à tout moment de manière asynchrone pour effectuer toute opération côté serveur. Ce doublé offre à la fois la flexibilité de JavaScript et la puissance du C # / ASP.NET, offrant aux personnes qui visitent votre site une meilleure expérience globale. Sans rien sacrifier, vous obtenez le meilleur des deux mondes.

Références

• Ajax ,
• jQuery Ajax ,
• Contrôleur dans les formulaires Web

La bibliothèque Microsoft AJAX accomplira cela. Vous pouvez également créer votre propre solution qui implique l'utilisation d'AJAX pour appeler vos propres fichiers de script aspx (en gros) pour exécuter des fonctions .NET.

Il s'agit de la bibliothèque appelée AjaxPro qui a été écrit 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 vers le serveur. Il fonctionne bien avec la version Microsoft d'Ajax sans aucun problème. Cependant, je noterais qu'avec la facilité avec laquelle Microsoft a fait Ajax, je ne l'utiliserais que si cela était vraiment nécessaire. Il faut beaucoup de JavaScript pour faire des fonctionnalités vraiment compliquées que vous obtenez de Microsoft en les déposant simplement dans un panneau de mise à jour.

C'est si facile 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 Click 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.

1. Ajoutez ce qui suit dans la section de script du 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();
       }
   }
   //]]>

   2. Écrivez votre gestionnaire d'événements côté serveur pour votre contrôle

      protected void btnSayHello_Click (expéditeur de l'objet, EventArgs e) {Label1.Text = "Hello World ..."; }

   3. Ajouter une fonction client pour appeler le gestionnaire d'événements côté serveur

      function SayHello () {__doPostBack ("btnSayHello", ""); }

Remplacez le "btnSayHello" dans le code ci-dessus par l'ID client de votre contrôle.

Ce faisant, si votre contrôle se trouve dans un panneau de mise à jour, la page ne s'actualisera pas. C'est si simple.

Une autre chose à dire est la suivante: soyez prudent avec l'ID client, car cela dépend de la stratégie de génération d'ID définie avec la propriété ClientIDMode.

J'essaie de mettre en œuvre cela mais cela ne fonctionne pas correctement. La page est en train de publier, mais mon code n'est pas exécuté. Lorsque je débogue la page, le RaisePostBackEvent n'est jamais déclenché. Une chose que j'ai faite différemment est que je fais cela dans un contrôle utilisateur au lieu d'une page aspx.

Si quelqu'un d'autre est comme Merk et a du mal à venir ça, j'ai une solution:

Lorsque vous avez un contrôle utilisateur, il semble que vous devez é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.

Remarque: Vous pouvez également simplement appeler directement les méthodes appartenant à ce contrôle utilisateur (dans ce cas, vous n'aurez besoin que du gestionnaire RaisePostBackEvent dans la page parente):

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 à peu près tout.
Avoir un service Web avec tous vos éléments courants 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 le forcer comme ceci:

<asp:Button ID="btnJavascript" runat="server" UseSubmitBehavior="false" />

En ce qui concerne:

var button = document.getElementById(/* Button client id */);

button.click();

Cela devrait être comme:

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 d'objet attendue.

ClientScript.GetPostBackEventReference(this, "");

Vous pouvez utiliser PageMethods.Your C# method Namepour accéder aux méthodes C # ou aux méthodes VB.NET dans 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.

Le moyen le plus simple et le meilleur pour y parvenir est d'utiliser l' onmouseup()événement JavaScript plutôt queonclick()

De cette façon, vous lancerez JavaScript après avoir cliqué et cela n'interférera pas avec l' OnClick()événement ASP .

J'essaye ceci et ainsi je pourrais exécuter une méthode Asp.Net tout en utilisant jQuery.

1. Faites une redirection de page dans votre code jQuery

   window.location = "Page.aspx?key=1";

2. Ensuite, utilisez 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 au navigateur croisé:

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 en utilisant son ClientID puis appelez la méthode .Click () dessus:

var button = document.getElementByID(/* button client id */); 

button.Click(); 

Blockquote