ViewState

<form> </form> นั้นสามารถมี input field ได้หลายแบบ อย่างที่เราเห็นมาแล้ว เช่น Textbox หรือ Button เป็นต้น และ Form field เหล่านั้น เป็น visible filed หรือ field ที่จะถูกมองเห็นได้ที่เบราเซอร์และ มี ผู้ใช้สามารถมี interaction ด้วย นอกจากนั้นแล้ว Form ยังมี field อีกประเภท ที่เราเรียกว่า เป็น hidden field ปกติเราจะใช้ field ชนิดนี้ เวลาที่เราอยากจะส่งข้อมูลอะไรซักอย่างกลับไปที่ server โดยไม่ต้องการให้ผู้ใช้รู

ใน ASP.NET นั้นมี hidden Form field ตัวหนึ่งที่น่าสนใจ ชื่อว่า ViewState เจ้า field ตัวนี้มีหน้าที่ที่จะเก็บข้อมูลที่ผู้ใช้ได้เคยกรอกไว้แล้วได้ ฟังดูง่ายๆ แต่เจ้า field ตัวนี้จะช่วยเราได้หลายอย่าง เช่น เมื่อเรากรอกข้อมูลในฟอร์ม แล้วกด Submit ส่งข้อมูลไปที่ server แล้ว ที่ server มีการ process ข้อมูลและต้องการส่งกลับมาที่เบราเซอร์ สมมุติว่า ข้อมูลที่ server ส่งกลับมาต้องถูกแสดงในฟอร์มที่เรากรอกไปครั้งแรก สิ่งที่เกิดขึ้นก็คือ ข้อมูลเก่าที่เรากรอกไว้จะถูก Reset ถ้าเราต้องให้ข้อมูลเหล่านั้นคงอยู่ก็อาจต้องใช้ตัวแปรเก็บไว้ เป็น hidden field แล้วแอบส่งกลับมาที่เบราเซอร์ใหม่ จะเห็นว่ามีความยุ่งยากพอสมควร แต่ถ้าเราใช้ ViewState แล้ว หลังจากมีการ กด submit แล้ว และรายการที่เราเคยเลือกไว้ใน list ต่างๆ ก็ไม่ถูก reset ไป และก็อย่าลืมว่า ViewState เป็น hidden field เพราะฉะนั้นผู้ใช้จะไม่เห็น field นี้เวลา browse หน้า web ของเรา

ทีนี้มาดูว่า ถ้าต้องการใช้ ViewState เราจะต้องทำอะไรบ้าง เราจะใช้ตัวอย่างเดิมจากครั้งที่แล้ว

postback.aspx

<%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%>
<%@ Page Language="C#"%>
<HTML>
<HEAD>
<title>Form</title>
</HEAD>

<script runat="server">
	void Page_Load(Sender as object, E as EventArgs){
		if (!Page.IsPostBack) {
			lblName.Text = "Parichat";
		} else {
			lblName.Text = txtName.Text;
		}
	}
</script>

<body>
<form id="frmMyFirstForm" method="post" action="myForm.aspx" runat="server">
<asp:TextBox id="txtName" style="LEFT: 215px; POSITION: absolute; TOP:100px" runat="server" Width="279px" Height="27px"></asp:TextBox>
<asp:Label id="lblName" style="LEFT: 215px; POSITION: absolute; TOP: 140px" runat="server" Width="270px" Height="27px">test</asp:Label>
<asp:Button id="btnOK" style="LEFT: 215px; POSITION: absolute; TOP: 170px" runat="server" Width="270px" Height="27px" Text="OK"></asp:Button>
</form>
</body>
</HTML>

ให้นำไฟล์นี้ไปเก็บไว้ที่ web server ซึ่งก็คือ drive:\inetpub\wwwroot เมื่อเสร็จแล้ว สามารถทดลองรันดูได้ ที่ browser โดยการเรียกไฟล์ http://servername/postback.aspx อย่าลืมว่าการเรียกไฟล์ .asp หรือ .aspx จะต้องเรียกผ่าน HTTP เท่านั้น คุณไม่สามารถใช้ File/Open จาก browser ได้
 

เมื่อผู้ใช้เรียก .aspx ผ่าน Browser สิ่งที่จะได้รับทางฝั่ง Client ก็คือ โค้ดข้างล่างนี้ คุณสามารถดูโค้ดนี้ได้ โดยที่ เว็บเบราเซอร์ ไปที่ View / Source (I.E. 6.0)

<%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%> <HTML>
<HEAD>
<title>Form Page.Ispostback</title>
</HEAD>
<body>
<form name="frmMyFirstForm" method="post" action="postback.aspx" id="frmMyFirstForm">
<input type="hidden" name="__VIEWSTATE" value="dDwtNTg3NDM1NTc0O3Q8O2w8aTwyPjs+O2w8dDw7bDxpPDM+Oz47bDx0PHA8cDxsPFRleHQ7PjtsPFBhcmljaGF0IFN1bnRhcmFyYWs7Pj47Pjs7Pjs+Pjs+Pjs+" />

<input name="txtName" type="text" value="P S" id="txtName" style="height:27px;width:279px;LEFT: 215px; POSITION: absolute; TOP:100px" />
<span id="lblName" style="height:27px;width:270px;LEFT: 215px; POSITION: absolute; TOP: 140px">P S</span>
<input type="submit" name="btnOK" value="OK" id="btnOK" style="height:27px;width:270px;LEFT: 215px; POSITION: absolute; TOP: 170px" />

</form>
</body>
</HTML>

จะเห็นว่า เมื่อเรา submit ข้อมูลในฟอร์มไปที่ server แล้ว ข้อมูลเก่าที่เรากรอกไว้ก็ไม่ได้หายไป และ การใช้ ViewState นั้นเราไม่ต้องเขียนโค้ดเพิ่มเลย และ ข้อมูลที่อยู่ใน value ของ ViewSate นั้นจะเป็น format ที่เราเบราเซอร์ที่จะแปลงเป็นข้อความ ออกมา ส่วนเรานั้นไม่จำเป็นต้องเข้าใจ