Événement de clic de bouton Jquery asp.net via ajax

Question

Je me demandais si quelqu'un pouvait m'orienter dans la bonne direction. J'ai un bouton asp.net avec un événement de clic (qui exécute un code côté serveur). Ce que j'aimerais faire, c'est appeler cet événement via ajax et jquery. Existe-t-il un moyen de le faire ? Si oui, j'aimerais avoir des exemples.

Merci d'avance

Answer 1

C'est là que jQuery brille vraiment pour les développeurs ASP.Net. Disons que vous avez ce bouton ASP :

Lorsque le rendu est effectué, vous pouvez regarder la source de la page et l'identifiant ne sera pas btnAwesome, mais $ctr001_btnAwesome ou quelque chose comme ça. Cela rend la recherche en javascript très difficile. C'est là qu'intervient jQuery.

$(document).ready(function() {
  $("input\[id$='btnAwesome'\]").click(function() {
    // Do client side button click stuff here.
  });
});

L'id$= fait une correspondance regex pour un id se terminant par btnAwesome.

Editar:

Vouliez-vous que l'appel ajax soit appelé à partir de l'événement de clic du bouton du côté client ? Que vouliez-vous appeler ? Il existe de nombreux articles très intéressants sur l'utilisation de jQuery pour effectuer des appels ajax vers le code ASP.Net derrière les méthodes.

En gros, vous créez un statique marquée par l'attribut WebMethod. Vous pouvez ensuite faire un appel à cette méthode à l'aide de jQuery en utilisant $.ajax.

$.ajax({
  type: "POST",
  url: "PageName.aspx/MethodName",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(msg) {
    // Do something interesting here.
  }
});

J'ai appris mes trucs de WebMethod de : http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Il y a beaucoup de bons trucs ASP.Net/jQuery. N'oubliez pas de vous renseigner sur la raison pour laquelle vous devez utiliser msg.d dans le retour sur le contenu de .Net 3.5 (peut-être depuis 3.0).

Answer 2

J'aime la réponse de Gromer, mais elle me laisse avec une question : Que faire si j'ai plusieurs 'btnAwesome' dans des contrôles différents ?

Pour parer à cette éventualité, je ferais ce qui suit :

$(document).ready(function() {
  $('#<%=myButton.ClientID %>').click(function() {
    // Do client side button click stuff here.
  });
});

Ce n'est pas une correspondance regex, mais à mon avis, une correspondance regex n'est pas nécessaire ici. Si vous faites référence à un bouton particulier, vous voulez une correspondance textuelle précise comme celle-ci.

Si, toutefois, vous souhaitez effectuer la même action pour chaque btnAwesome, optez pour la réponse de Gromer.

Answer 3

Les pages de formulaires Web ASP.NET disposent déjà d'une méthode JavaScript pour gérer les PostBacks appelée "__doPostBack".

function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}

Utilisez les éléments suivants dans votre fichier de code pour générer le JavaScript qui exécute le PostBack. L'utilisation de cette méthode garantira que le ClientID approprié pour le contrôle est utilisé.

protected string GetLoginPostBack()
{
    return Page.ClientScript.GetPostBackEventReference(btnLogin, string.Empty);
}

Ensuite, dans la page ASPX, ajoutez un bloc javascript.

<script language="javascript">
function btnLogin_Click() {
  <%= GetLoginPostBack() %>;
}
</script>

Le javascript final sera rendu comme ceci.

<script language="javascript">
function btnLogin_Click() {
  __doPostBack('btnLogin','');
}
</script>

Maintenant vous pouvez utiliser "btnLogin_Click()" de votre javascript pour soumettre le clic du bouton au serveur.

Answer 4

Du côté client, gérez l'événement de clic du bouton, utilisez la propriété ClientID pour obtenir l'identifiant du bouton :

