asp.net - 结合 jQuery 模式对话框和 ASP.net 服务器端事件的正确方法是什么？

Question

我是 jQuery 新手，我想在 ASP.Net 应用程序中做这个简单的事情:

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

以下哪种方法是正确的:

1) 将 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" />

2) 将 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;是按钮？

Answer 1

第二种方法更正确。如果您考虑一下，当您想要与服务器进行一些交互时，您会想要使用服务器端控件。在这种情况下，您不想与服务器交互，而是建立一个客户端模式对话框，这需要与服务器零交互才能完成。

我会使用以下内容(未经测试):

<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() jQuery 中的方法的一些示例。您会注意到，在 ASP.NET MVC 中，您看不到那么多的服务器端控件，而是与 jQuery 的更丰富的集成。这是 Microsoft 的总体方向 - 更少的服务器控件和更多的 AJAX 级集成。