将jQuery模态对话框和ASP.net服务器端事件组合在一起的正确方法是什么？

I'm new to jQuery and I want to do this simple thing in a ASP.Net application:

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

I have a button in the the form and which when clicked I want to execute some server side code. BUT I want the user confirmation first, given through a jQuery modal dialog.

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

Which of the following approaches is correct:

以下哪种方法是正确的:

1) Put the ASP.Net button (server control who's OnClick is linked to the server side event) in the form and use jQuery to open the dialog when clicked:

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) Put the ASP.Net Button (server control) in the div used as the confirmation dialog and put a HTML button (non server control) in the form for the user to 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" />

I'm going with the first approach but can't make it work, is it ok to do event.PreventDefault() and then just return true; in the Yes button?

我正在使用第一种方法,但无法使其工作,是否可以执行event.PreventDefault()然后只返回true;在是按钮?

1 个解决方案

#1

The 2nd approach is more correct. If you think about it, you want to use server-side controls when you want some interaction with the server. In this case, you don't want to interact with the server, but put up a client-side modal dialog, which requires zero interaction with the server to accomplish.

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

I'd use the following (untested):

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

<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" />

All I changed was the id of the client-side submit button. In this approach, you don't need to do event.PreventDefault(). Note that I haven't tested the above code.

我改变的只是客户端提交按钮的ID。在这种方法中,您不需要执行event.PreventDefault()。请注意,我还没有测试上面的代码。

However, since jQuery is very AJAX-oriented, you generally don't want to do a server postback to accomplish your "button press", but use an AJAX post. This will prevent the entire page from reloading, and you can adjust your page as needed. See the ajax() method in jQuery for some examples. You'll notice that in ASP.NET MVC you don't see nearly as many server-side controls, but a richer integration with jQuery. This is the general direction Microsoft is headed - fewer server controls and more AJAX-level integration.

但是,由于jQuery非常面向AJAX,因此您通常不希望执行服务器回发来完成“按下按钮”,而是使用AJAX帖子。这将阻止整个页面重新加载,您可以根据需要调整页面。有关示例,请参阅jQuery中的ajax()方法。您会注意到,在ASP.NET MVC中,您看不到几乎同样多的服务器端控件,而是与jQuery更丰富的集成。这是微软的总体方向 - 更少的服务器控制和更多的AJAX级集成。

#1