如何使用jQuery创建ASP.NET回发确认对话框?

时间:2013-02-18 08:36:10

标签: jquery asp.net

我使用下面的代码来获取Jquery UI弹出窗口,但它没有返回值并且弹出框正在关闭

我需要点击按钮时它必须作为确认框工作..!

代码:

<style type="text/css" >
        .ui-widget-header, .ui-widget-content
    { color: red !important;}
</style>
<script type="text/javascript">
    $(document).ready(function () {
        var $myDialog = $('<div></div>')
        .html('You are going to Lock the Record.<br/>Click OK to confirm.  Click Cancel to stop this action.')
        .dialog({
            autoOpen: false,
            title: 'Confirm..?',
            buttons: { "OK": function () {
                $(this).dialog("close");

            }, "Cancel": function () {
                $(this).dialog("close");

            }
            }
        });

        $(function fn() {
            $('#Button1').click(function (e) {
                return $myDialog.dialog('open');

            });
        });
    });
</script>


<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return fn() onclick="Button1_Click"/>

5 个答案:

答案 0 :(得分:1)

$(function fn() {

 });

U在另一个内部有一个dom ready函数。我需要移除上面的块......

 $(document).ready(function () {
        var $myDialog = $('<div></div>')
        .html('You are going to Lock the Record.<br/>Click OK to confirm.  Click Cancel to stop this action.')
        .dialog({
            autoOpen: false,
            title: 'Confirm..?',
            buttons: { "OK": function () {
                $(this).dialog("close");

            }, "Cancel": function () {
                $(this).dialog("close");

            }
            }
        });
            $('<%=Button1.ClientID%>').click(function (e) {
                $myDialog.dialog('open');
                return false;

            });
    });

我希望这是对的。

答案 1 :(得分:0)

.dialog('open')将始终立即返回,它不会等待用户操作。

您需要更改代码以触发Button1控件的回发。而不是依赖于返回值。

有关触发回发ASP.NET postback with JavaScript

的信息,请参阅此处

修改

<style type="text/css" >
        .ui-widget-header, .ui-widget-content
    { color: red !important;}
</style>
<script type="text/javascript">
    $(document).ready(function () {
        var $myDialog = $('<div></div>')
        .html('You are going to Lock the Record.<br/>Click OK to confirm.  Click Cancel to stop this action.')
        .dialog({
            autoOpen: false,
            title: 'Confirm..?',
            buttons: { "OK": function () {
                $(this).dialog("close");

__doPostBack("<%=Button1.ClientID %>","");

            }, "Cancel": function () {
                $(this).dialog("close");

            }
            }
        });

        $(function fn() {
            $('#Button1').click(function (e) {
                return $myDialog.dialog('open');

            });
        });
    });
</script>


<asp:Button ID="Button1" runat="server" UseSubmitBehavior="false" Text="Button" OnClientClick="return fn()" onclick="Button1_Click"/>

答案 2 :(得分:0)

很难理解你的dom的结构。

但我会给你一个有效的解决方案

<div id="someDialog">some controls or text or whatever you want to show./div>// add it to your page.

然后使用Jquery和Jquery UI库,将其放入head标签

$(function(){
$('#someDialog').dialog({ autoOpen: false,
            title: 'Confirm..?',
            buttons: { "OK": function () {
                if(confirm("are you sure you want to close the dialog))
                     $(this).dialog("close");

            }, "Cancel": function () {
                $(this).dialog("close");

            });


 $('#Button1').click(function (e) {
                $('#someDialog').dialog('open');

            }); // without return statement. 
});

答案 3 :(得分:0)

在HTML输出中使用ID“Button1”呈现asp.net按钮吗?如果是,您可以尝试以下代码(修改您的代码)

代码:

<style type="text/css" >
        .ui-widget-header, .ui-widget-content
    { color: red !important;}
</style>
<script type="text/javascript">
    $(document).ready(function () {
        var $myDialog = $('<div></div>')
        .html('You are going to Lock the Record.<br/>Click OK to confirm.  Click Cancel to stop this action.')
        .dialog({
            autoOpen: false,
            title: 'Confirm..?',
            buttons: { "OK": function () {
                $(this).dialog("close");

            }, "Cancel": function () {
                $(this).dialog("close");

            }
            }
        });

         $('#Button1').click(function (e) {
               $myDialog.dialog('open');
               e.preventDefault();      
          });
      });
</script>


<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"/>

答案 4 :(得分:0)

添加CSS Class delete以进行控制,然后应用jquery确认对话框:

$('.delete').click(function () {
          return confirm('Are you sure you wish to delete this record?'); 
    });