ASP.NET 웹폼 결과페이지 검증해 보기

Posted in .NET Framework // Posted at 2010. 7. 5. 16:03
728x90

앞서 테스트를 통해 ASP.NET 서버컨트롤, 이벤트, 바인딩 등으로 자동 생성되는 HTML 태그가 표준 웹구현상 그리 큰 문제가 되지 않겠다는 1차 결론을 내렸다

관련 글: http://mobilepp.tistory.com/entry/ASPNET-페이지가-자동-생성하는-HTML-코드-보기

그렇다면 ASP.NET 결과페이지가 HTML5 문서로써 적합한가를 검증해 보도록 하자

http://html5.validator.nu 라는 사이트는 HTML5 문서를 검증해 주는 서비스를 제공한다
웹 페이지 URL 이나 소스 업로드 혹은 직접 코딩 등을 통해 HTML5 문서 검증을 수행해 준다

앞서 테스트에서 사용된(GirdView 바인딩 예제)의 결과 HTML 을 검증해 보았다
(아래 HTML 코드가 검증 대상 코드이다)

  버턴이 클릭되었습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJODYwMDYwOTEzD2QWAgIDD2QWAgIBDzwrAA0CAA8WBh4KRGF0YU1lbWJlcgUG
TXlEYXRhHgtfIURhdGFCb3VuZGceC18hSXRlbUNvdW50AgJkDBQrAAIWCB4ETmFtZQUCSUQeCklzU
mVhZE9ubHloHgRUeXBlGSsCHglEYXRhRmllbGQFAklEFggfAwUETkFNRR8EaB8FGSsCHwYFBE5BT
UUWAmYPZBYGAgEPZBYEZg8PFgIeBFRleHQFBG1rZXhkZAIBDw8WAh8HBQnrsJXsooXrqoVkZAICD
2QWBGYPDxYCHwcFBm9oa2ViaWRkAgEPDxYCHwcFCe2Zjeq4uOuPmWRkAgMPDxYCHgdWaXNpY
mxlaGRkGAEFCUdyaWRWaWV3MQ88KwAKAQgCAWRbTV4HUbfUSvuNAZAYC3eOUrHV6A==" />
</div>

<div>

 <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKb0uO9CgLs0bLrBgKM54rGBgPmVLMaYbGQ70XAJcWmf4x4h8E+" />
</div>
    <div>
        <div>
 <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
  <tr>
   <th scope="col">ID</th><th scope="col">NAME</th>
  </tr><tr>
   <td>eqee</td><td>하하하</td>
  </tr><tr>
   <td>eeafe</td><td>홍길동</td>
  </tr>
 </table>
</div>
        Hello, World!
        <br />
        <input name="TextBox1" type="text" value="ㅇㅇㅇ" id="TextBox1" />
        <br />
        <input type="submit" name="Button1" value="Button" id="Button1" />
    </div>
    </form>
</body>
</html>


일단 검증전에, 눈에 딱 거슬리는 몇 가지.. 있긴 하다
HTML5의 공식 도뮤먼트타입인 <!DOCTYPE html> 에 위배되는 모습이다. 일단 검증을 돌려보자

아래 그림은 결과화면의 일부를 캡쳐 받은 것이다
역시 HTML5 처음에 DockType이 제일 처음 위치해야 한다는 내용과 틀린 DockType이라는 에러가 보고된다. 그리고 이로 인해 head 와 title 등과 같은 정상 태그들도 그 위치가 애매하다고 한다

 

그렇다면 문서의 상단에 DockType 부분을 수정하고 다시 검증해 보자

 <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
.....  이하 동일...


예상했던대로 이전에 많던 오류보고가 대부분 사라졌다
다만 GirdView 가 변환된 table 태그에 cellspacing, rules, border 속성들이 obsolete,
즉 구식속성이라 보고된다. 보고서에서는 이 속성들 대신에 CSS를 사용하라고 권장(?)도 해 준다


