web-dev-qa-db-fra.com

Jquery asp.net Button Click Event via ajax

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 je voudrais faire, c'est appeler cet événement via ajax et jquery. Est-ce qu'il y a un moyen de faire ça? Si oui, j'aimerais quelques exemples.

Merci d'avance

jqueryasp.netajaxevents
33
zSynopsis

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

Lorsque cela s'affiche, vous pouvez regarder la source de la page et l'ID ne sera pas btnAwesome, mais $ ctr001_btnAwesome ou quelque chose comme ça. Cela en fait une douleur dans le cul à trouver en javascript. Entrez jQuery.

 $ (document) .ready (function () {
 $ ("input [id $ = 'btnAwesome']")). cliquez sur (function () {
 // Do bouton côté client, cliquez ici. 
}); 
});

L'id $ = fait une correspondance regex pour un id ENDING avec btnAwesome.

Éditer:

Souhaitez-vous que l'appel ajax soit appelé depuis l'événement de clic de bouton côté client? Comment voulez-vous appeler? Il existe de très bons articles sur l'utilisation de jQuery pour effectuer des appels ajax vers le code ASP.Net derrière les méthodes.

L'essentiel est que vous créez une méthode statique marquée avec l'attribut WebMethod. Vous pouvez ensuite l'appeler à l'aide de jQuery en utilisant $ .ajax.

 $. ajax ({
 type: "POST", 
 url: "PageName.aspx/MethodName", 
 données: "{}", 
 contentType: "application/json; charset = utf-8", 
 dataType: "json", 
 success: function (msg) {
 // Faire quelque chose d'intéressant ici.
  }
});

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

Beaucoup de très bonnes choses ASP.Net/jQuery là-bas. Assurez-vous d'avoir lu pourquoi vous devez utiliser msg.d dans le retour sur .Net 3.5 (peut-être depuis 3.0).

64
Gromer

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

Pour répondre à cette possibilité, 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 ce qui est nécessaire ici. Si vous faites référence à un bouton particulier, vous voulez une correspondance de texte précise comme celle-ci.

Si, cependant, vous voulez faire la même action pour chaque btnAwesome, alors allez avec la réponse de Gromer.

13
Lucas Wilson-Richter

La page des formulaires Web ASP.NET a déjà 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 ce qui suit dans votre fichier de code pour générer le JavaScript qui effectue le PostBack. L'utilisation de cette méthode garantit que le bon ID client 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>

Vous pouvez maintenant utiliser "btnLogin_Click ()" à partir de votre javascript pour soumettre le clic du bouton au serveur.

10
jacksonakj

Dans le côté client, gérez l'événement click 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();
  }
 }
}
4
user434917

Je me suis retrouvé à vouloir faire cela et j'ai passé en revue les réponses ci-dessus et en ai fait une approche hybride. C'est devenu un peu délicat, mais voici ce que j'ai fait:

Mon bouton fonctionnait déjà avec un poste côté serveur. Je voulais que cela continue de fonctionner, alors j'ai laissé le "OnClick" le même, mais j'ai ajouté un OnClientClick:

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

Voici mon élément de bouton complet au cas où cela importerait:

<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 lors 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, je devais faire une vérification pour voir si je devais montrer une boîte de dialogue à l'utilisateur. Si je montre la boîte de dialogue, je renvoie false, ce qui provoque l'arrêt du traitement de l'événement. Si je n'affiche pas la boîte de dialogue, je renvoie true, ce qui provoque le traitement de l'événement et l'exécution de ma logique de publication comme avant.

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!

De retour 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
}

À:

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 la présence ou non d'un message et sur la valeur de ce message.

3
Kirk Liemohn