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 ?  (6) 2010.08.03
ASP.NET MVC가 모바일 웹에 적합한 이유 몇가지  (4) 2010.07.23
ASP.NET MVC 구성도  (4) 2010.07.23
ASP.NET MVC 프레임워크  (0) 2010.07.05
ASP.NET 웹폼 결과페이지 검증해 보기  (0) 2010.07.05

티스토리툴바