HTML5가 하위호환성을 가지고 있기 때문에 이와같은 표현(display)과 관련된 속성 오류는
동작에는 직접적인 연관이 없겠지만 CSS 연동 및 스크립트 연동에는 제약이 예상된다

아래 글은 아는 후배의 블로그에서 공감가는 부분을 발췌한 것이다

* 제약이 많은 HTML 기반의 컨트롤
서버 컨트롤은 자신을 HTML로 렌더링 하기는 하지만 대체로 웹 표준을 만족 하지 못하거나 CSS를 적용 하기 어려운 구조이다. 또한 서버 컨트롤이 생성한 클라이언트 ID 값은 예측 하기 어렵고 복잡하여 JavaScript로 접근 하기 매우 어렵다
[출처] ASP.NET MVC 도입 해야 할까?|작성자 쭌스

다만 아직 결론을 내리기는 힘들고, ASP.NET 의 MVC 패턴 프레임워크를 추가로 살펴보기로 하자

728x90
일전에 HTML5 기반 웹 개발시 서버측 기술에 대해 고민을 했었다
관련 글: http://mobilepp.tistory.com/entry/HTML5-서버측-기술은

그렇다면 ASP.NET 이 자동생성하는 각종 HTML 태그가 어떤 것인지, 그리고 이러한 코드가 HTML5 와 연동시 어떤 해악(?)을 끼치는지 알기 위해 우선 ASP.NET 페이지가 자동생성하는 HTML 코드들을 살펴 보기로 했다

1. 우선 Visual Studio 에서 ASP.NET 웹 사이트 하나 생성하고 아무런 추가 없이 랜더링 해 봤다

- VS에서 자동 생성한 ASP.NET 페이지의 HTML 코드

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Hello, World!
    </div>
    </form>
</body>
</html>


- 브라우저에서 랜더링된 HTML 코드
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
 
</title></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZBzInEDcqzrCotILM3qJEQA/uDC7" />
</div>
 
    <div>
        Hello, World!
    </div>
    </form>
</body>
</html>

ASP.NET 서버컨트롤이나 서버이벤트, 자동 바인딩 등 .NET 의 고유기술을 사용하지 않은 결과 HTML은 일반적인 태그들 밖에 없어 일단 안심이다.
ASP.NET 의 웹 폼 상태관리를 위한 뷰스테이트(VIEWSTATE)가 보이기는 하지만 어차피 HTML의 숨겨진(hidden) 입력 필드(input)로 처리되기 때문에 웹 표준을 저해한다고 할 수 없을 것 같다


2. 이제 ASP.NET 서버컨트롤을 올려보고 이벤트를 등록할 경우, HTML 은 어떻게 될지 살펴 보자

- VS에서 서버컨트롤(버턴) 올리고 텍스트박스 올리고 버턴 이벤트 처리를 하였다

 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Hello, World!
        <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
    </div>
    </form>
</body>
</html>


-  브라우저에서 랜더링된 HTML 코드

 버턴이 클릭되었습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE0MDM4MzYxMjNkZIMmPgJwwUV+KaFSWNbGv5Govr1k" />
</div>

<div>

 <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLc0ImlCgLs0bLrBgKM54rGBh+lsCmZJPKGcsDW8qAdtWslAPVy" />
</div>
    <div>
        Hello, World!
        <br />
        <input name="TextBox1" type="text" id="TextBox1" />
        <br />
        <input type="submit" name="Button1" value="Button" id="Button1" />
    </div>
    </form>
</body>
</html>


서버컨트롤의 이벤트를 등록하니 __EVENTVALIDATION 이라는 히든요소가 추가되었다
그러나 이 역시 기본 웹 폼 요소이기에 상관없을 듯 하다
참고로 웹 폼 상태유지도 무난히 통과~

3. 이제 GridView 컨트롤에 데이타소스를 바인딩 시켜보자

