Asp.net控件之异同：HTML控件与Web服务器控件

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

asp.net控件介绍

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

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

2、html服务器控件:其实就是html控件的基础上加上runat="server"所构成的控件.它们的注意区别是运行方式不同，html控件运行在客户端，而html服务器控件是运行在服务器端的。参考其他资料是这样说的: 当ASP.NET 网页执行时，会检查标注有无runat 属性，如果标注没有设定，那么Html标注就会被视为字符串，并被送到字符串流等待送到客户端，客户端的浏览器会对其进行解释；如果Html标注有设定runat="server" 属性，Page 对象会将该控件放入控制器，服务器端的代码就能对其进行控制，等到控制执行完毕后再将Html服务器控件的执行结果转换成Html标注，然后当成字符串流发送到客户端进行解释

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

3、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
< 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 ut 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
< input type="submit" name="Data$ctl03$button5" value="Asp:button" onclick="return DeleteCheck(this);" id="Data_ctl03_button5" />

asp.net控件总结

可以看出以下几点:

1、当控件属性中有runat="server"时，生成的html控件时name和id发生的变化(.net Framework)。
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
< 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">

直接放到form标记中生成的html代码

< script type="text/javascript">
< !--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
< /script>
< 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>

asp.net控件总结二

这里也可以看出几点：

1、当html服务器控件在服务器端添加了服务器事件后生成的代码变为:οnclick="_doPostBack()"，实际上是调用脚本把整个窗体提交到服务器(如果没有添件服务器事件,而只是添加了runat="server"是不会发送到服务器端的)这里注意如果要在html服务器控件中添加一个客户端事件如上面的

< input runat="server" type="button" id="delete" value="Server button" 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个脚本且书写的格式不正确。
οnclick="return DeleteCheck(this)；_doPostBack()"

这样的话就只能执行第一个函数而第二个函数就不能执行了(return).如果用
οnclick="return DeleteCheck(this)，_doPostback()"
是指2个函数同时都要执行没有影响(相当于一条语句)。

2、控件的名字没有发生变化，这个问题我也不太明白为什么不发生变化，请高手门指教哈

3、asp:button中的onclientclick事件生成后就变成了onclick事件了,类型变成了type="submit".然而服务器事件的onclick我想是通过发送到服务器端执行的(具体我也不太很清楚)。

4、LinkButton不定义onclick事件，它会自动的生成下面代码发送到服务器端。
href="javascript:__doPostBack('LinkButton1',' ')"

Asp.net控件之异同：HTML控件与Web服务器控件相关推荐

asp.net夜话之九：验证控件(上)
本篇要讲述的知识点如下: 数据验证介绍纯客户端脚本验证 asp.net验证控件概述 RequiredFieldValidator控件 CompareValidator控件 RangeVali ...
asp.net中将数据库绑定到DataList控件的实现方法与实例代码
解决方法1: datalist databind() 解决方法2: 查看MSDN上的详细说明资料解决方法3: 在DataList的模板中用table表格,如: 复制代码代码如下: <asp: ...
(转) ASP.NET 2.0：使用用户控件和定制的Web部件个人化你的门户网站（二）
Web部件目录我们已经见过了如何在 WebPartZones 控件中事先放入Web部件.你还可以用另外一种方法完成这个功能,那就是允许用户在运行时添加新的Web部件.通过使用 CatalogZone ...
ASP.NET中共有哪几种类型的控件？其中，HTML控件、HTML服务器控件和WEB服务器控件之间有什么区别
[考点] ASP.NET中的控件类型理解. [出现频率] ★★★☆☆ [解答] ASP.NET的控件包括WEB服务器控件.WEB用户控件.WEB自定义控件.HTML服务器控件和HTML控件.HTML控 ...
【ASP.NET】基础补习之验证控件
在做Web应用程序的时候,因为用户有可能输入各式各样的信息,经常需要大量的数据验证,如果交给服务器去验证的话,无疑会增加服务器的压力,而且也容易造成程序的异常.甚至导致网站出现一些安全问题.因此我们在 ...
ASP.NET 3.5中的ListView控件和DataPager控件(一)
介绍今天,我花了几个小时的时间研究了一下ASP.NET 3.5中的ListView控件和DataPager控件. 这两个控件是ASP.NET中新增的.非常受欢迎的控件. ListView控件集成了D ...
【转贴】ASP.NET 3.5中的ListView控件和DataPager控件
作者:Rick Strahl 翻译:webabcd 原文地址:http://www.west-wind.com/WebLog/posts/127340.aspx 译文地址:http://www.cn ...
使用ASP.NET 2.0中的GridView控件
在ASP.NET 2.0中,加入了许多新的功能和控件,相比asp.net 1.0/1.1,在各方面都有了很大的提高.其中,在数据控件方面,增加了不少控件,其中的gridview控件功能十分强大.在本文 ...
asp.net夜话之九：验证控件
本篇要讲述的知识点如下: 数据验证介绍纯客户端脚本验证 asp.net验证控件概述 RequiredFieldValidator控件 CompareValidator控件 RangeValidato ...

Asp.net控件之异同：HTML控件与Web服务器控件

Asp.net控件之异同：HTML控件与Web服务器控件相关推荐

最新文章

热门文章