asp.net控件本质

翻译|其它|编辑:郝浩|2007-09-29 09:23:22.000|阅读 977 次

概述:

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

        在我的一个项目中需要对于控件进行区分总结,我在网上找了找加上自己的实际测试总结如下:(如果有什么不正确的请即使指出,一起讨论,大家共同进步)


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


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

 

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

 

    2Html  服务器控件:其实就是  html  控件的基础上加上  runat="server"所构成的控件.它们的注意区别是运行方式不同,html  控件运行在客户端,而  html  服务器控件是运行在服务器端的。参考其他资料是这样说的:    

  

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

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

 

    3Web  服务器控件:也称  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" />
     
<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  我想是通过发送到服务器端执行的(具体我也不太很清楚)

 

4LinkButton  不定义  onclick  事件,它会自动的生成下面代码发送到服务器端。

href="javascript:__doPostBack('LinkButton1',' ')"  

 

以上是我对  asp.net  控件进行了简单的介绍。这只是我个人的观点总结,有什么不正确的希望朋友能够提出来,我们大家共同讨论,共同进步。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:CSDN

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP