2009-11-17 5 views
0

Pourriez-vous s'il vous plaît aidez-moi? J'ai créé un dialogue Modal Box basé sur le code indiqué dans cet article: http://www.eggheadcafe.com/articles/javascript_modal_dialog.aspBoîte de dialogue Modal - valeur de retour pas toujours retourné

Dans mon exemple de code, j'utilise cela trois fois de dialogue: un lien hypertexte, un bouton Button1 avec l'attribut onclick ajouté et Bouton Button2 avec l'événement OnClientClick. Si je clique sur le lien hypertexte, la valeur de retour de la boîte de dialogue qui définit le bouton de la boîte de dialogue sur lequel on clique va à une zone de texte. Mais si je clique sur Button1 ou Button2, je ne peux pas obtenir la valeur de retour, c'est-à-dire déterminer quel bouton de la boîte de dialogue est cliqué.

Pourriez-vous s'il vous plaît m'aider à trouver une manière correcte d'obtenir la valeur de retour du dialogue? Je suis particulièrement intéressé par le cas de Button1 avec l'attribut onclick ajouté.

Vous trouverez ci-dessous mes codes de test Page et code-behind.

== == page

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ModalDialogTest1.aspx.vb" Inherits="ModalDialogTest1" %> 

<!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> 
<script language="javascript"> 

var ModalDialogWindow; 
var ModalDialogInterval; 
var ModalDialog = new Object; 

ModalDialog.value = ''; 
ModalDialog.eventhandler = ''; 


function ModalDialogMaintainFocus() 
{ 
    try 
    { 
    if (ModalDialogWindow.closed) 
    { 
     window.clearInterval(ModalDialogInterval); 
     eval(ModalDialog.eventhandler);  
     return; 
    } 
    ModalDialogWindow.focus(); 
    } 
    catch (everything) { } 
} 

function ModalDialogRemoveWatch() 
{ 
    ModalDialog.value = ''; 
    ModalDialog.eventhandler = ''; 
} 

function ModalDialogShow(Title,BodyText,Buttons,EventHandler) 
{ 

    ModalDialogRemoveWatch(); 
    ModalDialog.eventhandler = EventHandler; 

    var args='width=350,height=125,left=325,top=300,toolbar=0,'; 
     args+='location=0,status=0,menubar=0,scrollbars=1,resizable=0'; 

    ModalDialogWindow=window.open("","",args); 
    ModalDialogWindow.document.open(); 
    ModalDialogWindow.document.write('<html>'); 
    ModalDialogWindow.document.write('<head>'); 
    ModalDialogWindow.document.write('<title>' + Title + '</title>'); 
    ModalDialogWindow.document.write('<script' + ' language=JavaScript>'); 
    ModalDialogWindow.document.write('function CloseForm(Response) '); 
    ModalDialogWindow.document.write('{ '); 
    ModalDialogWindow.document.write(' window.opener.ModalDialog.value = Response; '); 
    ModalDialogWindow.document.write(' window.close(); '); 
    ModalDialogWindow.document.write('} '); 
    ModalDialogWindow.document.write('</script' + '>');   
    ModalDialogWindow.document.write('</head>'); 
    ModalDialogWindow.document.write('<body onblur="window.focus();">'); 
    ModalDialogWindow.document.write('<table border=0 width="95%" align=center cellspacing=0 cellpadding=2>'); 
    ModalDialogWindow.document.write('<tr><td align=left>' + BodyText + '</td></tr>'); 
    ModalDialogWindow.document.write('<tr><td align=left><br></td></tr>'); 
    ModalDialogWindow.document.write('<tr><td align=center>' + Buttons + '</td></tr>'); 
    ModalDialogWindow.document.write('</body>'); 
    ModalDialogWindow.document.write('</html>'); 
    ModalDialogWindow.document.close(); 
    ModalDialogWindow.focus(); 
    ModalDialogInterval = window.setInterval("ModalDialogMaintainFocus()",5); 

} 

</script> 

<script language=JavaScript> 
    function OKCancel_1(BodyText, EventHandler) { 
     var Buttons = ''; 
     Buttons = '<input type="submit" value="Cancel" class="butt" style="width:100px;" onclick=javascript:CloseForm("Cancel");>&nbsp;&nbsp;'; 
     Buttons += '<input type="submit" value="OK" class="butt" style="width:100px;" onclick=javascript:CloseForm("OK");>&nbsp;&nbsp;'; 
     ModalDialogShow("Dialog", BodyText, Buttons, EventHandler); 
    } 

    function NoYes(BodyText, EventHandler) { 
     var Buttons = ''; 
     Buttons = '<input type="submit" value="No" class="butt" style="width:100px;" onclick=javascript:CloseForm("No");>&nbsp;&nbsp;'; 
     Buttons += '<input type="submit" value="Yes" class="butt" style="width:100px;" onclick=javascript:CloseForm("Yes");>&nbsp;&nbsp;'; 
     ModalDialogShow("Dialog", BodyText, Buttons, EventHandler); 
    } 

    function OKCancelReturnMethod() { 
    document.getElementById('OKCancelReturn').value = ModalDialog.value; 
    ModalDialogRemoveWatch(); 
    } 

    function NoYesReturnMethod() { 
    document.getElementById('modalreturn').value = ModalDialog.value; 
    ModalDialogRemoveWatch(); 
    } 

