代码之家 › 专栏 › 技术社区 › mmutilva

如何将jQuery模式对话框和ASP.net服务器端事件结合起来?

jquery asp.net

mmutilva · 技术社区 · 15 年前

表单中有一个按钮,单击该按钮时,我想执行一些服务器端代码。但我希望首先通过jQuery模式对话框进行用户确认。

以下哪种方法是正确的:

放置ASP.Net按钮(服务器控件 OnClick 链接到表单中的服务器端事件),并在单击时使用jQuery打开对话框:

<script ...>
    $(document).ready(function ()
    {
        $("#ConfirmDialog").dialog(
        {
            autoOpen: false,
            modal: true,
            buttons: {
                'Yes': function () { return true; },
                'No': function () { return false; }
            }
        });

        $("#<%= SubmitButton.ClientID %>").click(function (event) {
            event.preventDefault();
            $("#ConfirmDialog").dialog('open');
        });
    });
</script>
...
<div id="ConfirmDialog"></div>
...
<asp:Button ID="SubmitButton" runat="server" 
        Text="Submit" OnClick="Submit_Click" />

将ASP.Net按钮(服务器控件)放在用作确认对话框的div中,并将HTML按钮(非服务器控件)放在表单中供用户单击。

<script ...>
    $(document).ready(function ()
    {
        $("#ConfirmDialog").dialog(
        {
            autoOpen: false,
            modal: true
        });

        $("#SubmitButton").click(function (event) {
            $("#ConfirmDialog").dialog('open');
        });
    });
</script>
...
<div id="ConfirmDialog">
    <asp:Button ID="SubmitButton" runat="server" 
            Text="Yes" OnClick="Submit_Click" />        
    ...
</div>
...
<input id="SubmitButton" type="button" value="Submit" />

我要用第一种方法,但不能成功,可以吗 event.PreventDefault() 然后就 return true;

1 回复 | 直到 15 年前

Doug 15 年前

第二种方法更正确。如果您考虑一下,您希望在与服务器进行交互时使用服务器端控件。在本例中,您不想与服务器交互,但需要建立一个客户端模式对话框,该对话框要求与服务器零交互才能完成。

<script ...>
    $(document).ready(function ()
    {
        $("#ConfirmDialog").dialog(
        {
            autoOpen: false,
            modal: true
        });

        $("#SubmitButtonClient").click(function (event) {
            $("#ConfirmDialog").dialog('open');
        });
    });
</script>
...
<div id="ConfirmDialog">
    <asp:Button ID="SubmitButton" runat="server" 
            Text="Yes" OnClick="Submit_Click" />        
    ...
</div>
...
<input id="SubmitButtonClient" type="button" value="Submit" />

我只更改了客户端提交按钮的id。在这种方法中,您不需要 event.PreventDefault() . 请注意,我没有测试上述代码。

但是,由于jQuery非常面向AJAX,所以通常不希望通过服务器回发来完成“按钮按下”,而是使用AJAX post。这将阻止整个页面重新加载,您可以根据需要调整页面。见 ajax() 方法获取一些示例。您会注意到,在ASP.NET MVC中,您几乎看不到那么多服务器端控件,但与jQuery的集成更加丰富。这是微软的大方向——减少服务器控件和更多的AJAX级集成。