UpdatePanel을 사용하는 ASP.NET 부트 스트랩 모달 - 가능한 해결 방법은 무엇입니까?

Question

나는 전문가가 아니므로 내가 틀렸다면 나를 바로 잡으십시오. 트위터 부트 스트랩 모달 대화 상자가 ASP.NET에서 UpdatePanels와 함께 사용되면 작동하지 않는다고 생각합니다. 적어도, 나는 Bootstrap 모달 대화 상자를 사용하여 간단하게 확인 할 수 없었고, 불가능하다고 말하는 게시물을 많이 읽었습니다.

위가 올바른지 가정하고, 그렇지 않은 경우, 나는 답을 알고 싶네요 ... 어떻게 든 UpdatePanel을 사용하지 않도록 설정하여이 문제를 해결하는 방법이있을 수 있습니다 경우

이 궁금 해서요 - 컨트롤을 비활성화하지 않고 UpdatePanel이 UpdatePanel처럼 작동하지 않게하십시오.

사용자가 UpdatePanel에서 버튼을 클릭하면 UpdatePanel을 비활성화하고 모달 대화 상자를 팝업하는 클라이언트 측 자바 스크립트가 호출됩니다. 사용자가 모달 대화 상자에서 "확인"을 클릭하면 클라이언트 쪽 javascript가 UpdatePanel을 다시 활성화하고 서버에 대한 호출을 수행합니다.

누구나 가능하다고 생각합니까? 자바 스크립트와 클라이언트 측 프로그래밍에 대해 충분히 알지 못한다. 나는 "내가 충분히 알지 못한다"는 말조차도 내가하는 말보다 더 많이 안다는 소리를 낸다.

그래서 나는 이것을 (어리석은) 아이디어로 게시하고 누구나 작동하도록 만드는 방법을 생각해 낼 수 있을지 생각했습니다.

감사합니다.

추신 : 내가 일하고있는 앱의 경우, 내가 UpdatePanel을 사용하는 유일한 이유는 서버가 응답하는 데 너무 오래 걸리면 "기다려주십시오"라는 메시지가 나타날 수 있기 때문입니다. 누군가 내가 UpdatePanel없이 필요로하는 것을 할 수있는 ASP.NET Web Forms 솔루션을 가르쳐 줄 수 있다면, 나는 그것을보고 싶을 것이다. 그리고 자바 스크립트에 관해서 얼마나 어리석은 지 기억해주십시오. :)

Answer 1

내 최근 프로젝트 중 하나에 사용자가있어 업데이트 패널에서 부트 스트랩 모달 대화 상자를 사용할 수 있습니다. 페이지의 헤더에 부트 스트랩의 스타일 및 CSS 파일을 포함 시키십시오.

<link href="assets/css/bootstrap.css" rel="stylesheet"> 
<script src="assets/js/bootstrap-transition.js" type="text/javascript"></script> 
<script src="assets/js/bootstrap-modal.js" type="text/javascript"></script> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <ContentTemplate> 
     <div id="dvSearch" class="modal hide fade" tabindex="-1" 
      role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
        ×</button> 
       <h3 id="H3"> 
        Contact Search <span id="HeadNextaction"></span> 
       </h3> 
      </div> 
      <div> 
       <div class="row-fluid"> 
        <div class="span3"> 
         First Name 
        </div> 
        <div class="span8"> 
         <input type="text" autocomplete="off" runat="server" id="txtsearchfirstname" placeholder="Start typing.." 
          class="typeahead" /> 
        </div> 
       </div> 
       <div class="row-fluid"> 
        <div class="span3"> 
         Last Name 
        </div> 
        <div class="span8"> 
         <input type="text" runat="server" id="txtsearchlastname" placeholder="Start typing.." 
          class="typeahead" /> 
        </div> 
       </div> 
       <div class="row-fluid"> 
        <div class="span3"> 
         Email 
        </div> 
        <div class="span3"> 
         <input type="text" runat="server" id="txtsearchemail" placeholder="Start typing.." 
          class="typeahead" /> 
        </div> 
       </div> 
       <div class="row-fluid"> 
        <div class="span3"> 
         Phone 
        </div> 
        <div class="span3"> 
         <input type="text" runat="server" id="txtsearchphone" placeholder="Start typing.." 
          class="typeahead" /> 
        </div> 
       </div> 
      </div> 
      <div> 
      </div> 
      <div class="modal-footer"> 
       <asp:HiddenField ID="hditemselected" runat="server" /> 
       <asp:Button ID="btnSearchSubmit" OnClientClick="..some client side javascript" OnClick="...server call" 
        class="btn" runat="server" Text="Submit" /> 
        Search</a> 
       <button class="btn" data-dismiss="modal" aria-hidden="true"> 
        Close</button> 
      </div> 
     </div> 
//This is how you will call your modal dialog 
<img alt="search" src="images/search.png" data-toggle="modal" data-target="#dvSearch"/> 
</ContentTemplate> 
</asp:UpdatePanel>