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

html控件

就是我们通常的说的html语言标记,这些语言标记在已往的静态页面和其他网页里存在,不能在服务器端控制的,只能在客户端通过javascript等程序语言来控制。

<input type="button" id="btn" value="button"/>

html服务器控件

其实就是html控件的基础上加上runat="server"所构成的控件。它们的主要区别是运行方式不同,html控件运行在客户端,而html服务器控件是运行在服务器端的。

当ASP.NET网页执行时,会检查标签有无runat属性,如果标签没有设定,那么Html标签就会被视为字符串,并被送到字符串流等待送到客户端,客户端的浏览器会对其进行解释;如果Html标签有设定runat="server" 属性,Page对象会将该控件放入控制器,服务器端的代码就能对其进行控制,等到控制执行完毕后再将Html服务器控件的执行结果转换成Html标签,然后当成字符串流发送到客户端进行解释,不能通过js来控制它。

<input id="Button" type="button" value="button" runat="server" />

web服务器控件

也称asp.net服务器控件,是Web Form编程的基本元素,也是asp.net所特有的。它会按照client的情况产生一个或者多个html控件,而不是直接描述html元素。如:

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

那么它和html服务器控件有什么区别呢?
    1)、Asp.net服务器控件提供更加统一的编程接口,如每个Asp.net服务器控件都有Text属性。
    2)、隐藏客户端的不同,这样程序员可以把更多的精力放在业务上,而不用去考虑客户端的浏览器是ie还是firefox,或者是移动设备。
    3)、Asp.net服务器控件可以保存状态到ViewState里,这样页面在从客户端回传到服务器端或者从服务器端下载到客户端的过程中都可以保存。
    4)、事件处理模型不同,Html标签和Html服务器控件的事件处理都是在客户端的页面上,而Asp.net服务器控件的事件处理则是在服务器上,举例来说:
    <input id="Button4"
type="button" value="button" runat="server"/>

是Html服务器控件,此时我们点击此按钮,页面不会回传到服务器端,原因是我们没有为其定义鼠标点击事件。

<input id="Button4" type="button" value="button" runat="server" onserverclick="test" />

我们为Html服务器控件添加了一个onserverclick事件,点击此按钮页面会发回服务器端,并执行服务端的test(object
sender, EventArgs e)方法。

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

是Asp.net服务器控件,并且我们没有为其定义click,但是我们点击时,页面也会发回到服务器端。

由此可见:Html标注和Html服务器控件的事件是由页面来触发的,而Asp.net服务器控件则是由页面把Form发回到服务器端,由服务器来处理。

测试说明问题

这段代码是放在repeat中的模板里的:其中DeleteCheck是一个js脚本函数,是用于是否发送到服务器端的,这里就不展示脚本代码:

<input runat="server" type="button" id="delete" value="Server button" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" />
<input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" />

运行之后展现出来的html代码如下:

<input name="Data$ctl03$delete" type="button" id="Data_ctl03_delete" value="Server button" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input name="Data$ctl03$Button2" type="submit" id="Data_ctl03_Button2" onclick="return DeleteCheck(this)" value="Server submit" / >
<input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button id="Data_ctl03_button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<input type="submit" name="Data$ctl03$button5" value="Asp:button" onclick="return DeleteCheck(this);" id="Data_ctl03_button5" />

可以看出以下几点:
1、当控件属性中有runat="server"时,生成的html控件时name和id发生的变化。【第二个控件】
2、当asp:button服务器按钮通过生成的页面后转化成类型为submit类型的Client控件。【最后一个控件】
3、当控件是html控件时通过生成的页面和原来的html代码完全一样(理由上面已经说明)。
另外:我还测试了把这段代码直接放到form标记中(不放到其他子标记中)如:

<input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" />
<input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" OnClick="button5_Click" />
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>

生成的html代码:

