SimpleModal interrompt les publications ASP.Net

StackOverflow https://stackoverflow.com/questions/29174

Question

j'utilise jQuery et SimpleModal dans un projet ASP.Net pour créer de jolies boîtes de dialogue pour une application Web.Malheureusement, les boutons d'une boîte de dialogue modale ne peuvent plus exécuter leurs publications, ce qui n'est pas vraiment acceptable.

Il y a une source que j'ai trouvée avec un solution de contournement, mais pour ma vie, je n'arrive pas à le faire fonctionner, principalement parce que je ne comprends pas pleinement toutes les étapes nécessaires.

J'ai également une solution de contournement, qui consiste à remplacer les publications, mais c'est moche et probablement pas la plus fiable.J'aimerais vraiment que les publications fonctionnent à nouveau.Des idées?

MISE À JOUR:Je dois préciser que les publications ne fonctionnent pas car le Javascript utilisé pour exécuter les publications est cassé d'une manière ou d'une autre, donc rien ne se passe du tout lorsque vous cliquez sur le bouton.

Était-ce utile?

La solution

Vous étiez tous les deux sur la bonne voie.Ce que j'ai réalisé, c'est que SimpleModal ajoute la boîte de dialogue au corps, qui se trouve en dehors de ASP.Net. <form>, ce qui interrompt la fonctionnalité, car il ne trouve pas les éléments.

Pour résoudre ce problème, je viens de modifier la source SimpleModal pour tout ajouter à 'form' au lieu de 'body'.Lorsque je crée la boîte de dialogue, j'utilise également le persist: true Option, pour s'assurer que les boutons restent pendant l'ouverture et la fermeture.

Merci à tous pour les suggestions!

MISE À JOUR: La version 1.3 ajoute un appendTo option dans la configuration pour spécifier à quel élément la boîte de dialogue modale doit être ajoutée. Voici les documents.

Autres conseils

Toutes les publications ASP.NET standard fonctionnent en appelant une méthode javascript __doPostBack sur la page.Cette fonction soumet le formulaire (ASP.NET n'aime vraiment qu'un seul formulaire par page) qui comprend un champ de saisie caché dans lequel vivent tous les états d'affichage et autres bontés.

À première vue, je ne vois rien dans SimpalModal qui gâcherait le formulaire de votre page ou l'une des entrées cachées standard, à moins que le contenu de ce modal provienne d'un HTTP GET vers une page ASP.NET.Cela entraînerait le rendu de deux formulaires ASP.NET dans un seul DOM et gâcherait presque certainement la fonction __doPostBack.

Avez-vous envisagé d'utiliser le Contrôle ModalPopup ASP.NET AJAX?

Les navigateurs Web ne PUBLIERONT aucun élément de formulaire désactivé ou masqué.

