HTML控件、HTML服务器控件和Web控件的区别

HTML控件、HTML服务器控件和Web控件的区别

1. 定义：
HTML控件：HTML规范中定义的各种标签。
HTML服务器控件：System.Web.UI.HtmlControls命名空间下的控件类。
Web控件：System.Web.UI.WebControls命名空间下的控件类。

2. 在网页中的声明：

//HTML控件：
<input id="Button1" type="button" value="button" />
//HTML服务器控件：在HTML控件的基础上添加runat属性。
<input id="Button2" type="button" value="button" runat="server" />
//Web控件：
<asp:ButtonID="Button3" runat="server" Text="Click Me" />

3. 运行环境：
HTML控件：只能运行在客户端，通过JavaScript等脚本语言来控制。
HTML服务器控件：运行在服务器端。
Web控件：运行在服务器端。

 4. 运行方式：

HTML控件：响应客户端的事件，客户端事件不会提交给服务器。比如点击按钮改变某个文本的内容：

<scripttype="text/javascript">  
    function ChangeText(){      <!—改变文本框内容-->       
        document.getElementById("demo").value="Text Change";
    }
</script>
<input type="text" id="demo" />
<input type="button" value="Click Me" onclick="ChangeText()"/>

HTML服务器控件、Web控件：客户端事件提交到服务器，服务器脚本运行结束后把结果返回给客户端。

HTML服务器控件：

//JavaScript脚本代码
<script runat="server">
    void button2_click(object sender, EventArgs e) {
        TextBox1.Text ="I'mChanged;";
    }
</script>
//HTML代码
<input id="Button2" type="button" value="button" runat="server" onserverclick="button2_click"/>

Web控件：

//C#事件代码
protected void Button1_Click(object sender,EventArgs e) {
    TextBox1.Text ="I'mChanged;";
 }
//HTML代码
<asp:ButtonID="Button1" runat="server" Text="ClickMe" onclick="Button1_Click"/>

注意：区别HTML控件、HTML服务器控件和Web控件调用方法的事件类型。
HTML控件只能调用客户端的脚本代码。如：onclick="ChangeText ()"且方法名的必须加括号，即使参数个数为0。
HTML服务器控件也可以调用客户端脚本代码。如果调用客户端脚本代码：onclick=”FuncName()”；如调用服务端代码：onserverclick=”FuncNmae”（如果函数没有参数，可以不添加括号）
Web控件也可以调用客户端脚本代码。如：

//先声明客户端脚本代码：
<script type="text/javascript">
    function ChangeTextBox2(){           
        document.getElementById("TextBox2").value = "I'm Changed;";                 
    }
</script>

在Web页面初始加载事件中添加客户端响应事件的脚本方法：

protected void Page_Load(object sender,EventArgs e)  {
    Button1.Attributes.Add("onclick","ChangeTextBox2();");
}

onclick特性属于控件未公开的属性，需要使用Attribute集合(1)。

按钮事件的onclick、onserverclick区别：

onclick：调用客户端事件。

onserverclick：调用服务端事件。

 

按钮的点击事件与服务器的交互：
HTML按钮单击事件：在Form控件中如果是按钮type类型是submit，会向服务器提交表单信息。其它情况下默认只会响应客户端脚本。
HTML服务器按钮单击事件：runat属性声明为server，且调用服务器端脚本代码，则单击时会向服务器提交数据。
Web控件：只要单击按钮，都会向服务器提交数据；
（待补充内容：提交数据的类型：GET/POST）

 参考资料：

1ASP.NET 4 高级程序设计 4.2.5章节。