c# - Appelez la fonction ASP.NET à partir de JavaScript?

Translate

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?

This question and all comments follow the "Attribution Required."

Toutes les réponses

Translate

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 utilisantLanguette-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 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 certaine manière, le WMD ne me permet pas d'écrire sur des traits de soulignement suivis d'un caractère!

La source
Translate

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 sonIdentité du clientpuis appelez le.Cliquez sur()méthode là-dessus.

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

button.click();
La source
Translate

leBibliothèque Microsoft AJAXaccomplira ceci. 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.

La source
Translate

Vous pouvez le faire de manière asynchrone en utilisant .NET Ajax PageMethods. Voiriciouici.

La source
SRV
Translate

Je pense que le blogComment récupérer et afficher les données de 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 source
Translate

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 travaillez 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 queMVC), mais je dirai qu'en essayant de simplifier les choses et en cachant la séparation entre le client et le serveur, cela peut semer la confusion chez 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 du 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 réels d'Ajax, 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 ça. 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.jQueryfournit une interface encore plus simple pour effectuer des appels Ajax (entre autres la simplification d'autres tâches JavaScript).

La requête peut être un 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 unReposantAPI. 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

La source
Translate

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 nommée AjaxPro qui a é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.

La source
Translate

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 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.

  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();
        }
    }
    //]]>
    
    1. É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 ..."; }

    2. 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 votre stratégie de génération d'ID définie avec la propriété ClientIDMode.

La source
Translate

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 parente. 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();
}
La source
Translate

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.

La source
Translate

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" />
La source
KDJ
Translate

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.

La source
Translate

Ajoutez cette ligne au chargement de la page si vous obtenez une erreur d'objet attendue.

ClientScript.GetPostBackEventReference(this, "");
La source
Translate

Vous pouvez utiliserPageMethods.Your C# method Nameafin d'accéder aux méthodes C # ou aux méthodes VB.NET dans JavaScript.

La source
Translate

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 ...

La source
Translate

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!

La source
Translate

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 source
Translate

Le moyen le plus simple et le meilleur pour y parvenir est d'utiliser leonmouseup()É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'ASPOnClick()un événement.

La source
Translate

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

La source
Translate

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

La source