JQuery UI Dialog & Asp (web forms) 调用事件处理程序答案

【问题标题】：JQuery UI Dialog & Asp (web forms) calling event handlerJQuery UI Dialog & Asp (web forms) 调用事件处理程序
【发布时间】：2011-12-16 07:47:52
【问题描述】：

我有一个带有提交按钮的表单。单击提交按钮时，我会显示一个带有确认和取消的 jqueryUI 对话框。点击确认后，我想回帖并调用提交按钮的事件处理程序，而不是 Page_Load 事件。

我有以下

HTML

<input type="submit" value="Submit" id="submit" runat="server"  onclick="submit" />

jQuery

$("#dialog").dialog('option', 'buttons', {
                "Confirm": function () {
                    $("#ctl01").submit();
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            });

到目前为止，这将调用 page_load 事件，因为我“只是”提交整个表单。

服务器端

protected void Page_Load(object sender, EventArgs e)
    {
        if(Page.IsPostBack)
            result.Text += "hey post-back, we did it!";
    }

    protected void submit(object sender, EventArgs e)
    {
        result.Text += "hey, event handler! ";
    }

【问题讨论】：

我在这里没有看到问题？它不工作吗？你想让它做什么？
我希望它运行 submit(object sender, EventArgs e) 事件处理程序，而不是 Page_Load

标签： jquery asp.net jquery-ui-dialog

【解决方案1】：

从您的帖子中，我了解到您想在单击对话框中的按钮时简单地转到服务器端事件。所以我创建了一个Hidden ASP Server Button 并触发它从确认按钮点击。

这是工作代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="CSS/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />

    <script src="JS/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script src="JS/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="dialog" style="display: none" title="Empty the recycle bin?">
        <p>
            <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
            These items will be permanently deleted and cannot be recovered. Are you sure?</p>
    </div>

    <script>
        jQuery(function() {
            var dlg = jQuery("#dialog").dialog({
                draggable: true,
                resizable: true,
                show: 'Transfer',
                hide: 'Transfer',
                width: 320,
                autoOpen: false,
                minHeight: 10,
                minwidth: 10,
                buttons: {
                    "Confirm": function() {
                        $("#<%=btnNew.ClientID %>").click();
                    },
                    "Cancel": function() {
                        $(this).dialog("close");
                    }
                }
            });
            dlg.parent().appendTo(jQuery("form:first"));
        });

        jQuery(document).ready(function() {
            jQuery("#submit").click(function(e) {
                jQuery('#dialog').dialog('open');
            });

        })

    </script>

    <input type="button" value="Submit" id="submit" />
    <asp:Button runat="server" Style="display: none" ID="btnNew" Text="Submit" OnClick="btnNew_Click" />
    </form>
</body>
</html>

在 _Default.asp.cs 中

public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {


        }

        protected void btnNew_Click(object sender, EventArgs e)
        {
            result.Text += "hey, event handler! ";
        }


    }

【讨论】：

看起来像一个笨拙的实现恕我直言 - 不需要重复隐藏按钮。使 HTML 混乱。
我添加了 e.preventDefault();就在调用隐藏按钮的点击之前。 @SpaceBison 第一次单击将被 jQuery 取消，而不是回发，它将显示对话框。在 Confirmation 中，我们模拟 click 事件，以便回发将运行按钮的事件处理程序。（如果我们使用 $('#form').submit()，代码只会运行 Page_load 而不是按钮的点击事件

【解决方案2】：

我认为 onclick 是一个客户端处理程序

您是否尝试过 OnServerClick，因为它是一个 HTML 按钮？

http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlbutton.onserverclick%28v=VS.100%29.aspx

【讨论】：