[c#] 带有ASP.NET按钮回发的jQuery UI对话框



Answers

$('#divname').parent().appendTo($("form:first"));

使用此代码解决了我的问题,并且它在每个浏览器,Internet Explorer 7,Firefox 3和Google Chrome中都能正常工作。 我开始喜欢jQuery ...这是一个很酷的框架。

我也测试过部分渲染,我正在寻找。 大!

<script type="text/javascript">
    function openModalDiv(divname) {
        $('#' + divname).dialog({ autoOpen: false, bgiframe: true, modal: true });
        $('#' + divname).dialog('open');
        $('#' + divname).parent().appendTo($("form:first"));
    }

    function closeModalDiv(divname) {
        $('#' + divname).dialog('close');
    }
</script>
...
...
<input id="Button1" type="button" value="Open 1" onclick="javascript:openModalDiv('Div1');" />
...
...
<div id="Div1" title="Basic dialog" >
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
          postback test<br />
          <asp:Button ID="but_OK" runat="server" Text="Send request" /><br />
          <asp:TextBox ID="tb_send" runat="server"></asp:TextBox><br />
          <asp:Label ID="lbl_result" runat="server" Text="prova" BackColor="#ff0000></asp:Label>
        </ContentTemplate>
    <asp:UpdatePanel>
    <input id="Button2" type="button" value="cancel" onclick="javascript:closeModalDiv('Div1');" />
</div>
Question

我有一个jQuery UI对话框在我的ASP.NET页面上工作得很好:

jQuery(function() {
    jQuery("#dialog").dialog({
        draggable: true,
        resizable: true,
        show: 'Transfer',
        hide: 'Transfer',
        width: 320,
        autoOpen: false,
        minHeight: 10,
        minwidth: 10
    });
});

jQuery(document).ready(function() {
    jQuery("#button_id").click(function(e) {
        jQuery('#dialog').dialog('option', 'position', [e.pageX + 10, e.pageY + 10]);
        jQuery('#dialog').dialog('open');
    });
});

我的div:

<div id="dialog" style="text-align: left;display: none;">
    <asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" />
</div>

但是btnButton_Click永远不会被调用......我该如何解决这个问题?

更多信息:我添加了此代码以将div移动到窗体:

jQuery("#dialog").parent().appendTo(jQuery("form:first"));

但仍然没有成功...




ASP.NET只需在ASP.NET按钮中使用UseSubmitBehavior="false"

<asp:Button ID="btnButton" runat="server"  Text="Button" onclick="btnButton_Click" UseSubmitBehavior="false" />       

参考: Button.UseSubmitBehavior属性




在使用模态:true选项时,使用这一行来完成这项工作。

open: function (type, data) { 
    $('.ui-widget-overlay').appendTo("form"); $(this).parent().appendTo("form"); 
  },



我在创建对话框后添加了以下行:

$(".ui-dialog").prependTo("form");



太棒了! 这解决了我与ASP的问题:Button事件不在jQuery模态内部触发。 请注意,使用下面的jQuery UI模式可以触发按钮事件:

// Dialog Link
$('#dialog_link').click(function () {
    $('#dialog').dialog('open');
    $('#dialog').parent().appendTo($("form:first"))
    return false;
});

下面这行是获得这个工作的关键!

$('#dialog').parent().appendTo($("form:first"))



请注意,jQuery UI v1.10中有一个额外的设置。 有一个appendTo设置已被添加,以解决您用于将元素重新添加到表单的ASP.NET解决方法。

尝试:

$("#dialog").dialog({
     autoOpen: false,
     height: 280,
     width: 440,
     modal: true,
     **appendTo**:"form"
});



以正确的方式移动对话框,但只能在打开对话框的按钮中进行。 以下是jQuery UI示例中的一些附加代码:

$('#create-user').click(function() {
    $("#dialog").parent().appendTo($("form:first"))
    $('#dialog').dialog('open');
})

在对话框中添加你的asp:button ,它运行良好。

注意:在点击“创建用户”按钮后,应该将<按钮>更改为<输入类型=按钮>以防止回发。




主要是因为jQuery使用DOM将对话框移到了表单标签之外。 将它移回到表单标签中,它应该可以正常工作。 您可以通过检查Firefox中的元素来看到这一点。






Related