<input language="javascript" onclick="__doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input name="Button2" type="submit" id="Button2" onclick="return DeleteCheck(this)" value="Server submit" />
<input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<input type="submit" name="button5" value="Asp:button" onclick="return DeleteCheck(this);" id="button5" />
<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
i f (!theForm.onsubmit    (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>

这里有可以看出几点:
    1、(第一个input)当html服务器控件在服务器端添加了服务器事件(onserverclick)后生成的代码变为:onclick="_doPostBack()",实际上是调用脚本把整个窗体提交到服务器(如果没有添件服务器事件而只是添加了runat="server"是不会发送到服务器端的)

这里注意如果要在html服务器控件中添加一个客户端事件如上面的: 
<input runat="server" type="button" id="delete" value="Serverbutton"onserverclick="delete_ServerClick"
/>
变成 
<input runat="server" type="button" id="delete" value="Server button" onclick="return DeleteCheck(this)"
onserverclick="delete_ServerClick" />
那样生成的html代码变成 
<input language="javascript" onclick="return DeleteCheck(this) __doPostBack('delete','')" name="delete"
type="button" id="delete" value="Server button" />
提示有脚本错误:原因是onclick事件执行了2个脚本且书写的格式不正确。
onclick="return DeleteCheck(this);_doPostBack()"这样的话就只能执行第一个函数而第二个函数就不能执行了(return).

如果用onclick="return
DeleteCheck(this),_doPostback()"是指2个函数同时都要执行没有影响(相当于一条语句)。

使用场景

如果某些控件不需要服务器端的事件或状态管理功能时,可以选择HTML控件,这样可以提高应用程序的性能;

如果需要对控件进行动态的处理,或要保存其状态等可以选择WEB服务器控件!

WEB服务器控件用起来个人认为要方便,但考虑性能的话在能不用WEB服务器控件的地方就尽量不用

HTML服务器控件与Web服务器控件的更多相关文章

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

    ASP.NET的控件包括WEB服务器控件.WEB用户控件.WEB自定义控件.HTML服务器控件和HTML控件.HTML控件.HTML服务器控件和WEB服务器控件之间的区别如下所示.q      HTM ...

  2. ListView Web 服务器控件概述(MSDN)

    1: "折叠"图像"展开"图像"复制"图像"复制悬停"图像 全部折叠全部展开 代码:全部 代码:多个 代码:Visual ...

  3. WEB服务器控件对应生成的HTML标签 及最常应用事例

    首先得了解WEB服务器控件对应生成的HTML标签 label----------<span/>button---------<input type="submit" ...

  4. ASP.NET自定义Web服务器控件-DropDownList/Select下拉列表控件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin ...

  5. Web服务器控件表

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAykAAAFRCAIAAAD/5nW4AAAgAElEQVR4nOydd3gVxfrHN6TXQ0KXEn

  6. ASP.NET Web - 服务器控件

    控件 HTML 说明 Label <span> 返回一个包含文本的span元素 Literal static text 返回简单的静态文本.使用Literal控件,可以根据客户应用程序转换 ...

  7. Web服务器控件之button

    button有两种类型的按钮,一种是提交按钮,一种是命令按钮.只说命令按钮. 命令按钮事要使用两个属性,分别是CommandName和CommandArguement属性,当该按钮被点击时,将页面中的 ...

  8. System.Web.UI.WebControls的Web服务器控件

    calendar[英][ˈkælɪndə(r)][美][ˈkæləndɚ]n.日历; 历法; 日程表; (一年之中的)重大事件(或重要日期)一览表; vt.把…记入日程表中; 把…列入表中; 为(文件 ...

  9. (7)ASP.NET WEB服务器控件

    1. <body> <form id="form1" runat="server"> <div> <asp:Label ...

随机推荐

  1. 【JavaScript】撞墙的小球

    参考: 1.JS 元素位置 设置元素位置:http://blog.sina.com.cn/s/blog_a2ec891e01011v9f.html 2.用JavaScript修改CSS属性 3.使用J ...

  2. 3d旋转动画焦点图

    在线演示 本地下载

  3. C++二阶构造函数

    转自:http://blog.51cto.com/9291927/1896411 一.构造函数的问题 构造函数存在问题: A.构造函数只提供自动初始化成员变量的机会 B.不能保证初始化逻辑一定成功,如 ...

  4. RN项目中缩进处理

    SpannableString使用详解http://blog.csdn.net/u012702547/article/details/49895157 Spannable的用法http://www.j ...

  5. Github fork其他项目的分支与主干保持同步

    Fork一个Repo Fork是一个复制的操作,当你Fork一个项目之后,你就有了在原项目的基础之上进行修改和扩展的权限. 通常情况下,Fork操作用于参与别人的项目(成为项目中的一员),或者以别人的 ...

  6. 并发-CopyOnWrite源码分析

    CopyOnWrite源码分析 参考: https://blog.csdn.net/linsongbin1/article/details/54581787 http://ifeve.com/java ...

  7. spark学习14(spark local模式运行spark程序的报错)

    报错1 java.io.IOException: Could not locate executable null\bin\winutils.exe in the Hadoop binaries. 解 ...

  8. ActiveMQ_01

    http://shhyuhan.iteye.com/blog/1278103http://www.cnblogs.com/blsong/archive/2012/09/26/2704337.htmlh ...

  9. Java NIO框架 Mina、Netty、Grizzly

    Mina Mina(Multipurpose Infrastructure for Network Applications) 是 Apache组织一个较新的项目,它为开发高性能和高可用性的网络应用程 ...

  10. Shell for、while循环

    先顺带说下 if 1. if  条件;then else fi 如果else分支没有执行语句,可以不写. 2. if 条件;then elif 条件;then else fi #!/bin/bash ...