출처 : http://www.mari.kr/11
제목을 어떻게 정해야 될까 상당히 고민이 되는군요...
AJAX.NET이 등장하면서 AJAX의 다양한 기능을 손쉽게 사용할 수 있습니다.
AJAX.NET에는Server Script뿐 아니라 Client Script도 제공이 되어 다양한 클래스를 이용할 수도 있으며AjaxControlToolkit은
AJAX기능이 내포된 컨트롤들도 포함하고 있습니다.
UpdatePanel에 서버컨트롤을 올려 놓기만 하면 모두 비동기식으로 동작하게 되는데요. 그냥 쉽게 웹페이지의 모든 컨트롤을
UpdatePanel에 올려 놓게 되면 화면이 깜빡이지 않는다는 점 외에 기존의 동기식 방식과 별차이가 없어 보입니다.
고로 필요한 부분을 적절하게 파악해서 그 필요한 부분만 UpdatePanel에 올려 놓는 것이 좋다고 생각이 드네요...
하지만 이런 경우가 있을 수도 있지요. UpdatePanel 밖의 컨트롤에도 어떠한 데이터를 전달해줘야 한다.
즉, UpdatePanel이 업데이트 되면서 어떠한 값을 일반HTML태그에 전달해주는 것이죠.
이런 기능을 도와주는 메소드가 있는데요.ScriptManager클래스의 RegiserDataItem메서드입니다.
추가 코멘트(2007-04-18)
ScriptManager클래스의 정적 메서드로 RegisterClientScriptBlock도 있습니다. 이 메서드는 정적 메서드이기 때문에
ScriptManager컨트롤의 ID나 현재 페이지의 ScriptManager를 얻어 올 수 있는 ScriptManager.GerCurrent메서드로는 접근이 안됩니다.
이 메서드와 Page클래스의ClientScript.RegisterStartupScript메서드를 이용한다면 쉽게 기능을 구현할 수가 있습니다.
그럼 예제를 보여드리겠습니다. AJAX Enabled 프로젝트를 하나 생성하고
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="DataItemTest._Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Untitled Page</title>
<scripttype="text/javascript">
functiongetServerDate(argument)
{
document.getElementById("Text1").value = argument;
}
</script>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<div>
<asp:UpdatePanelID="UpdatePanel1"runat="server"RenderMode="Inline"UpdateMode="Conditional">
<ContentTemplate>
UpdatePanel안의 텍스트박스(서버컨트롤)
<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTriggerControlID="Button1"EventName="Click"/>
</Triggers>
</asp:UpdatePanel>
</div><br/>
<asp:ButtonID="Button1"runat="server"OnClick="Button1_Click"Text="클릭"/>
<br/>
UpdatePanel밖의 텍스트박스(일반컨트롤)
<inputid="Text1"type="text"/>
</form>
</body>
</html>
위와 같이 aspx페이지를 구성합니다. 버튼컨트롤은 UpdatePanel밖에 위치하지만 UpdatePanel의Triggers에 의해 비동기 호출이 가능합니다.
그리고 그 아래는 일반 HTML컨트롤이 존재하며 자바스크립트 함수는 서버로부터 넘겨받은 값을 컨트롤에 넣어주게 됩니다.
일단 저 자바스크립트 함수를 버튼이 클릭해서 서버측의 Button_Click이벤트가 일어난 후 작동되게 해야겠지요?
그러기 위해서 Page_Load이벤트에 다음과 같은 구문을 넣어줍니다.
protectedvoidPage_Load(objectsender,EventArgse)
{
this.ClientScript.RegisterStartupScript(this.GetType(),"PageLoadedEvent","<script type=\"text/javascript\">Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(DefaultPageLoaded);function DefaultPageLoaded(sender, args){var item = args.get_dataItems();getServerDate(item['literal1']);}</script>");
}
add_pageLoading메서드로 이벤트 등록을 해주고 이벤트를 받을 자바스크립트 메서드를 정의해줍니다.
DefaultPageLoaded메서드에서 두번째 인자로 받는 것이 서버에서 넣어준 데이터를 담고 있는 객체가 됩니다.
그 인자의 get_dataItems 메서드를 호출하여 서버에서 넣어준 데이터를 받아오게 되고 이 데이터를 다시 aspx에서 정의한
자바스크립트 메서드에 넘겨주는 것 입니다.
이 동작은 AjaxControlToolkit의 Commit메서드와 비슷한 역할을 합니다. AjaxControlToolkit의 각각의 Extender의 속성을 보게 되면
CommitScript라는 속성이 있는데요. 이 속성의 값에 들어있는 자바스크립트 메서드나 스크립트 구문이 위의 getServerDate(item['literal1'])
정도가 된다고 생각하시면 될듯 하네요. 저도 정확하게 Commit메서드와 CommitScript를 역추적하여 확인하려 했지만 시간관계상 패쑤해써요.
아무튼 이제 Button1_Click이벤트에서 서버컨트롤인 TextBox에 값을 넣어주고 그 값을 RegisterDataItem에 넣어줘야겠네요.
protectedvoidButton1_Click(objectsender,EventArgse)
{
TextBox1.Text =DateTime.Now.ToString();
Literalliteral1 =newLiteral();
literal1.ID ="literal1";
ScriptManager.GetCurrent(this.Page).RegisterDataItem(literal1,DateTime.Now.ToString());
}
Literal컨트롤은 RegisterDataItem의 첫번째 인자인 컨트롤이 됩니다. 이렇게 구성하면 끝입니다.
추가 코멘트에서 말씀드린 것 처럼 RegisterClientScriptBlock메서드는 아래처럼 가능 합니다. 솔직히 이게 더 간단명료하군요.
ScriptManager.RegisterClientScriptBlock(this.Page,this.GetType(),"keyValue","alert('test');",true);
마지막 인자의 bool값은 scripte태그를 붙일건지 아닌지를 결정합니다. true로 할 경우 <script>를 사용하면 에러를 발생합니다.
약간 어려운듯 하지만 손쉽게 가능하지 않습니까??
이런 기능이 뭐가 필요하겠냐고 반문하실 수도 있지만 언젠가는 필요하게 될겁니다. ㅋ 저도 필요로해서 찾아봤고 사용중입니다.
이 보다 더 나은 방법이나 간단한 방법이 있을 수도 있지만 제가 저 기능을 생각하게 해준 것이 AjaxControlToolkit의 Commit메서드여서
그 메서드에 대해서 알아보다 보니 RegisterDataItem을 알게 된 것 입니다.
그럼 마지막으로 위의 페이지를 실행한 화면을 끝으로 마칩니다. 간단하지만 유용하게 사용될 수 있는 팁이 되기를 바랍니다.
