在ASP.NET开发中用到的控件可以分为三种:传统html控件(比如<input type="button"/>)、html服务器控件(比如<input type="button" runat="server"/>)以及ASP.NET服务器控件(比如<asp:Button runat="server" />)。

初学ASP.NET,第一种控件相当于在客户端运行,在服务器端无法用代码捕获它;后面两种控件都是在服务器端运行,他们都需要设置id,我们可以在服务器端用id来自动捕获它们,html服务器控件<input type="button" runat="server"/>对应着System.Web.UI.HtmlControls.HtmlInputButton,ASP.NET服务器控件<asp:Button />对应着System.Web.UI.WebControls.Button类。但是html服务器控件和ASP.NET服务器控件的属性并不是完全相同的,比如button1是ASP.NET服务器Button,button2是html服务器Button,如果我们想获得ASP.NET服务器Button上的文字我们用button1.Text获得,如图:

如果我们想获得html服务器Button上的文字我们用button2.value,如图下图:

为了进一步搞明白二者在功能实现上的区别,以下面的例子进行分析:

[html] view plaincopy
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyForm1.aspx.cs" Inherits="MyForm1" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title></title>
  6. <script type="text/javascript" language="javascript">
  7. function BtnClientClick()
  8. {
  9. alert("客户端Button Clicked");
  10. }
  11. </script>
  12. <script runat="server" type="text/C#">
  13. protected void Page_Load(object sender, EventArgs e)
  14. {
  15. HttpRequest request = this.Request;
  16. }
  17. protected void button_Click(object sender, EventArgs e)
  18. {
  19. //注意:下面的Response.Write中必须把"script"一词拆分开,因为不能在已有的脚本中再写script脚本,
  20. //否则就会导致scrip匹配出现问题,只要把script拆分成两个词就没事了,这样编译环境就不会自动将script混乱匹配了
  21. //但是在后台cs文件中就可以直接写script,不用拆分
  22. Response.Write("<scr"+"ipt language='javascript'>alert('服务器端Button Clieked')</scr"+"ipt>");
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <form id="form1" runat="server" action="MyForm1.aspx" >
  28. <div>
  29. <asp:Button ID="button1" runat="server"  OnClientClick="BtnClientClick()" OnClick="button_Click" Text="ASP.NET服务器Button"  />
  30. <input type="button" runat="server" id="button2" onclick="BtnClientClick();"  onserverclick="button_Click" value="html服务器Button"  />
  31. </div>
  32. </form>
  33. </body>
  34. </html>

生成的界面很简单,只有两个按钮,这两个按钮所实现的功能完全相同,如下图所示:

单击其中任何一个按钮都会首先触发客户端单击事件,(asp.net服务器控件的客户端单击事件是OnClientClick,html服务器控件的客户端单击事件是onclick。)(asp.net服务器控件的服务器端单击事件是onclick(),html服务器控件的服务器端单击事件是onserverclick())如下图所示:

然后会继续触发服务器单击事件,如下图所示:

下面我们看一下生成的源文件:

[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <script type="text/javascript" language="javascript">
  6. function BtnClientClick()
  7. {
  8. alert("客户端Button Clicked");
  9. }
  10. </script>
  11. </head>
  12. <body>
  13. <form name="form1" method="post" action="MyForm1.aspx" id="form1">
  14. <div>
  15. <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
  16. <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
  17. <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTEwODIyMzU1NWRkDveqHJXNO04bTmLlvLfoWmMw5iEk5QY6nOLJOYe9iiE=" />
  18. </div>
  19. <script type="text/javascript">
  20. //<![CDATA[
  21. var theForm = document.forms['form1'];
  22. if (!theForm) {
  23. theForm = document.form1;
  24. }
  25. function __doPostBack(eventTarget, eventArgument) {
  26. if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
  27. theForm.__EVENTTARGET.value = eventTarget;
  28. theForm.__EVENTARGUMENT.value = eventArgument;
  29. theForm.submit();
  30. }
  31. }
  32. //]]>
  33. </script>
  34. <div>
  35. <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKjzJ3LDgKs34rGBgLbo7GGCC0eG7DCZsU97rk+MMsqMCuRNTchABLy1mmYQ3jKMmT3" />
  36. </div>
  37. <div>
  38. <input type="submit" name="button1" value="ASP.NET服务器Button" onclick="BtnClientClick();" id="button1" />
  39. <input onclick="BtnClientClick(); __doPostBack('button2','')" name="button2" type="button" id="button2" value="html服务器Button" />
  40. </div>
  41. </form>
  42. </body>
  43. </html>

注意:由于form1内含有服务器控件,所以form1必须具有runat="server"。只要form1具有runat="server",最终生成的html源代码中会自动生成一个doPostBack方法,如果没有runat="server“,那么不会产生doPostBack方法。doPostBack方法是用于进行回发的,是通过theForm.submit()这句代码来实现,即提交表单实现了回发的过程,从而在服务器端触发一些列事件:Page_Load事件、Button的单击事件等等,你也许要问在服务器怎么知道该触发哪个按钮的单击事件呢?其实服务器会保存服务器控件的状态和属性,它会利用ViewState来保存这些信息,具体是通过上面的许多自动生成的<input type="hidden" />来实现的,这部分的内容是默认经过Base64编码的,在回传到服务器处理时服务器又会将它们还原成控件的状态数据。

我将源文件中的几处做了重点标记,我们着重分析一下,如下图所示:

1.首先来看<asp:Button ID="button1" runat="server"  OnClientClick="BtnClientClick()" OnClick="button_Click" Text="ASP.NET服务器Button"  />,这里面的OnClientClick表示的是客户端单击事件,OnClick表示的是服务器端单击事件,这里的OnClick写成onclick也是正确的。注意:该ASP.NET服务器Button没有onserverclick,OnClick起到了onserverclick的功能。

再来看<input type="button" runat="server" id="button2" οnclick="BtnClientClick();"  onserverclick="button_Click" value="html服务器Button"  />,这里的onclick与上面的不同,这里的onclick表示的是客户端单击事件,onserverclick表示的是服务器端单击事件。注意:该html服务器Button没有onclientclick,onclick起到了onclientclick的功能。

2.由于form1是runat="server",源代码中自动生成了一个用于回发的doPostBack客户端脚本。

3.ASP.NET服务器控件<asp:Button runat="server"/>被解析成了<input type="submit"/>,单击该按钮的时候首先会执行客户端脚本οnclick=”BtnClientClick();“,由于已经解析成了submit,所以然后会自动将表单进行提交,相当于执行了form1.submit(),实现回发,进而触发Page_Load事件与按钮单击等事件。这一过程就实现了先触发客户端单击事件,然后触发服务器端单击事件。

4.html服务器控件<input type="button" runat="server" id="button2" οnclick="BtnClientClick();"  onserverclick="button_Click" value="html服务器Button"  />被解析成了<input οnclick="BtnClientClick(); __doPostBack('button2','')" name="button2" type="button" id="button2" value="html服务器Button" />,之前的客户端单击事件οnclick="BtnClientClick();"  和服务器单击事件onserverclick="button_Click"在解析后被整合成了一个οnclick="BtnClientClick(); __doPostBack('button2','')" 。解析后,该按钮的单击事件绑定了两个事件处理方法,第一个BtnClientClick()用于触发客户端单击事件,后面的__doPostBack('button2','')用于进行回发,并且还给doPostBack设置了参数,符合EventHandler(object sender,EventArgs e)的风格,通过观察doPostBack函数可以知doPostBack(eventTarget, eventArgument)最终又会执行theForm.submit(),从而对表单进行提交,进行回发,从而也触发了服务器端的Page_Load事件和按钮单击事件。

需要特别注意的是,我们在编译器中编写单击事件οnclick="BtnClientClick();"时,在BtnClientClick()后面加了一个分号,这样在生成源文件的时候会发现<input οnclick="BtnClientClick(); __doPostBack('button2','')"  />在BtnClientClick()和__doPostBack('button2','')之间多了一个分号,如下图所示:

如果我们在编写<input type="button" runat="server" id="button2" οnclick="BtnClientClick()"  onserverclick="button_Click"/>时没有在BtnClientClick()后面添加分号,那么最终生成的源代码中也没有分号:input οnclick="BtnClientClick()  __doPostBack('button2','')"  />,这样就会报错了。所以我们在写事件代码时,最好要在函数后面添加分号,这是好的编程风格。

5.如果ASP.NET服务器控件既写了客户端单击事件OnClientClick="return ClientFun()"或者OnClientClick="ClientFun()),  又写了服务器端单击事件οnclick="ServerFun()",/那么当单击该button时,先执行客户端单击事件OnClientClick,调用ClientFun(),如果形式是OnClientClick="return ClientFun()",如果返回的是false,则不会触发服务器端的单击事件,也不会导致回发,如果OnClientClick="return ClientFun()"返回的是true或者OnClientClick="ClientFun())的形式,/那么在执行完客户端脚本之后进行回发(回发是指从客户端到服务器端),回发时,也要先触发Page_Load事件,然后再根据导致回发的参数确定执行哪一个服务器控件的事件,在本例子中执行ServerFun(),即button_Click(object sender, EventArgs e)/中的Response.Write("<script language='javascript'>alert('服务器端Button Clieked')</script>")代码,该代码将里面的脚本写入客户端进行执行。html服务器控件应该也具有相同的特性。

