Désactiver les boutons de post-utilisation à l’aide de jquery dans l’application .net

Vous pouvez le faire d’une manière légèrement différente, comme ceci:

 $(function () { $("#aspnetForm").submit(function () { $('input[type=submit]').click(function() { return false; }); }); }); 

Cela rend les clics futurs inefficaces, ce qui les empêche essentiellement de ne rien faire. Lorsque vous désactivez une entrée, cela supprime également la paire clé / valeur soumise avec

, de sorte que l’action côté serveur déclenchée par celle-ci ne fonctionne pas.

Il est à noter que dans jQuery 1.4.3, vous pourrez réduire ceci à:

 $(function () { $("#aspnetForm").submit(function () { $('input[type=submit]').click(false); }); }); 

L’approche consistant à désactiver le bouton avant la soumission a deux effets: –

a) Le bouton prend l’apparence désactivée.

b) La valeur du bouton n’est pas affichée dans les parameters du formulaire.

Si la valeur du bouton n’est pas publiée sur le serveur, ASP.Net ne sait pas quel bouton a été enfoncé et n’exécute donc pas le gestionnaire OnClick approprié.

Pour vérifier, ajoutez ce qui suit à votre code derrière

 protected void Page_Load(object sender, EventArgs e) { Response.Write("Load " + IsPostBack + "
"); foreach (ssortingng s in Request.Form.AllKeys) { Response.Write(ssortingng.Format("s:'{0}' = {1}
", s, Request.Form[s])); } } 

Et puis exécutez la page (les deux avec JS pour désactiver les boutons et sans). Si la valeur du bouton n’est pas publiée sur le serveur, ASP.Net ne sait pas quel bouton a été enfoncé et n’exécute donc pas le gestionnaire OnClick approprié.

Juste une autre observation. Alternativement, vous pouvez verrouiller l’interface utilisateur avec un message superposé occupé.

La partie balisage:

 $(function() { // when document has loaded ($.unblockUI); //unlock UI //Show busy message on click event and disable UI $('#btnHelloWorld').click(function() { $.blockUI({ message: '
Please wait...
' }); }); }); 
 

Le code derrière:

  Protected Sub btnHelloWorld_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnHelloWorld.Click Label1.Text = "Hello World" Threading.Thread.Sleep(5000) End Sub 

Découvrez le plugin jQuery BlockUI

Je voulais juste append une résolution supplémentaire. Nous avons décidé de simplement supprimer le bouton une fois qu’il a été cliqué et de le remplacer par du texte.

Pour ce faire, nous avons:

 $(function () { $(".DisableButton").click(function () { $(this).hide(); $(this).after('
Please Wait. Resortingeving information. This may take up to 60 seconds.
'); }); }); 

Notez que cela masque le bouton puis injecte du HTML après le code des boutons. Le masquer permet à .Net d’aller de l’avant et d’exécuter le gestionnaire onclick pendant le post-retour en le supprimant comme un élément cliquable à l’écran.

Si vous avez des contrôles de validation ASP.NET sur votre page, cela devient compliqué. Mais cela a déjà été répondu: bouton Désactiver lors de la soumission du formulaire

Ajoutez cet atsortingbut à votre bouton:

 usesubmitbehavior="False" 

Cela va insérer quelque chose comme ce qui suit dans onclick:

 javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$Main$Tabs$SaveTab$Cancel", "", true, "", "", false, false)) 

Ce code provoquera une publication même si le bouton est désactivé. Afficher un dialog de confirmation et permettre l’annulation de la publication devient un peu plus intéressant:

  var click = $("[id$='_Cancel']")[0].onclick; $("[id$='_Cancel']")[0].onclick = null; $("[id$='_Cancel']").bind('click', function (event) { addFeeSchedule.onCancelClick(event) }); $("[id$='_Cancel']").bind('click', click); 

Pour éviter que la publication ne se produise immédiatement, supprimez le code onclick inséré par .net et reliez-le après votre propre fonction à l’aide de jQuery. Utilisez event.stopImmediatePropagation() pour empêcher le retour de publication:

 onCancelClick: function (event) { var confirmResponse; confirmResponse = confirm('No fee schedule will be created.\n\nAre you sure you want to cancel?'); if (confirmResponse == true) { showWait(); event.target.disabled = 'true'; } else { event.stopImmediatePropagation(); } }, 

La réponse fournie par Nick Craver est de loin la meilleure solution que j’ai trouvée n’importe où sur le net. Toutefois, il existe un cas où la solution ne fonctionne pas correctement: lorsque le formulaire contient des boutons de soumission dans UpdatePanel avec sa propriété UpdateMode définie sur “Conditional” et / ou la propriété ChildrenAsTriggers définie sur false.

Dans ces situations, le contenu des panneaux de mise à jour n’est pas automatiquement actualisé à la fin de la publication asynchrone. Ainsi, si ces panneaux de mise à jour contenaient des boutons de soumission, la solution donnée laisserait ces boutons désactivés de manière permanente.

L’amélioration suivante apscope à la solution résout ce problème en réactivant les boutons après une publication asynchrone ou “partielle”:

 var canProcessClicks = true; if (typeof (Sys) != 'undefined') { // handle partial-postback var requestManager = Sys.WebForms.PageRequestManager.getInstance(); requestManager .add_initializeRequest(function() { // postback started canProcessClicks = false; }); requestManager .add_endRequest(function() { // postback completed canProcessClicks = true; }); } $(function () { $('input[type=submit]').on("click", function () { return canProcessClicks ; }); $("#aspnetForm").submit(function () { if (typeof (Sys) != 'undefined' && Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) { // this is an async postback so ignore because this is already handled } else { // full postback started canProcessClicks = false; } }); }); 

Pour cela, vous devez utiliser l’atsortingbut du bouton d’entrée désactiver tous les contrôles

Pour plus de détails vérifier ce lien