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

'.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 웹폼 페이지가 자동 생성하는 HTML 코드 보기  (0) 2010.07.05

ASP.NET 웹폼 페이지가 자동 생성하는 HTML 코드 보기

Posted in .NET Framework // Posted at 2010. 7. 5. 14:30
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

티스토리툴바