Comment appeler une méthode c # ASP.NET en utilisant javascript

Est-ce que quelqu'un sait comment appeler une méthode c # côté serveur à l'aide de javascript? Ce que je dois faire est d'arrêter les importations si Annuler est choisi ou de continuer à importer si Ok est choisi. J'utilise Visual Studio 2010 et c # comme mon langage de programmation

C'est mon code:

private void AlertWithConfirmation() { Response.Write( "<script type=\"text/javascript\">" + "if (window.confirm('Import is currently in progress. Do you want to continue with importation? If yes choose OK, If no choose CANCEL')) {" + "window.alert('Imports have been cancelled!');" + "} else {" + "window.alert('Imports are still in progress');" + "}" + "</script>"); }

PageMethod une approche plus simple et plus rapide pour Asp.Net AJAX Nous pouvons facilement améliorer l'expérience utilisateur et la performance des applications Web en libérant la puissance d'AJAX. L'une des meilleures choses que j'aime dans AJAX est PageMethod.

PageMethod est un moyen par lequel nous pouvons exposer la méthode de la page côté serveur dans le script java. Cela apporte tant d'opportunités que nous pouvons effectuer beaucoup d'opérations sans utiliser de backs de travail lent et ennuyeux.

Dans cette publication, je montre l'utilisation de base de ScriptManager et PageMethod. Dans cet exemple, je crée un formulaire d'inscription d'utilisateur, dans lequel l'utilisateur peut s'inscrire sur son adresse e-mail et son mot de passe. Voici le balisage de la page que je vais développer: –

 <body> <form id="form1" runat="server"> <div> <fieldset style="width: 200px;"> <asp:Label ID="lblEmailAddress" runat="server" Text="Email Address"></asp:Label> <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox> <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label> <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox> </fieldset> <div> </div> <asp:Button ID="btnCreateAccount" runat="server" Text="Signup" /> </div> </form> </body> </html>

Pour configurer la méthode de la page, d'abord, vous devez faire glisser un gestionnaire de script sur votre page.

 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"> </asp:ScriptManager>

Notez également que j'ai changé EnablePageMethods = "true. Cela indiquera à ScriptManager que je vais appeler les méthodes de la page côté client.

