asp.net客户端编码有两个方面:
客户端脚本:它运行在浏览器上,进而加速页面的执行。 例如,可以捕获无效数据的客户端数据验证,并相应地警告用户而不进行往返服务器交互。
客户端源代码:asp.net页面生成这个。 例如,asp.net页面的html源代码包含许多隐藏的字段,并自动注入了javascript代码块,这些代码保留了诸如视图状态之类的信息,或者执行其他工作来使页面工作。
所有asp.net服务器控件都允许调用使用javascript或vbscript编写的客户端代码。 一些asp.net服务器控件使用客户端脚本来为用户提供响应而不回发给服务器。 例如,验证控件。
除了这些脚本之外,button
控件还有一个属性onclientclick
,它允许在单击按钮时执行客户端脚本。
传统和服务器html控件具有以下事件,可以在引发时执行脚本:
编号 | 事件 | 描述 |
---|---|---|
1 | onblur |
当控件失去焦点时触发 |
2 | onfocus |
当控件收到焦点时触发 |
3 | onclick |
点击控件时触发 |
4 | onchange |
当控件的值改变时触发 |
5 | onkeydown |
当用户按下一个键时触发 |
6 | onkeypress |
当用户按下字母数字键时 |
7 | onkeyup |
当用户释放一个键时 |
8 | onmouseover |
当用户将鼠标指针移到控件上时 |
9 | onserverclick |
当控件被点击时,它会引发控件的serverclick事件 |
我们已经讨论和学习过了,asp.net页面一般都是用两个文件写成的:
内容文件包含html或asp.net控件标记和文字以形成页面的结构。 文件后面的代码包含类定义。 在运行时,内容文件被解析并转换成页面类。
这个类和代码文件中的类定义以及系统生成的代码一起构成处理所有发布数据的可执行代码(程序集),生成响应并将其发送回客户端。
考虑简单的页面:
<%@ page language="c#" autoeventwireup="true" codebehind="default.aspx.cs"
inherits="clientside._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>
untitled page
</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:textbox id="textbox1" runat="server"></asp:textbox>
<asp:button id="button1" runat="server" onclick="button1_click" text="click" />
</div>
<hr />
<h3> <asp:label id="msg" runat="server" text=""> </asp:label> </h3>
</form>
</body>
</html>
在浏览器上运行此页面时,“查看源代码”选项将显示asp.net运行时发送给浏览器的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>
untitled page
</title>
</head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__viewstate" id="__viewstate"
value="/wepdwukmtu5mta2odywowrk31nudgdgvhha7jojum9qn5rxu2m=" />
</div>
<div>
<input type="hidden" name="__eventvalidation" id="__eventvalidation"
value="/wewawkpjzj0dals0blrbgkm54rgbhhsym61rraxe+knbtcs8cd1qdj/"/>
</div>
<div>
<input name="textbox1" type="text" id="textbox1" />
<input type="submit" name="button1" value="click" id="button1" />
</div>
<hr />
<h3><span id="msg"></span></h3>
</form>
</body>
</html>
如果您正确地浏览了代码,可以看到前两个<div>
标签包含隐藏的字段,用于存储视图状态和验证信息。