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 en utilisant javascript? Ce que je dois faire, c'est arrêter les importations si Annuler est choisi ou continuer à importer si ok est choisi. J'utilise Visual Studio 2010 et C # comme langage de programmation
Voici 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 facile et plus rapide pour Asp.Net AJAX Nous pouvons facilement améliorer l'expérience utilisateur et les performances 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 Java. Cela apporte tellement d'opportunités que nous pouvons effectuer beaucoup d'opérations sans utiliser de retours lents et ennuyeux.
Dans cet article, je montre l'utilisation de base de ScriptManager et PageMethod. Dans cet exemple, je crée un formulaire d'enregistrement d'utilisateur, dans lequel l'utilisateur peut s'inscrire avec 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, vous devez d'abord faire glisser un gestionnaire de scripts 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 PageMethods du côté client.
L'étape suivante consiste maintenant à créer une fonction côté serveur.
Voici la fonction que j'ai créée, cette fonction valide la saisie 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 cannot be less than 5 chars";
}
return result;
}
Pour dire au gestionnaire de scripts que cette méthode est accessible via javascript, nous devons nous assurer de deux choses:
Premièrement: cette méthode doit être "statique publique".
Deuxièmement: Il devrait y avoir une balise [WebMethod] au-dessus de la méthode 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 nous pouvons 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 Enregistrer l'utilisateur, ScriptManager génère une fonction proxy qui est disponible dans PageMethods.
. ie résultat).
Maintenant, tout semble prêt, et maintenant j'ai ajouté OnClientClick="Signup();return false;" sur mon bouton d'inscription. Voici donc le code complet 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, je suppose. Voici un exemple d'Ajax appelé made by jQuery pour vous aider à démarrer. Le code connecte un utilisateur à mon système mais renvoie un booléen pour savoir s'il a réussi 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 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 utilisant jQuery, ce qui signifie que vous devrez importer la bibliothèque si vous ne l'avez pas déjà fait ...
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 le mien ExecutePageMethod, car c'est la seule méthode qu'il va exposer) et importez-le:
<script type="text/javascript" src="/ExecutePageMethod.js" ></script>
Dans le fichier nouvellement ajouté, ajoutez le code suivant (je me souviens avoir tiré cela ailleurs, donc quelqu'un d'autre mérite vraiment le mérite):
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 ensuite étendre 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 votre balisage de page, dans un bloc script ou à partir d'un autre fichier de script, vous pouvez appeler la méthode, comme ceci:
ExecutePageMethod("PageName.aspx", "MyMethod", [], OnSuccess, OnFailure);
De toute évidence, vous devrez implémenter les méthodes OnSuccess et OnFailure.
Pour consommer les résultats, par exemple 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 tableau de types, par exemple), cette méthode l'analysera en objets:
function OnSuccess(result) {
var parsedResult = jQuery.parseJSON(result.d);
}
Ce code ExecutePageMethod est particulièrement utile car il est réutilisable, donc plutôt que d'avoir à gérer un $.ajax appel 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 d'une manière 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 détournée) à votre page. Vous pouvez ensuite créer un objet js de votre type et appeler des méthodes comme vous le feriez pour tout autre objet.
Il cache essentiellement l'implémentation ajax et présente RPC dans un format familier. Attention, la meilleure option est vraiment d'utiliser ASP.NET MVC et d'utiliser les appels jQuery aux méthodes d'action - beaucoup plus concis et moins décousant!
Il existe plusieurs options. Vous pouvez utiliser l'attribut WebMethod , à votre fin.