- VS에서 GridView 추가하고 코드비하인트에서 데이타소스를 바인딩 시켰다

 - 나머지 다 동일. 페이지에 GridView 컨트롤 추가
<asp:GridView ID="GridView1" runat="server"></asp:GridView>

- 코드비하인드에서 바인딩 하기
protected void Button1_Click(object sender, EventArgs e){
        Response.Write("버턴이 클릭되었습니다");

        DataTable dt = new DataTable("MyData");
        dt.Columns.Add("ID");
        dt.Columns.Add("NAME");

        dt.Rows.Add("mkex", "박종명");
        dt.Rows.Add("ohkebi", "홍길동");

        this.GridView1.DataSource = dt;
        this.GridView1.DataMember = "MyData";

        this.GridView1.DataBind();        
 }


- 브라우저에서 랜더링된 HTML 코드

 버턴이 클릭되었습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJODYwMDYwOTEzD2QWAgIDD2QWAgIBDzwrAA0CAA8WBh4KRGF0YU1lbWJlcgUG
TXlEYXRhHgtfIURhdGFCb3VuZGceC18hSXRlbUNvdW50AgJkDBQrAAIWCB4ETmFtZQUCSUQeCklzU
mVhZE9ubHloHgRUeXBlGSsCHglEYXRhRmllbGQFAklEFggfAwUETkFNRR8EaB8FGSsCHwYFBE5BT
UUWAmYPZBYGAgEPZBYEZg8PFgIeBFRleHQFBG1rZXhkZAIBDw8WAh8HBQnrsJXsooXrqoVkZAICD
2QWBGYPDxYCHwcFBm9oa2ViaWRkAgEPDxYCHwcFCe2Zjeq4uOuPmWRkAgMPDxYCHgdWaXNpY
mxlaGRkGAEFCUdyaWRWaWV3MQ88KwAKAQgCAWRbTV4HUbfUSvuNAZAYC3eOUrHV6A==" />
</div>

<div>

 <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKb0uO9CgLs0bLrBgKM54rGBgPmVLMaYbGQ70XAJcWmf4x4h8E+" />
</div>
    <div>
        <div>
 <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
  <tr>
   <th scope="col">ID</th><th scope="col">NAME</th>
  </tr><tr>
   <td>mkex</td><td>박종명</td>
  </tr><tr>
   <td>ohkebi</td><td>홍길동</td>
  </tr>
 </table>

</div>
        Hello, World!
        <br />
        <input name="TextBox1" type="text" value="ㅇㅇㅇ" id="TextBox1" />
        <br />
        <input type="submit" name="Button1" value="Button" id="Button1" />
    </div>
    </form>
</body>
</html>


뷰스테이트 양이 꽤 늘어난 것과 GridView 컨트롤이 자동으로 table 태그로 변환된 것을 알 수 있다
역시 표준 HTML 코드에는 상관이 없을 듯 하다

음.. 그렇다면 ASP.NET 이 자동생성하는 코드는...
상태유지를 위한 뷰스테이스는 히든필드로 생성되고
이벤트처리를 위해 EVENTVAL.. 역시 히든필드가 생성되고
목록컨틀롤인 GridView 에 바인딩한 것은 table 태그로 변환되는 것을 알 수 있었다

나의 생각이 기우였던가??? 무지였던가 ㅎㅎ;

일단 이 테스트로는 ASP.NET 과 HTML5 연동에는 무리가 없어 보인다

'.NET Framework' 카테고리의 다른 글

벌써 ASP.NET MVC 3 ?  (0) 2010.08.03
ASP.NET MVC가 모바일 웹에 적합한 이유 몇가지  (0) 2010.07.23
ASP.NET MVC 구성도  (0) 2010.07.23
ASP.NET MVC 프레임워크  (0) 2010.07.05
ASP.NET 웹폼 결과페이지 검증해 보기  (0) 2010.07.05