ASP.NET 客户端


ASP.NET 客户端编码有两个方面:

  • 客户端脚本 :它在浏览器上运行,从而加快页面的执行速度。例如,客户端数据验证可以捕获无效数据并相应地警告用户,而无需往返服务器。

  • 客户端源代码 : ASP.NET 页面生成这个。例如,一个 ASP.NET 页面的 HTML 源代码包含许多隐藏字段和自动注入的 JavaScript 代码块,它们保存视图状态等信息或执行其他工作以使页面正常工作。

客户端脚本


所有 ASP.NET 服务器控件都允许调用使用 JavaScript 或 VBScript 编写的客户端代码。一些 ASP.NET 服务器控件使用客户端脚本向用户提供响应,而无需回发到服务器。例如,验证控件。

除了这些脚本之外,Button 控件还有一个属性 OnClientClick,它允许在单击按钮时执行客户端脚本。

传统和服务器 HTML 控件具有以下事件,它们在引发时可以执行脚本:

Event 描述
onblur 当控件失去焦点时
onfocus 当控件获得焦点时
onclick 单击控件时
onchange 当控件的值发生变化时
onkeydown 当用户按下一个键
按键按下 当用户按下字母数字键时
onkeyup 当用户释放一个键时
鼠标悬停 当用户将鼠标指针移到控件上时
onserverclick 当控件被单击时,它会引发控件的 ServerClick 事件

客户端源代码


我们已经讨论过,ASP.NET 页面通常写在两个文件中:

  • 内容文件或标记文件 (.aspx)
  • 代码隐藏文件

内容文件包含构成页面结构的 HTML 或 ASP.NET 控制标记和文字。文件背后的代码包含类定义。在运行时,内容文件被解析并转换为页面类。

该类与代码文件中的类定义以及系统生成的代码一起构成可执行代码(程序集),用于处理所有发布的数据、生成响应并将其发送回客户端。

考虑简单的页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
    Inherits="clientside._Default" %>

<!DOCTYPE html PUBLIC "-// W3C
    "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
    "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>

如果你正确浏览代码,你可以看到前两个

标记包含存储视图状态和验证信息的隐藏字段。