서버 코드에서 모달 팝업 창 시작(C#)

2023-07-13

AJAX 컨트롤 도구 키트의 ModalPopup 컨트롤은 클라이언트 쪽 수단을 사용하여 모달 팝업을 만드는 간단한 방법을 제공합니다. 그러나 일부 시나리오에서는 모달 팝업의 열기가 서버 쪽에서 트리거되어야 합니다.

개요

AJAX 컨트롤 도구 키트의 ModalPopup 컨트롤은 클라이언트 쪽 수단을 사용하여 모달 팝업을 만드는 간단한 방법을 제공합니다. 그러나 일부 시나리오에서는 모달 팝업의 열기가 서버 쪽에서 트리거되어야 합니다.

단계

우선 ModalPopup 컨트롤의 작동 방식을 보여 주려면 ASP.NET 단추 웹 컨트롤이 필요합니다. 새 페이지의 양식> 요소 내에 <이러한 단추를 추가합니다.

<asp:Button ID="ClientButton" runat="server" Text="Launch Modal Popup (Client)" />

그런 다음 만들려는 팝업에 대한 태그가 필요합니다. 컨트롤로 <asp:Panel> 정의하고 단추 컨트롤이 포함되어 있는지 확인합니다. ModalPopup 컨트롤은 이러한 단추를 팝업을 닫을 수 있는 기능을 제공합니다. 그렇지 않으면 사라지게 하는 쉬운 방법이 없습니다.

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 <asp:Button ID="OKButton" runat="server" Text="Close" />
</asp:Panel>

그런 다음, ASP.NET AJAX 도구 키트의 ModalPopup 컨트롤을 페이지에 추가합니다. 컨트롤을 로드하는 단추, 컨트롤을 사라지게 하는 단추 및 실제 팝업의 ID에 대한 속성을 설정합니다.

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlId="ClientButton" 
 PopupControlID="ModalPanel" OkControlID="OKButton" />

ASP.NET AJAX 기반의 모든 웹 페이지와 마찬가지로 스크립트 관리자는 다른 대상 브라우저에 필요한 JavaScript 라이브러리를 로드하는 데 필요합니다.

<asp:ScriptManager ID="asm" runat="server" />

브라우저에서 예제를 실행합니다. 단추를 클릭하면 모달 팝업이 나타납니다. 서버 쪽 코드를 사용하여 동일한 효과를 얻으려면 새 단추가 필요합니다.

<asp:Button ID="ServerButton" runat="server" Text="Launch Modal Popup (Server)" 
 OnClick="ServerButton_Click" />

보듯이 단추를 클릭하면 포스트백이 생성되고 서버에서 메서드가 ServerButton_Click() 실행됩니다. 이 메서드에서는 라는 launchModal() JavaScript 함수가 정확하게 실행되고, 페이지가 로드되면 JavaScript 함수가 실행됩니다.

<script runat="server">
 protected void ServerButton_Click(object sender, EventArgs e)
 {
 ClientScript.RegisterStartupScript(this.GetType(), "key", "launchModal();", true);
 }
</script>

의 launchModal() 작업은 ModalPopup을 표시하는 것입니다. launchModal() 전체 HTML 페이지가 로드되면 함수가 실행됩니다. 그러나 현재 ASP.NET AJAX 프레임워크는 아직 완전히 로드되지 않았습니다. 따라서 함수는 launchModal() 나중에 ModalPopup 컨트롤을 표시해야 하는 변수만 설정합니다.

<script type="text/javascript">
 var launch = false;
 function launchModal() 
 {
 launch = true;
 }

pageLoad() JavaScript 함수는 ASP.NET AJAX가 완전히 로드되면 실행되는 특수 함수입니다. 따라서 ModalPopup 컨트롤을 표시하기 위해 이 함수에 코드를 추가하지만 이전에 호출된 경우에만 launchModal() 다음을 수행합니다.

function pageLoad() 
 {
 if (launch) 
 {
 $find("mpe").show();
 }
 }
</script>

함수는 $find() 페이지에서 명명된 요소를 찾고 있으며 서버 쪽 ID를 매개 변수로 예상합니다. 따라서 $find("mpe") 는 ModalPopup 컨트롤의 클라이언트 표현을 반환합니다. 메서드를 show() 사용하면 팝업이 나타날 수 있습니다.

단추 중 하나를 클릭하면 모달 팝업이 나타납니다(전체 크기 이미지를 보려면 클릭).

다음을 통해 공유

서버 코드에서 모달 팝업 창 시작(C#)

개요

단계

피드백

추가 리소스