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">
Sub ServerButton_Click(ByVal sender As Object, ByVal e As EventArgs)
ClientScript.RegisterStartupScript(Me.GetType(), "key", "launchModal();", True)
End Sub
</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() 사용하면 팝업이 나타날 수 있습니다.
단추 중 하나를 클릭하면 모달 팝업이 나타납니다(전체 크기 이미지를 보려면 클릭).
