代码改变世界

关于jConfirm回传的解决方案

2010-06-09 14:24  破狼  阅读(6557)  评论(9)  编辑  收藏  举报

在jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)(翻译)发布后，受到大家的很多鼓励，在这里先感谢大家。

在昨天lastwinter留言关于jConfirm的问题，如下

QQ截图未命名

我趁今天有空就考虑了下。我觉得lastwinter问这个问题应该是关于ASP.NET的回传问题，这主要是jConfirm这个为CallBack回调，

他是异步的，并非同步。

所以我尝试了下阻止事件的冒泡，并当选择为true是自动回传。用LinkButton测试(Button不同于这个解决的方案在后面解释)

现贴出LinkButton的CODE DEMO：

关于jConfirm回传DEMO

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

    <script src="Script/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="Script/jquery.alerts-1.1/jquery.alerts.js" type="text/javascript"></script>

    <link href="Script/jquery.alerts-1.1/jquery.alerts.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:LinkButton ID="LinkButton1" runat="server" onclick="Button1_Click" >LinkButton</asp:LinkButton>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
   
    <div>
    </div>
    </form>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#<%=LinkButton1.ClientID %>").click(function(event) {

            jConfirm("test", "test jconfirm", function(r) {
            if (r) {
                    <%= Page.ClientScript.GetPostBackClientHyperlink(LinkButton1,"") %>
                    }
                });
                event.stopPropagation();
                event.preventDefault();

            });

        });
    </script>

</body>
</html>

 

LinkButton1 Button Click CODE

protected void Button1_Click(object sender, EventArgs e)
   {
       this.Label1.Text = DateTime.Now.ToString();
   }

主要为先阻止事件的冒泡event.stopPropagation();event.preventDefault(); 在jConfirm的callback回调函数中判断是否需要回传，

<%= Page.ClientScript.GetPostBackClientHyperlink(LinkButton1,"") %>;；

点击LinkButton1是效果为：

QQ截图未命名

点击Cancel时候就不会回传，当ok时候就会发生回传更新时间：

QQ截图未命名

对于我们的LinkButton的实现是在输出的客户端Html代码有脚本自动回传，而Button这是HTML元素submit，提交，

所以在这两个的区别下，LinkButton就多了几处javascript 代码：

<script type="text/javascript">

//<![CDATA[

var theForm = document.forms['form1'];

if (!theForm) {

theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

}

//]]>

</script>

和 input Hidden

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

上面所说的意思就是如果要用Button实现同样的示例，我们必须保证我的输出客户端的代码有这些回传脚本注册，还有就是回传为

<%=Page.ClientScript.GetPostBackEventReference(Button1,"") %>。所以我觉得用LinkButton更适合。