Taeyo.NET - ASP.NET 2.0
|
|
강좌 최초 작성일 : 2007년 04월 10일|
강좌 전 태오의 잡담> 이번 강좌는 태오 사이트의 멤버이자, Microsoft MVP인 노 형래님이 제공하는 ASP.NET 2.0관련 Tip 입니다. 알아두면 상당히 유용한 내용이니 많은 관심 부탁드려 보아염 이번에 말씀 드리고자 하는 내용은 ASP.NET 2.0에서 ReadOnly 속성이 true로 설정된 Textbox 서버컨트롤 내에 값을 Client Script에서 해당 Textbox 서버컨트롤의 값을 변경(또는 설정)하고 PostBack이 발생한 경우에 그 변경된 값을 Codebehind에서 가져오는 방법에 대해 말씀 드리고자 합니다. 이미 ASP/ASP.NET 1.x 에서 위와 같은 경우의 대표적인 예라 말씀드릴 수 있는 회원가입(또는 회원정보 수정)시, 주소입력 부분을 잘 개발하였다 또는 하고 있다라고 말씀하시는 분도 계시리라 생각합니다.
그러나 ASP.NET 2.0에서는 ReadOnly 속성이 true로 설정된 서버컨트롤의 값을 Client Script를 통해 조작하여 Codebehind에서 그 조작된 값을 가져오려 한다면 아래 이미지와 같이 ASP.NET 1.x 에서 개발된 결과는 나타나지 않습니다. 먼저 이미지를 확인하시기 이전에 이 녀석부터 읽고 가셨으면 합니다.
.NET Framework 클래스 라이브러리 내에 TextBox.ReadOnly 속성에 대한 내용 중 일부입니다.
다시 게시가 발생하면 ReadOnly 속성이 true로 설정된 TextBox 컨트롤의 Text 값이 서버에 보내지지만 서버에서는 읽기 전용 텍스트 상자에 대한 처리를 수행하지 않습니다. 따라서 악의적인 사용자가 읽기 전용인 Text 값을 변경할 수 없습니다. 서버측 코드에서 수정되지 않은 경우 Text 속성 값은 뷰 상태에 유지됩니다.
[ASP.NET 1.x] ReadOnly=true로 설정된 TextBox
해당 페이지에 최초 접근한 화면입니다.
"값 설정"이라는 버튼을 클릭하여, ClientScript로 TextBox에 "ClientScript로 값설정"이라는 문자열을 입력하였습니다.
"PostBack 발생"이라는 버튼을 클릭하여 PostBack을 발생시킨 후, Lable 컨트롤에 TextBox 컨트롤의 값을 출력하였습니다.
Sample1x.aspx의 HTML 소스 입니다.
<form id="Form1" method="post" runat="server">
<h3>ASP.NET 1.x ReadOnly TextBox 테스트</h3> <asp:TextBox id="txtReadOnly" runat="server" ReadOnly="true" BackColor="Silver"></asp:TextBox> <input type="button" value="값 설정" onclick="document.getElementById('<%= txtReadOnly.ClientID %>').value= 'ClientScript로 값설정';"> <asp:Button id="btnSubmit" runat="server" Text="PostBack 발생"></asp:Button> <br /> <br /> <asp:Label id="lblResult" runat="server">ReadOnly TextBox 값 : </asp:Label> </form> Sample1x.aspx의 Codebehind 파일인 Sample1x.aspx.cs 입니다.
private void btnSubmit_Click(object sender, System.EventArgs s)
{ this.lblResult += this.txtReadOnly.Text; } [ASP.NET 2.0] ReadOnly=true로 설정된 TextBox
ASP.NET 1.x에서 개발한 웹페이지와 동일한 수순으로 테스트를 진행하였습니다.
"값 설정"이라는 버튼을 클릭, 보시는 것과 같이 ASP.NET 1.x와는 다르게 ClientScript 상에서 설정한 문자열이 TextBox.Text를 통해 가져오지 못하고 있습니다.
Sample20.aspx의 HTML 소스 입니다.
<form id="form1" runat="server">
<div> <h3>ASP.NET 2.0 ReadOnly TextBox 테스트</h3> <asp:TextBox id="txtReadOnly" runat="server" ReadOnly="true" BackColor="Silver"></asp:TextBox> <input type="button" value="값 설정" onclick="document.getElementById('<%= txtReadOnly.ClientID %>').value= 'ClientScript로 값설정';"> <asp:Button id="btnSubmit" runat="server" Text="PostBack 발생" OnClick="btnSubmit_Click"></asp:Button> <br /> <br /> <asp:Label id="lblResult" runat="server">ReadOnly TextBox 값 : </asp:Label> </div> </form> Sample20.aspx의 Codebehind 파일인 Sample20.aspx.cs 입니다.
private void btnSubmit_Click(object sender, System.EventArgs s)
{ // ASP.NET 1.x에서 사용하던 방법 this.lblResult += this.txtReadOnly.Text; } 위에서 보신 것과 같이 ASP.NET 2.0의 ReadOnly로 설정된 TextBox에 Client Script를 이용하여 값을 설정한 경우 기존 ASP.NET 1.x와는 다르게 PostBack 발생 후, TextBox에 Client Script에서 설정한 값이 기본적으로 바인딩 및 TextBox.Text 속성을 통해 Client Script에서 설정던 값을 가져오지 못하도록 되어 있습니다. 그럼, 실제 ASP.NET 2.0에서 ReadOnly=true로 설정된 TextBox의 값을 가져오는 방법에 대해 말씀드리겠습니다.
// ASP.NET 2.0의 처리방법 #1
1. *.aspx (Html 소스) 내에서 ReadOnly 속성 자체를 제거
- <asp:TextBox id="txtReadOnly" runat="server" BackColor="Silver"></asp:TextBox>
2. *.aspx.cs (Codebehind) 내에 Page_Load 이벤트 등에서 TextBox의 Attribute에 ReadOnly를 추가 - this.txtReadOnly.Attributes.Add("ReadOnly", "ReadOnly"); 3. *.aspx.cs (Codebehind) 내에서 ASP.NET 1.x에서 작성한 방법과 동일하게 작성 - this.lblResult += this.txtReadOnly.Text; TextBox 컨트롤의 ReadOnly 속성을 이용하지 않고, Attributes 속성에 "ReadOnly"를 추가하여 웹 브라우저를 통해 해당 웹 페이지가 사용자의 PC로 렌더링되는 시점에 TextBox가 ReadOnly인 것과 같이 보이도록만 내려 보냅니다.
// ASP.NET 2.0의 처리방법 #2
1. *.aspx (Html 소스) 내에서 ReadOnly 속성 부여 - <asp:TextBox id="txtReadOnly" runat="server" ReadOnly="true" BackColor="Silver"></asp:TextBox> 2. *.aspx.cs (Codebehind) 내에서 아래 코드와 같이 작성) - this.txtReadOnly.Text = Request[this.txtReadOnly.UniqueID]; - this.lblResult.Text += this.txtReadOnly.Text; Request 개체에 Key이름인 txtReadOnly를 대입하여 기존 ASP에서 Request로 입력값을 받아 처리하던 형태인 Request["txtReadOnly"] 형태로 해당 컨트롤의 값을 가져온 것입니다. 또한, ReadOnly=true로 설정된 경우에 Client Script를 통해 설정한 값이 기본적으로 바인딩 시켜주지 않기에 해당 TextBox에 Request 개체를 이용해 바인딩을 하였습니다. 아래의 이미지는 두 가지 처리방법의 결과 화면들입니다. 최초에 보여드렸던 소스에 각 처리방법을 적용하였고, ReadOnly 속성값을 출력해 보았습니다.
마지막으로, 이번 팁이 기술적으로 그리 난이도가 높거나 한 것은 아닙니다. 그저 가끔씩 접근 방법의 전환이 문제 해결에 도움이 될 수도 있다라는 부분을 말씀 드려보고 싶었습니다. 그럼, 웃는 하루 되십시오. ^^
* 참고자료 - TextBox.ReadOnly 속성- The validation of a TextBox control may fail when you use a client-side script to update the value of the TextBox control in an ASP.NET 2.0 Web application
|