Alors ce qui se passe c'est :

  1. L'utilisateur clique sur un bouton dans votre boîte de dialogue.
  2. Le bouton appelle la méthode close() de SimpleModal, masquant la boîte de dialogue et le bouton
  3. Le client POST le formulaire (sans l'ID du bouton)
  4. Le framework ASP.NET ne parvient pas à déterminer sur quel bouton vous avez cliqué
  5. Votre code côté serveur n'est pas exécuté.

La solution est de faire tout ce que vous devez faire sur le client (en fermant la boîte de dialogue dans ce cas), puis d'appeler vous-même __doPostback().

Par exemple (où « dlg » est la référence de la boîte de dialogue SimpleModal côté client) :

btn.OnClientClick = string.Format("{0}; dlg.close();",
                        ClientScript.GetPostBackEventReference(btn, null));

Cela devrait masquer la boîte de dialogue, soumettre le formulaire et appeler l'événement côté serveur que vous avez pour ce bouton.

@Dan

Toutes les publications ASP.NET standard fonctionnent en appelant une méthode javascript __doPostBack sur la page.

asp : les boutons n'appellent pas __doPostback() car les contrôles d'entrée HTML soumettent déjà le formulaire.

J'ai été surpris par celui-ci - un grand merci à tghw et à tous les autres contributeurs sur le formulaire appendto au lieu de body fix.(résolu par les attributs sur la version 1.3)

d'ailleurs:Si quelqu'un a besoin de fermer la boîte de dialogue par programme à partir de .net, vous pouvez utiliser ce type de syntaxe

private void CloseDialog()
{
    string script = string.Format(@"closeDialog()");
    ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}

où le javascript de closedialog est comme ça....

    function closeDialog() {
        $.modal.close();
    }

J'ai trouvé les travaux suivants sans modifier simplemodal.js :

function modalShow(dialog) {

    // if the user clicks "Save" in dialog
    dialog.data.find('#ButtonSave').click(function(ev) {
        ev.preventDefault();

        //Perfom validation                

        // close the dialog
        $.modal.close();

        //Fire the click event of the hidden button to cause a postback
        dialog.data.find('#ButtonSaveTask').click();
    });

    dialog.data.find("#ButtonCancel").click(function(ev) {
        ev.preventDefault();
        $.modal.close();
    });
}

Ainsi, au lieu d'utiliser les boutons de la boîte de dialogue pour provoquer la publication, vous empêchez leur soumission, puis recherchez un bouton caché dans le formulaire et appelez son événement de clic.

FWIW, j'ai mis à jour le article de blog que vous avez souligné avec des éclaircissements, republiés ici - le raisonnement et d'autres détails sont dans le billet de blog :

La solution (dès mon dernier check-in avant le déjeuner) :

  1. Remplacez l'événement onClose de la boîte de dialogue et procédez comme suit :
    1. Appeler la fonction Fermer par défaut de la boîte de dialogue
    2. Définissez le innerHTML du div de dialogue sur un seul
    3. Détourner __doPostBack, en le pointant vers une nouvelle fonction, newDoPostBack

D’après certains commentaires que j’ai vus sur le Web, le point 1 nécessite quelques éclaircissements.Malheureusement, je ne travaille plus chez le même employeur et je n’ai pas accès au code que j’ai utilisé, mais je ferai ce que je peux.Tout d’abord, vous devez remplacer la fonction onClose de la boîte de dialogue en définissant une nouvelle fonction et en pointant votre boîte de dialogue vers elle, comme ceci :

$('#myJQselector').modal({onClose: mynewClose});
  • Appelez la fonction Fermer par défaut de la boîte de dialogue.Dans la fonction que vous définissez, vous devez d'abord appeler la fonctionnalité par défaut (une bonne pratique pour à peu près tout ce que vous remplacez habituellement) :
  • Définissez le innerHTML du div de dialogue sur un seul– Ce n’est pas une étape obligatoire, alors sautez-la si vous ne comprenez pas cela.
  • Détourner __doPostBack, en le pointant vers une nouvelle fonction, newDoPostBack 
function myNewClose (dialog)
{
    dialog.close();
    __doPostBack = newDoPostBack;
}
  1. Écrivez la fonction newDoPostBack : 
function newDoPostBack(eventTarget, eventArgument)
{
    var theForm = document.forms[0];
    if (!theForm)
    {
        theForm = document.aspnetForm;
    }
 
    if (!theForm.onsubmit || (theForm.onsubmit() != false))
    {
        document.getElementById("__EVENTTARGET").value = eventTarget;
        document.getElementById("__EVENTARGUMENT").value = eventArgument;
        theForm.submit();
    }
}

Le nouveau Jquery.simplemodal-1.3.js a une option appelée appendTo.Ajoutez donc une option appelée appendTo:'form' car la valeur par défaut est appendTo:'body' qui ne fonctionne pas dans asp.net.

J'ai eu le même problème, mais {appendTo:'form'} a provoqué un rendu complètement erroné de la fenêtre contextuelle modale (comme si j'avais un problème CSS).

Il s'avère que le modèle sur lequel je construis contient des éléments qui placent d'autres formulaires sur la page.Une fois que j'ai réglé {appendTo:'#aspnetForm'} (l'ID de formulaire Asp.net par défaut), tout a très bien fonctionné (y compris la publication).

En plus de la réponse de tghw, cet excellent article de blog m'a aidé : jQuery :Corrigez vos publications dans les formulaires modaux -- spécifiquement le commentaire de BtnMike :"Vous ne devez pas non plus avoir CSSClass =" SimpleModal-Close "définir sur votre bouton ASP:." La retirer de la classe était la solution pas évidente.

-John

si vous ne souhaitez pas modifier la source SimpleModal.essaye ça..

Après avoir appelé la méthode modal(), ajoutez ceci :

$("#simplemodal-overlay").appendTo('form');
$("#simplemodal-container").appendTo('form');

le plugin SimpleModal en ajoute deux à votre balisage.

  1. 'simplemodal-overlay' pour l'arrière-plan
  2. 'simplemodal-container' contenant le div que vous souhaitez comme pop-up modal.
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top