模态对话框 - 并不总是返回返回值

时间:2009-11-17 20:43:45

标签: asp.net

你能帮帮我吗? 我已经根据本文中显示的代码创建了一个模态对话框: http://www.eggheadcafe.com/articles/javascript_modal_dialog.asp

在我的示例代码中,我使用此对话框三次:对于超链接,添加了onclick属性的按钮Button1和带有OnClientClick事件的按钮Button2。 如果单击超链接,则定义单击对话框按钮的对话框中的返回值将转到文本框。 但是如果我点击Button1或Button2,我就无法获得返回值,即确定点击了哪个对话框的按钮。

你能帮我找到一个正确的方法来获得对话框的返回值吗? 我对Button1的情况特别感兴趣,并添加了onclick属性。

下面是我的页面和代码隐藏测试代码。

== 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>

==代码隐藏===

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

非常感谢, 列夫

1 个答案:

答案 0 :(得分:0)

你需要有两个NoYesReturnMethods,并在点击Button1和Button2时传递一个不同的。

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

(类似于button2 - &gt; NoYesReturnMethod2。)

然而,这可能不是你想要听到的,但你所基于的代码是恶魔般可怕的。这比它需要的要复杂得多,并且滥用evaljavascript: URL,未转义的HTML字符串保留,无格式弹出窗口以及丢弃异常......这就像是最糟糕的做法。 / p>

如果您的所有案例都只是带有是/否按钮的消息,那么最好坚持使用简单的window.confirm电话。如果您可能需要包含更多涉及的对话框,请尝试其中一个页内对话框脚本/插件。