具体可以查看:ms-help://MS.MSDNQTR.v90.chs/dv_vwdcon/html/1ab97f0b-1c38-4897-85b0-ac915f6a182b.htm

asp.net服务器控件与html服务器控件的区别相关推荐

  1. ASP.NET中共有哪几种类型的控件?其中,HTML控件、HTML服务器控件和WEB服务器控件之间有什么区别

    [考点] ASP.NET中的控件类型理解. [出现频率] ★★★☆☆ [解答] ASP.NET的控件包括WEB服务器控件.WEB用户控件.WEB自定义控件.HTML服务器控件和HTML控件.HTML控 ...

  2. HTML服务器控件与Web服务器控件的区别[转]

    项目 HTML服务器控件 Web服务器控件 是否映射到 HTML标签 与HTML标签存在一一对应的映射关系.runat=server属性把传统的HTML标签转换成服务器控件.这使得开发人员可以将ASP ...

  3. [转]html控件、html服务器控件和web服务器控件的区别

    asp.net之所以现在开发方便和快捷,关键是它有一组强大的控件库,包括web服务器控件,web用户控件,web自定义控件,html服务器控件和html控件等.这里我主要说说html控件.html服务 ...

  4. Web服务器控件和HTML控件区别

     这两天在学习ASP.NET,遇到了Web服务器控件和HTML控件.刚开始看见这两个控件的时候,感觉很相似. 所以就想到了如下问题:这两个控件有什么区别?后来又看到了HTML服务器控件(加上run ...

  5. html控件、html服务器控件和web服务器控件的区别

    [RT]html控件.html服务器控件和web服务器控件的区别 2009-07-13 下午 12:24 asp.net之所以现在开发方便和快捷,关键是它有一组强大的控件库,包括web服务器控件,we ...

  6. Asp.net高级程序设计之服务器控件(4)

    服务器控件的类型  服务器控件本质上就是.NETFRAMEWORK中用来表示WEB窗体中可见元素的类.其类型可以分为: HTML服务器控件.这个这些类封装标准的HTML元素. WEB 控件. 富控件例 ...

  7. ASP.NET中CodeFile与CodeBehind的区别

     一.CodeBehind 1.使用方式 <%@ Page Language="C#" AutoEventWireup="true" Codebehi ...

  8. 一起学asp.net基础文章二 服务器控件、客户端控件和html表单控件

    首先解释一下这两个控件个概念. 所谓服务器控件 就是微软官方提供的如 textbox label dropdownlist等可以直接添加事件,属性 操作方式和winform类似的.net控件. 1.使 ...

  9. html+服务器控件语法,HtmlForm 服务器控件声明性语法

    HtmlForm 服务器控件声明性语法 08/20/2007 本文内容 创建一个服务器端控件,该控件映射到 HTML 元素并允许您为网页中的元素创建一个容器. DefaultButton=" ...

最新文章

  1. kf真空接头标准尺寸_酒泉VER8314KN39H出口过滤器滤芯 高线真空滤油机介
  2. 初学者都在坑里!不要在Python中使用“+”来连接字符串
  3. “.NET研究”关于C# 中的Attribute 特性
  4. mysql库存自动更新_秒杀库存需不需要实时更新到mysql?
  5. python的使用说明_Python教程:Python中__init__.py的使用用法说明
  6. 三款200万像素照相手机测评
  7. 获取css selector,selenium的css selector元素获取方式
  8. c++将小数化为二进制_C++中的float内存存储、与十进制的转换
  9. 【优化求解】基于matlab GUI模拟退火算法求解全局最大值最小值问题【含Matlab源码 1242期】
  10. CADD课程学习(7)-- 模拟靶点和小分子相互作用 (半柔性对接 AutoDock)
  11. 【更新于2019】SCI EI 索引最新查询方法(已验证有效)
  12. qmh_confluence源码研究
  13. SAN SWITCH zoning 划分及some command
  14. 电动汽车基于Origin的数据分析
  15. 对自己狠一点-----胡言乱语
  16. @ select 函数使用说明
  17. 数字图像处理 - 什么是数字图像处理
  18. java 集合数据类型_Java基础知识(数据类型和集合)
  19. matlab画折现_matlab画折线
  20. 字是人的脸,可我就是写不好

热门文章

  1. 【开发环境】StarUML 工具 ( 下载软件 | StarUML 安装 | StarUML 创建工程 )
  2. 【MATLAB】三维图形绘制 ( 三维平面图 | 二维网格 | meshgrid 函数 | 绘制网格 | mesh 函授 | 绘制平面 | surf 函数 | 绘制等高线 | contour 函数 )
  3. LeetCode 26 Remove Duplicates from Sorted Array [Array/std::distance/std::unique] c++
  4. Java安全管理器――SecurityManager
  5. shell脚本--字符串处理和动态数组
  6. Android深度探索(卷1)HAL与驱动开发阅读心得4
  7. MapReduce执行过程
  8. 经典算法题每日演练——第十九题 双端队列
  9. 设为首页及收藏本页代码 兼容IE和Firefox
  10. OpenGL画矩形,三角形,点(第一个图形学的小程序)