</script> 

<body> 


<form id="form2" runat="server"> 
    <div> 
     <asp:HyperLink ID="HyperLink3" runat="server" 
     NavigateUrl="javascript:OKCancel_1('OKCancel test','OKCancelReturnMethod()');">OK/Cancel_1 
     </asp:HyperLink> 
     <br /><br /> 
     <asp:Label ID="Label1" runat="server" Text="OKCancelReturn:"></asp:Label> 
     <asp:TextBox ID="OKCancelReturn" runat="server"></asp:TextBox> 
     <br /><br /> 
     <asp:Button ID="Button1" runat="server" Text="Button -> NoYes onclick" > 
     </asp:Button> 
     <br /><br /> 
     <asp:Button ID="Button2" runat="server" Text="Button -> NoYes OnClientClick" 
     OnClientClick="javascript:NoYes('NoYes test','NoYesReturnMethod()');"> 
     </asp:Button> 
     <br /><br /> 
     <asp:Label ID="Label2" runat="server" Text="modalreturn:"></asp:Label> 
     <asp:TextBox ID="modalreturn" runat="server"></asp:TextBox> 
    </div> 
    </form> 
</body> 
</html> 

== code-behind ===

Partial Class ModalDialogTest1 
    Inherits System.Web.UI.Page 

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
     Dim message As String 
     message = "Test Message: Do you want to delete?" 
     Button1.Attributes("onclick") = GetConfirmationScript(message) 
    End Sub 

    Private Function GetConfirmationScript(ByVal message As String) As String 
     Dim output As String 
     output = "javascript:NoYes('" & message & "','NoYesReturnMethod()');" 
     Return output 
    End Function 

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click 
     OKCancelReturn.Text = modalreturn.Text 

    End Sub 
End Class 

Un grand merci, Lev

Répondre

0

Vous devez avoir deux NoYesReturnMethods, et laissez-passer un différent dans onclick de Button1 et Button2.

OnClientClick="NoYes('NoYes test','NoYesReturnMethod1()') 

(et de même pour Bouton2 -.> NoYesReturnMethod2)

Cependant cela est probablement pas ce que vous voulez entendre, mais le code que vous avez basé sur c'est diaboliquement terribles. Il est beaucoup plus compliqué que nécessaire et abuse des URLs, de l'enchaînement de ficelles HTML non échappé, des popups sans chrome, et des exceptions de rejet ... c'est comme un sac à main des pires pratiques possibles.

Si tous vos cas sont simplement un message avec des boutons oui/non, vous feriez mieux de s'en tenir à un appel window.confirm trivial. Si vous avez besoin d'inclure des dialogues plus complexes, essayez l'un des nombreux autres scripts/plugins de la boîte de dialogue.

+0

Bobince, Merci pour votre réponse. Malheureusement, avoir deux méthodes différentes n'aide pas: aucune méthode ne retourne une valeur. Donc encore une fois: si j'utilise un lien hypertexte pour appeler le dialogue modal, cela fonctionne, si j'utilise des boutons - ne fonctionne pas. Plus de pensées? Comme pour votre note, la raison de ne pas utiliser un appel window.confirm trivial est que le bouton par défaut de la boîte de dialogue est OK. Mes utilisateurs ont besoin du bouton par défaut pour être Annuler. C'est pourquoi j'essaie de gérer un dialogue personnalisé. Dans l'attente de votre réponse. Merci, Lev – Lev

+0

Il renvoie la valeur; Je pense que c'est juste la tentative (de débogage?) De l'écrire dans 'document.getElementById ('modalreturn'). Value' qui échoue. Vous ne pouvez pas utiliser les ID ASP.NET comme ID d'élément de page, car ASP.NET les modifie en 'ct100-something-modalreturn' et similaires pour éviter les conflits de noms. Vous devez commencer à coller laide '<% = modalreturn.ClientID%>' ASP dans votre JS si vous voulez le faire comme ça. Voir par exemple. http://stackoverflow.com/questions/836121/javascript-and-asp-net-web-user-controls – bobince

Questions connexes