ASP.Net学习笔记012--12ViewState初探

原创

wx5eb8fc190868a 2022-03-30 10:28:21 ©著作权

文章标签 html 自增服务器 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者wx5eb8fc190868a的原创作品，请联系作者获取转载授权，否则将追究法律责任

//注意,不是服务器读取网页,而是浏览器收集在表单中填写的字段,然后提交数据,

//给服务器来处理,由于没有把div当前的innertext发给服务器,所以服务器不能得知当前的值

//也不要幻想有办法能将div的innertext提交给服务器,因为只有设定了name的input,textarea

//select的value属性值才会被提交给服务器,只针对前面input,textarea,select这几个控件才能提交数据

---------------------------------------

上面意思是:的只有表单元素才能提交给后台,表单元素也只有value属性的值可以提交给服务器

比如表单的宽度:

---------------------------------------

下面做一个text框,实现,点击一下就把它的宽度+1

----------------------------------------------------

通过webform来实现:

在原来的项目:

/WebSiteTest

中添加:

宽度自增.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="宽度自增.aspx.cs" Inherits="宽度自增" %>

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

</head>

<body>

<div>

</div>

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button1" runat="server" οnclick="Button1_Click" Text="Button" />

</form>

</body>

</html>

-------------------------------------

可以看到跑出来的html代码:

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

</title></head>

<body>

//<form method="post" action="./宽度自增.aspx" id="form1">

//从这句看出来webform都是post方法提交数据,要想做成get是做不到的

//但是做成post会有一个问题就是重复提交表单的时候,浏览器会有提示

//效果很不好

</div>

</div>

<div>

</div>

<span id="Label1">0</span>//这里服务器控件<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>被转换成了span控件

</form>

</body>

</html>

-----------------------------------------------------

在看看,aspx的cs文件:

宽度自增.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class 宽度自增 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if(!IsPostBack ){//直接进入的时候设置为0

Label1.Text = "0";

//IsPostBack这里的IsPostBack就是,以前讲的通过隐藏字段传递的

}

protected void Button1_Click(object sender, EventArgs e)

{//取到label的值,然后自增后赋值回去

int i = Convert.ToInt32(Label1.Text);

i++;

Label1.Text = i.ToString();

}

-----------------------------------------------------

//从上面的生成的html源码中可以看到:

这样的一个代码:

__VIEWSTATE

这个就是ViewState代码:

__VIEWSTATE就是存下次需要用到的代码,数据

什么是viewState: viewState其实就是用来存放[那些没有name 属性的表单] 数据的一个容器。

这里的/wEPDwUKMTI2NTY4ODI3MQ9kFgICAw9kFgICAQ8PFgIeBFRleHQFATBkZGRIR372XDyVmQEoCsxYtJpuAGKXGmbc4njPiVM89RA1eA==

是经过编码后的数据,可以用:ViewStateDecoder2这个工具来进行解析

---------------------------------------------------------------

可以看下解析结果:

<?xml version="1.0" encoding="utf-16"?>

<Pair>

<Pair>

<Pair>

<Pair>

<String>5</String>//这里就是需要提交给后台,被viewstate封装的值

</ArrayList>

</Pair>

</ArrayList>

</Pair>

</ArrayList>

</Pair>

</viewstate>

---------------------------------------------

关于另外两个字段的意思:

asp.net页面里__VIEWSTATEGENERATOR、__EVENTVALIDATION是做什么用的

服务器返送给浏览器的页面里，有这两个隐藏域，还有对应的数值。感觉，既然呈现给我们，似乎就有用，但不知道有什么用？

------解决思路----------------------

如果你学习 asp.net 控件开发技术，就会了解这个其实是核心技术。

asp.net 要给程序员提供一个类似 winform 的自动保持所有控件（包括内部子控件）

的成千上万状态的机制，不需要程序员自己来开发（例如自己再胡乱写什么隐藏域来保存

和提交）状态维系机制。当页面提交（回发）时，例如GridView上的所有数据行、每一行

内的所有自定义模板中的子控件等等，你会看到状态都自动重新填好了（哪怕你修改了

GridView中某一行的模板中的一个Label的ForeColor属性），这就是靠着网页的ViewState保

存着所有控件的状态值。而当用户在浏览器端点击一些操作，例如点击GridView中的“编辑”按

钮，页面并不仅仅触发这个Button_Click事件，还要触发Grid的一个Edit事件，等等这类事件，

也需要从客户端传给服务器端。

因此 PostData + Event 这两种机制和相关的数据，构成了 asp.net webform 的核心技术。

而传统的 web 服务器上有数百个网站，所以asp.net 设计者不用 web 服务器来保存这些数据，

