编程技巧 asp.net控件本质

转载 2007年10月15日 10:30:00
asp.net之所以现在开发方便和快捷,关键是它有一组强大的控件库,包括web服务器控件,web用户控件,web自定义控件,html 服务器控件和html控件等。这里我主要说说html控件、html服务器控件和web服务器控件的区别。

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发回到服务器端,由服务器来处理。

4。下面我就结合我自己的测试来说明问题:

这段代码是我放在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 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</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发生的变化(.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</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>直接放到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> _fcksavedurl=""javascript:__doPostBack('LinkButton1','')">LinkButton</a>"

这里有可以看出几点:

1。当html服务器控件在服务器端添加了服务器事件后生成的代码变为:onclick="_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个脚本且书写的格式不正确。onclick="return DeleteCheck(this);_doPostBack()"这样的话就只能执行第一个函数而第二个函数就不能执行了(return).如果用onclick="return DeleteCheck(this),_doPostback()"是指2个函数同时都要执行没有影响(相当于一条语句)。在我的一个项目中需要对于控件进行区分总结,我在网上找了找加上自己的实际测试总结如下:(如果有什么不正确的请即使指出,一起讨论,大家共同进步)

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

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发回到服务器端,由服务器来处理。

4。下面我就结合我自己的测试来说明问题:

这段代码是我放在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 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</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发生的变化(.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</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>直接放到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>

这里有可以看出几点:

1。当html服务器控件在服务器端添加了服务器事件后生成的代码变为:onclick="_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个脚本且书写的格式不正确。onclick="return DeleteCheck(this);_doPostBack()"这样的话就只能执行第一个函数而第二个函数就不能执行了(return).如果用onclick="return DeleteCheck(this),_doPostback()"是指2个函数同时都要执行没有影响(相当于一条语句)。

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

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

4。LinkButton不定义onclick事件,它会自动的生成下面代码发送到服务器端。 href="javascript:__doPostBack('LinkButton1',' ')" 以上是我对asp.net控件进行了简单的介绍。这只是我个人的观点总结,有什么不正确的希望朋友能够提出来,我们大家共同讨论,共同进步。

asp.net控件本质

.net控件本质         在我的一个项目中需要对于控件进行区分总结,我在网上找了找加上自己的实际测试总结如下:(如果有什么不正确的请即使指出,一起讨论,大家共同进步)       ...
  • judyge
  • judyge
  • 2016年01月09日 23:07
  • 191

强大的ASP.NET控件----用户控件对战自定义控件

用户控件,用户控件的属性 自定义控件,如何使用自定义和用户控件,如何制作自定义控件和用户控件...
  • u010073895
  • u010073895
  • 2014年11月08日 21:34
  • 2650

asp.net各种数据控件汇总

.master代码如下: 数据控件演示 GridView演示 ...
  • yayun0516
  • yayun0516
  • 2014年12月07日 11:10
  • 1004

ASP.NET初了解(一)--Html控件和Web控件

作为一名ASP.NET的初学者,了解并且区别一些混淆概念是很必须的,今天这篇博文就是主要向大家介绍一下Html控件和Web控件。在ASP.NET中,用户界面控件主要就是Html控件和Web控件,在前台...
  • sunliduan
  • sunliduan
  • 2013年12月18日 19:19
  • 4822

ASP.NET 控件详解

[原]IFrame的用法 IFrame介绍: 也应该是框架的一种形式,iframe和frame比较相似,但是有一个根本的区别,iframe可以活动,而frame是不可活...
  • dqsh00
  • dqsh00
  • 2013年11月30日 09:08
  • 1989

asp.net时间控件之用法

原文地址:http://blog.csdn.net/taomanman/article/details/5619581 关于需要用到的JS文件请到地址:http://d.download.csd...
  • lishimin1012
  • lishimin1012
  • 2014年08月05日 18:16
  • 1172

WEB第三方打印控件[ASP.NET常用工具]

在B/S模式开发中,打印是个很大的困扰.无论是采用页面直接输出或者引用WORD.DLL也好,都有不足之处. 目前最好的办法就是采用第三方控件,网上流传的打印控件有很多.总结了下推荐3个给大家: 1...
  • chz_cslg
  • chz_cslg
  • 2014年05月09日 17:37
  • 10508

Asp.net 用户控件添加自定义事件asp.net

Asp.net 用户控件添加自定义事件asp.net
  • Sunqlive
  • Sunqlive
  • 2016年09月07日 11:17
  • 868

ASP.NET自定义服务器控件

最简单的服务器端控件开发流程简介。
  • yanwushu
  • yanwushu
  • 2014年04月08日 21:34
  • 4315

单片机编程开发技巧

工作了7个月之久,对单片机的编程也开始慢慢熟悉起来,以前总是知道单片机就是定时器,状态机,中断这些东西结合起来效率是相当高的,但是自从接手开发GPF这个芯片之后,我发现了另外一种单片机的开发技巧,高手...
  • morixinguan
  • morixinguan
  • 2016年06月27日 12:05
  • 2705
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:编程技巧 asp.net控件本质
举报原因:
原因补充:

(最多只允许输入30个字)