html控件,html服务器控件,web服务器控件的一些区别

1：html控件:就是我们通常的说的html语言标记，这些语言标记在已往的静态页面和其他网页里存在,不能在服务器端控制的，只能在客户端通过javascript和vbscript等脚本语言来控制。直白的说就是从Dreamweaver中直接拉过来的控件

            例如 <input id="Text2" type="text"  />

 

2：html服务器控件  也就是  在html控件的基础上 加上  runat="server" 

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

参考其他资料是这样说的: 当ASP.NET 网页执行时，会检查标注有无runat 属性，如果标注没有设定，那么Html标注就会被视为符串，并被送到字符串流等待送到客

户端，客户端的浏览器会对其进行解释；如果Html标注有设定runat="server" 属性，Page 对象会将该控件放入控制器，服务器端的代码就能对其进行控制，

等到控制执行完毕后再将Html服务器控件的执行结果转换成Html标注，然后当成字符串流发送到客户端进行解释。 好处就是  在cs后台，

能直接通过html服务器控件的ID.Value.ToString()这样的方式来访问,并且html服务器控件可以保存状态值,不会提交后没了

           例如 <input id="Text1" type="text"   runat="server" />

<input id="html_Sbutton" type="button" value="html服务器控件"  runat="server"   onserverclick="test"  

onclick="return html_Sbutton_onclick()," />

这个html服务器控件,最后生成到网页客户端的代码是

<input name="html_Sbutton" type="button" id="html_Sbutton" value="html服务器控件" 

onclick="return html_Sbutton_onclick(), __doPostBack('html_Sbutton','')" /></div>

可以看到,在客户端的onclick多生成了一个 _doPostBack,html服务器控件就是靠提交这个来和服务器端交互的，会先执行客户端的js，再执行doPostBack，但是

要注意的是,在asp.net代码里面编写onclick的时候,一定要加上一个,或则是;  这样JS会被当成一句话来执行,如果你想先在客户端判断然后再提交到服务器,是不可行

的,即使你在js里面 return false 也是不行的。但是可以通过web服务器控件的onclientclick来做这样的验证

function html_Sbutton_onclick() //想通过html服务器控件的客户端js来先验证本地,再提交服务器是不可行的

{

    if(confirm("html服务器控件是否提交")==false)

    {

        return false;  //完全不起作用,一样会被提交上去

    }

    else

    {

        return true;

    }

}

 

3：web服务器控件  

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事件，点击此按钮页面会发回服务器端，并在.cs里面执行test(object sender, EventArgs e)方法。

    <asp:Button ID="Button2" runat="server" Text="Button" />是Asp.net服务器控件，并且我们没有为其定义click，但是我们点击时，页面也会发回到服务器端。
    由此可见：Html控件和Html服务器控件的事件是由页面来触发的，而Asp.net服务器控件则是由页面把Form发回到服务器端，由服务器来处理。

          例如

<asp:Button ID="webButton" runat="server" onclick="webButton_Click" Text="web服务器控件"  OnClientClick="return web_Test()"/>

这段代码最后生成的html为

<input type="submit" name="webButton" value="web服务器控件" onclick="return web_Test();" id="webButton" />

我们可以在客户端先判断客户的条件,例如是否点击允许注册协议, 再来提交到服务器

 

function web_Test()             //可以通过web服务器控件的客户端js来先验证本地,再提交是可以的

{

    if(confirm("web服务器控件是否提交")==false)

    {

        return false;

    }

    else

    {

        return true;

    }

}

======================================   下面是一些前辈的总结   =========================================

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) {
        i    f (!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()"这样的话就只能执行第一个函数而第二个函数就不能执行,也就是你后面的_doPostBack()不执行了,那么也不提交了.

如果用 onclick="return DeleteCheck(this)，_doPostback()"是指2个函数同时都要执行没有影响,也就是不管你前面的js是否是return false或者是return true都会提交(相当于一条语句)。
    2、asp:button中的onclientclick事件生成后就变成了客户端的onclick事件了,类型变成了type="submit".而服务器端事件的onclick 是通过提交/发送到服务器端执行的。
    3、LinkButton不定义onclick事件，它会自动的生成下面代码发送到服务器端。 href="javascript:__doPostBack('LinkButton1',' ')"