ASP.NET 버튼 포스트 백이있는 jQuery UI 대화 상자

ASP.NET 페이지에서 jQuery UI 대화 상자가 훌륭하게 작동합니다.

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 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"));

그러나 여전히 성공하지 못했습니다 ...

당신은 해결책에 가까우며, 단지 잘못된 물건을 얻는 것입니다. 다음과 같아야합니다.

jQuery(function() {
    var dlg = jQuery("#dialog").dialog({
                         draggable: true,
                         resizable: true,
                         show: 'Transfer',
                         hide: 'Transfer',
                         width: 320,
                         autoOpen: false,
                         minHeight: 10,
                         minwidth: 10
                     });
    dlg.parent().appendTo(jQuery("form:first"));
});

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

이 코드를 사용하면 문제가 해결되었으며 모든 브라우저, Internet Explorer 7, Firefox 3 및 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>

FWIW : 형식 : 첫 번째 기술은 저에게는 효과가 없었습니다.

그러나 해당 블로그 기사의 기술은 다음과 같습니다.

http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html

특히 이것을 대화 선언에 추가하십시오.

  open: function(type,data) {
    $(this).parent().appendTo("form");
  }

jQuery UI v1.10에는 추가 설정이 있습니다. 가 appendTo의 주소로 추가 된 설정, ASP.NET이 양식에 다시 추가 요소에 사용하는 해결 방법은.

시험:

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

위의 켄 의 대답은 나를 위해 속임수를 사용했습니다. 허용되는 답변의 문제점은 페이지에 단일 모달이있는 경우에만 작동한다는 것입니다. 모달이 여러 개인 경우 대화 상자를 초기화하는 동안 사실이 아니라 "open"매개 변수에서 인라인으로 수행해야합니다.

open: function(type,data) { $(this).parent().appendTo("form"); }

첫 번째로 받아 들여진 대답이 여러 모달로 알려주는 것을 수행하면 페이지의 마지막 모달만이 포스트 백을 올바르게 작동시키는 것입니다.

기본적으로 jQuery는 DOM을 사용하여 대화 상자를 양식 태그 외부로 이동하기 때문 입니다. 양식 태그 내부로 다시 이동하면 정상적으로 작동합니다. Firefox에서 요소를 검사하여이를 확인할 수 있습니다.

프로젝트의 모든 대화 상자 에서이 문제를 해결하고 싶지 않았으므로 간단한 jQuery 플러그인을 만들었습니다. 이 플러그인은 새 대화 상자를 열고 ASP.NET 양식 내에 배치하기위한 것입니다 .

(function($) {
    /**
     * This is a simple jQuery plugin that works with the jQuery UI
     * dialog. This plugin makes the jQuery UI dialog append to the
     * first form on the page (i.e. the asp.net form) so that
     * forms in the dialog will post back to the server.
     *
     * This plugin is merely used to open dialogs. Use the normal
     * $.fn.dialog() function to close dialogs programatically.
     */
    $.fn.aspdialog = function() {
        if (typeof $.fn.dialog !== "function")
            return;

        var dlg = {};

        if ( (arguments.length == 0)
                || (arguments[0] instanceof String) ) {
            // If we just want to open it without any options
            // we do it this way.
            dlg = this.dialog({ "autoOpen": false });
            dlg.parent().appendTo('form:first');
            dlg.dialog('open');
        }
        else {
            var options = arguments[0];
            options.autoOpen = false;
            options.bgiframe = true;

            dlg = this.dialog(options);
            dlg.parent().appendTo('form:first');
            dlg.dialog('open');
        }
    };
})(jQuery);</code></pre>

플러그인을 사용하려면 먼저 jQuery UI를로드 한 다음 플러그인을로드하십시오. 그런 다음 다음과 같은 작업을 수행 할 수 있습니다.

$('#myDialog1').aspdialog(); // Simple
$('#myDialog2').aspdialog('open'); // The same thing
$('#myDialog3').aspdialog({title: "My Dialog", width: 320, height: 240}); // With options!

분명히하기 위해이 플러그인은 대화 상자를 호출 할 때 대화 상자를 표시 할 준비가되었다고 가정합니다.

나는 이것이 오래된 질문이라는 것을 알고 있지만, 같은 문제를 가진 사람에게는 더 새롭고 간단한 해결책이 있습니다. "appendTo"옵션이 jQuery UI 1.10.0에 도입되었습니다.

http://api.jqueryui.com/dialog/#option-appendTo

$("#dialog").dialog({
    appendTo: "form"
    ....
});

환상적인! 이것은 jQuery 모달 내에서 ASP : Button 이벤트가 발생하지 않는 문제를 해결했습니다. 다음과 함께 jQuery UI 모달을 사용하면 버튼 이벤트가 시작됩니다.

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

이 작업을 수행하려면 다음 줄이 핵심입니다!

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

대화 상자를 만든 후 다음 줄을 추가했습니다.

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

이것은 나에게 가장 명확한 해결책이었습니다.

var dlg2 = $('#dialog2').dialog({
        position: "center",
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });

dlg2.parent().appendTo('form:first');
$('#dialog_link2').click(function(){
    dlg2.dialog('open');

내부의 모든 내용을 dlg2데이터베이스에 삽입 할 수 있습니다. dialog변수를 자신의 변수와 일치 하도록 변경하는 것을 잊지 마십시오 .

ASP.NET을 사용하려면 UseSubmitBehavior="false"ASP.NET 버튼에서 사용 하십시오.

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

참조 : Button.UseSubmitBehavior 속성

가장 많은 표를 얻은 Robert MacLean의 솔루션은 99 % 정확합니다. 그러나 내가 한 것처럼 누군가가 필요할 수있는 유일한 추가 사항은이 jQuery 대화 상자를 열 때마다 부모에게 추가하는 것을 잊지 마십시오. 아래처럼 :

var dlg = $('#questionPopup').dialog( 'open'); dlg.parent().appendTo($("form:first"));

modal : true 옵션을 사용하는 동안이 행을 사용하여이 작업을 수행하십시오.

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

이 $('#dialog').parent().appendTo($("form:first"))솔루션은 IE 9에서 제대로 작동하지만 IE 8에서는 대화 상자가 나타나고 사라집니다. 경고를 표시하지 않으면 대화 상자가 나타나지 않는 것처럼 보이지 않습니다. 어느 날 아침 두 버전 모두에서 작동하는 솔루션을 찾고 버전 8과 9 모두에서 작동하는 유일한 솔루션은 다음과 같습니다.

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

이것이 같은 문제로 어려움을 겪고있는 다른 사람들에게 도움이되기를 바랍니다.

대화 상자를 올바른 방향으로 이동하십시오. 그러나 대화 상자를 여는 버튼에서만 수행해야합니다. 다음은 jQuery UI 샘플의 추가 코드입니다.

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

asp:button대화 상자 내부를 추가 하면 제대로 실행됩니다.

참고 : "사용자 만들기"버튼을 클릭 한 후 포스트 백을 방지하려면 <button>을 <input type = button>으로 변경해야합니다.

정확한 해결책은 다음과 같습니다.

$("#dialogDiv").dialog({ other options...,
    open: function (type, data) {
        $(this).parent().appendTo("form");
    }
});