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 패턴 프레임워크를 추가로 살펴보기로 하자