而是在页面 html 文本中“夹带”这些信息，随着html的输出而输出，

随着 <form /> 的提交而带回，把浏览器端页面当作这些数据的一个存储载体

----------------------------------------------------------------

再看另一个例子:

这个例子,用一个text框来实现自增:

新建一个webform

/WebSiteTest

Input自增.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Input自增.aspx.cs" Inherits="Input自增" %>

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

</head>

<body>

<div>

<asp:TextBox ID="TextBox1" runat="server">0</asp:TextBox>

<asp:Button ID="Button1" runat="server" οnclick="Button1_Click" Text="Button" />

</div>

</form>

</body>

</html>

--------------------------------------------------------------

Input自增.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class Input自增 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{//直接进入的时候设置为0

TextBox1.Text = "0";

//IsPostBack这里的IsPostBack就是,以前讲的通过隐藏字段传递的

}

protected void Button1_Click(object sender, EventArgs e)

{

//取到label的值,然后自增后赋值回去

int i = Convert.ToInt32(TextBox1.Text);

i++;

TextBox1.Text = i.ToString();

}

-------------------------------------------------------------

可以看到这个代码生成的html:

http://localhost:53627/WebSiteTest/Input%E8%87%AA%E5%A2%9E.aspx

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

</title></head>

<body>

</div>

</div>

<div>

</div>

</form>

</body>

</html>

--------------------------------------------------------

这个时候再去给这个:

__VIEWSTATE利用工具去解码:

可以看到:

/wEPDwUKLTk3NjEyMzEzNGRk71NHMDbsieJOLOdeJmYLqrtiqKqPjnKQmqvtOr2bJJg=

这个值,并没有被解码出,在inputbox中输入的值:

<?xml version="1.0" encoding="utf-16"?>

<Pair>

</Pair>

</viewstate>

------------------------------------------

这是因为input本身就是一个表单控件,是不需要封装,就可以传值给服务器端的

-------------------------------------------------------------------------

下一个知识点:

宽度自增.aspx

中除了原来的label自增,再添加一个textbox

这次除了要实现textbox自增还要实现同时,自增textbox框的宽度:

----------------------

修改:宽度自增.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="宽度自增.aspx.cs" Inherits="宽度自增" %>

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

#form1

{

height: 70px;

}

</style>

</head>

<body>

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button1" runat="server" οnclick="Button1_Click" Text="Button" />

<asp:Button ID="Button2" runat="server" οnclick="Button2_Click" Text="Button" />

</div>

</form>

</body>

</html>

----------------------------------------------------------------

宽度自增.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class 宽度自增 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if(!IsPostBack ){//直接进入的时候设置为0

Label1.Text = "0";

//IsPostBack这里的IsPostBack就是,以前讲的通过隐藏字段传递的

}

protected void Button1_Click(object sender, EventArgs e)

{//取到label的值,然后自增后赋值回去

int i = Convert.ToInt32(Label1.Text);

i++;

Label1.Text = i.ToString();

}

protected void Button2_Click(object sender, EventArgs e)

{

//值自增

int i = Convert.ToInt32(TextBox1.Text);

i++;

TextBox1.Text = i.ToString();

//宽度自增

//TextBox1 .Width.Type = UnitType.Pixel;

//通过上面这个代码可以看到:

//这个宽度的单位是unit

TextBox1.Width = new Unit(TextBox1 .Width .Value +10);

//每次都增加十个像素

}

--------------------------------------------------------------------

这个时候生成的html可以看下:

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

</title>

#form1

{

height: 70px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</form>

</body>

</html>

----------------------------------------------------------------

这时候用工具解码:

__VIEWSTATE

------------

/wEPDwUKLTQ4ODQ4Nzc5OQ9kFgICAw9kFgQCAQ8PFgIeBFRleHQFATBkZAIFDw8WBB4FV2lkdGgbAAAAAAAAVEABAAAAHgRfIVNCAoACZGRkXGCqNajh4IuVyWymZyo4x40WfdVX5AkTrkfRIik/Rig=

----------------------------------------------------------------------------------------------------------

可以看到:

<?xml version="1.0" encoding="utf-16"?>

<Pair>

<Pair>

<Pair>

<Pair>

</ArrayList>

</Pair>

<Int32>5</Int32>//

<Pair>

<IndexedString>Width</IndexedString>

<Unit>80px</Unit>//这个地方存了文本框的宽度可以看到

</ArrayList>

</Pair>

</ArrayList>

</Pair>

</ArrayList>

</Pair>

</viewstate>

可以看到textbox宽度被viewstate传到后台去了

上一篇：ASP.Net学习笔记015--ASP.Net中使用Cookie

下一篇：C#.NET验证码智能识别学习笔记---04C#.Net图片操作

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