[C#] 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!

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