$(document).ready(function() {
$("#<%=myButton.ClientID %>,#<%=muSecondButton.ClientID%>").click(

    function() {
     $.get("/myPage.aspx",{id:$(this).attr('id')},function(data) {
       // do something with the data
     return false;
     }
    });
 });

Dans votre page sur le serveur :

protected void Page_Load(object sender,EventArgs e) {
 // check if it is an ajax request
 if (Request.Headers["X-Requested-With"] == "XMLHttpRequest") {
  if (Request.QueryString["id"]==myButton.ClientID) {
    // call the click event handler of the myButton here
    Response.End();
  }
  if (Request.QueryString["id"]==mySecondButton.ClientID) {
    // call the click event handler of the mySecondButton here
    Response.End();
  }
 }
}

Answer 5

J'ai eu envie de le faire et j'ai passé en revue les réponses ci-dessus et j'en ai fait une approche hybride. C'était un peu délicat, mais voici ce que j'ai fait :

Mon bouton fonctionnait déjà avec un post côté serveur. Je voulais que cela continue à fonctionner, j'ai donc laissé le "OnClick" inchangé, mais j'ai ajouté un OnClientClick :

OnClientClick="if (!OnClick_Submit()) return false;"

Voici mon élément de bouton complet au cas où cela aurait de l'importance :

<asp:Button UseSubmitBehavior="false" runat="server" Class="ms-ButtonHeightWidth jiveSiteSettingsSubmit" OnClientClick="if (!OnClick_Submit()) return false;" OnClick="BtnSave_Click" Text="<%$Resources:wss,multipages_okbutton_text%>" id="BtnOK" accesskey="<%$Resources:wss,okbutton_accesskey%>" Enabled="true"/>

Si j'inspecte l'attribut onclick du bouton HTML au moment de l'exécution, il ressemble en fait à ceci :

if (!OnClick_Submit()) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$PlaceHolderMain$ctl03$RptControls$BtnOK", "", true, "", "", false, true))

Ensuite, dans mon Javascript, j'ai ajouté la méthode OnClick_Submit. Dans mon cas, j'avais besoin de vérifier si je devais montrer une boîte de dialogue à l'utilisateur. Si j'affiche la boîte de dialogue, je renvoie false, ce qui entraîne l'arrêt du traitement de l'événement. Si je n'affiche pas la boîte de dialogue, je renvoie true, ce qui fait que l'événement continue à être traité et que ma logique de retour s'exécute comme elle le faisait auparavant.

function OnClick_Submit() {
    var initiallyActive = initialState.socialized && initialState.activityEnabled;
    var socialized = IsSocialized();
    var enabled = ActivityStreamsEnabled();

    var displayDialog;

    // Omitted the setting of displayDialog for clarity

    if (displayDialog) {
        $("#myDialog").dialog('open');
        return false;
    }
    else {
        return true;
    }
}

Ensuite, dans mon code Javascript qui s'exécute lorsque la boîte de dialogue est acceptée, je fais ce qui suit en fonction de la façon dont l'utilisateur a interagi avec la boîte de dialogue :

$("#myDialog").dialog('close');
__doPostBack('message', '');

Le "message" ci-dessus est en fait différent selon le message que je veux envoyer.

Mais attendez, il y a plus !

Dans mon code côté serveur, j'ai changé OnLoad de :

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e)
    if (IsPostBack)
    {
        return;
    }

    // OnLoad logic removed for clarity
}

A :

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e)
    if (IsPostBack)
    {
        switch (Request.Form["__EVENTTARGET"])
        {
            case "message1":
                // We did a __doPostBack with the "message1" command provided
                Page.Validate();
                BtnSave_Click(this, new CommandEventArgs("message1", null));
                break;

            case "message2":
                // We did a __doPostBack with the "message2" command provided
                Page.Validate();
                BtnSave_Click(this, new CommandEventArgs("message2", null));
                break;
            }
            return;
    }

    // OnLoad logic removed for clarity
}

Ensuite, dans la méthode BtnSave_Click, je fais ce qui suit :

CommandEventArgs commandEventArgs = e as CommandEventArgs;
string message = (commandEventArgs == null) ? null : commandEventArgs.CommandName;

Et enfin, je peux fournir une logique basée sur le fait que j'ai ou non un message et sur la valeur de ce message.