Maintenant, l'étape suivante consiste à créer une fonction côté serveur. Voici la fonction que j'ai créée, cette fonction valide l'entrée de l'utilisateur: –

 [WebMethod] public static string RegisterUser(string email, string password) { string result = "Congratulations!!! your account has been created."; if (email.Length == 0)//Zero length check { result = "Email Address cannot be blank"; } else if (!email.Contains(".") || !email.Contains("@")) //some other basic checks { result = "Not a valid email address"; } else if (!email.Contains(".") || !email.Contains("@")) //some other basic checks { result = "Not a valid email address"; } else if (password.Length == 0) { result = "Password cannot be blank"; } else if (password.Length < 5) { result = "Password canonot be less than 5 chars"; } return result; }

Pour dire au gestionnaire de script que cette méthode est accessible via JavaScript, nous devons assurer deux choses. D'abord, cette méthode devrait être «publique statique». Deuxièmement, il devrait y avoir une méthode [WebMethod] ci-dessus telle qu'écrite dans le code ci-dessus.

Maintenant, j'ai créé une fonction côté serveur qui crée un compte. Maintenant, nous devons l'appeler du côté client. Voici comment on peut appeler cette fonction du côté client: –

 <script type="text/javascript"> function Signup() { var email = document.getElementById('<%=txtEmail.ClientID %>').value; var password = document.getElementById('<%=txtPassword.ClientID %>').value; PageMethods.RegisterUser(email, password, onSucess, onError); function onSucess(result) { alert(result); } function onError(result) { alert('Cannot process your request at the moment, please try later.'); } } </script>

Pour appeler ma méthode côté serveur Enregistrez l'utilisateur, ScriptManager génère une fonction proxy qui est disponible dans PageMethods. Ma fonction côté serveur a deux paramètres, c'est-à-dire le courrier électronique et le mot de passe. Après ces paramètres, nous devons donner deux autres noms de fonction qui seront exécutés si la méthode est exécutée avec succès (premier paramètre, c'est-à-dire Séquence) ou la méthode est échouée (deuxième paramètre, c'est-à-dire résultat).

Maintenant, tout semble prêt, et maintenant j'ai ajouté OnClientClick = "Inscription (); renvoyer faux;" Sur mon bouton Inscription. Alors, cliquez ici pour compléter le code de ma page aspx: –

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"> </asp:ScriptManager> <fieldset style="width: 200px;"> <asp:Label ID="lblEmailAddress" runat="server" Text="Email Address"></asp:Label> <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox> <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label> <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox> </fieldset> <div> </div> <asp:Button ID="btnCreateAccount" runat="server" Text="Signup" OnClientClick="Signup();return false;" /> </div> </form> </body> </html> <script type="text/javascript"> function Signup() { var email = document.getElementById('<%=txtEmail.ClientID %>').value; var password = document.getElementById('<%=txtPassword.ClientID %>').value; PageMethods.RegisterUser(email, password, onSucess, onError); function onSucess(result) { alert(result); } function onError(result) { alert('Cannot process your request at the moment, please try later.'); } } </script>

Vous devrez faire un appel Ajax que je soupçonne. Voici un exemple d'un Ajax appelé par jQuery pour vous aider à démarrer. Le code enregistre un utilisateur sur mon système mais renvoie un bool sur sa réussite ou non. Notez les attributs ScriptMethod et WebMethod sur le code derrière la méthode.

Dans le balisage:

  var $Username = $("#txtUsername").val(); var $Password = $("#txtPassword").val(); //Call the approve method on the code behind $.ajax({ type: "POST", url: "Pages/Mobile/Login.aspx/LoginUser", data: "{'Username':'" + $Username + "', 'Password':'" + $Password + "' }", //Pass the parameter names and values contentType: "application/json; charset=utf-8", dataType: "json", async: true, error: function (jqXHR, textStatus, errorThrown) { alert("Error- Status: " + textStatus + " jqXHR Status: " + jqXHR.status + " jqXHR Response Text:" + jqXHR.responseText) }, success: function (msg) { if (msg.d == true) { window.location.href = "Pages/Mobile/Basic/Index.aspx"; } else { //show error alert('login failed'); } } });

Dans le code derrière:

 /// <summary> /// Logs in the user /// </summary> /// <param name="Username">The username</param> /// <param name="Password">The password</param> /// <returns>true if login successful</returns> [WebMethod, ScriptMethod] public static bool LoginUser( string Username, string Password ) { try { StaticStore.CurrentUser = new User( Username, Password ); //check the login details were correct if ( StaticStore.CurrentUser.IsAuthentiacted ) { //change the status to logged in StaticStore.CurrentUser.LoginStatus = Objects.Enums.LoginStatus.LoggedIn; //Store the user ID in the list of active users ( HttpContext.Current.Application[ SessionKeys.ActiveUsers ] as Dictionary<string, int> )[ HttpContext.Current.Session.SessionID ] = StaticStore.CurrentUser.UserID; return true; } else { return false; } } catch ( Exception ex ) { return false; } }

Je vais aller de l'avant et proposer une solution en utilisant jQuery, ce qui signifie que vous devrez importer la bibliothèque si vous ne l'avez pas encore …

Importez la bibliothèque jQuery dans votre balisage de page:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

Ensuite, créez un autre fichier de script * .js (j'appelle mine ExecutePageMethod , car c'est la seule méthode qu'il va exposer) et l'importer:

 <script type="text/javascript" src="/ExecutePageMethod.js" ></script>

Dans le fichier nouvellement ajouté, ajoutez le code suivant (je me souviens d'avoir tiré cela d'ailleurs, de sorte que quelqu'un d'autre mérite un crédit pour cela):

 function ExecutePageMethod(page, fn, paramArray, successFn, errorFn) { var paramList = ''; if (paramArray.length > 0) { for (var i = 0; i < paramArray.length; i += 2) { if (paramList.length > 0) paramList += ','; paramList += '"' + paramArray[i] + '":"' + paramArray[i + 1] + '"'; } } paramList = '{' + paramList + '}'; $.ajax({ type: "POST", url: page + "/" + fn, contentType: "application/json; charset=utf-8", data: paramList, dataType: "json", success: successFn, error: errorFn }); }

Vous devrez alors augmenter votre méthode de page .NET avec les attributs appropriés, en tant que tels:

 [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static string MyMethod() { return "Yay!"; }

Maintenant, dans le marquage de votre page, dans un bloc de script ou à partir d'un autre fichier de script, vous pouvez appeler la méthode, de la manière suivante:

 ExecutePageMethod("PageName.aspx", "MyMethod", [], OnSuccess, OnFailure);

De toute évidence, vous devrez implémenter les méthodes OnSuccess et OnFailure .

Pour consommer les résultats, disons dans la méthode OnSuccess , vous pouvez utiliser la méthode parseJSON, qui, si les résultats deviennent plus complexes (dans le cas ou renvoyant un ensemble de types, par exemple), cette méthode l'analysera dans les objets:

 function OnSuccess(result) { var parsedResult = jQuery.parseJSON(result.d); }

Ce code ExecutePageMethod est particulièrement utile puisqu'il est réutilisable, alors plutôt que de devoir gérer un appel $.ajax pour chaque méthode de page que vous souhaitez exécuter, il vous suffit de passer la page, le nom de la méthode et les arguments à cette méthode.

La bibliothèque Jayrock RPC est un excellent outil pour le faire de manière agréable et familière pour les développeurs C #. Il vous permet de créer une classe .NET avec les méthodes dont vous avez besoin et d'ajouter cette classe en tant que script (de manière indirecte) à votre page. Vous pouvez ensuite créer un objet js de votre type et appeler des méthodes comme vous le feriez dans un autre objet.

Il cache essentiellement la mise en œuvre d'Ajax et présente RPC dans un format familial. Entendez-vous que la meilleure option est vraiment d'utiliser ASP.NET MVC et d'utiliser les appels jquery ajax aux méthodes d'action – beaucoup plus concis et moins de dérangement!

Il existe plusieurs options. Vous pouvez utiliser l'attribut WebMethod , à vos besoins.