HTML服务器控件介绍

最新推荐文章于 2018-10-25 17:36:39 发布

txl816

最新推荐文章于 2018-10-25 17:36:39 发布

阅读量1.9k

点赞数

分类专栏： ASP.net 文章标签：服务器 html asp.net server javascript winform

ASP.net 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

服务器端表单
在此之前我们见到的表单都是如下格式：

<form action="接收数据页面" method="post">

并且我们都是利用的HTML控件。现在我们要介绍服务器端表单，服务器端表单与前面的表单相比，多了一个runat=”server”标记，如下：

<form id="form1" runat="server">

在服务器端表单里可以不用指定action属性，表示由当前页面处理，也可以不指定method属性，默认为post方式提交表单。在服务器端表单里，我们不光可以使用HTML控件，还可以使用HTML服务器控件，还可以使用asp.net控件（asp.net控件稍后会专门花篇幅介绍）。
另外需要注意的是，在一个asp.net页面中可以有多个不带runat=”server”标记的表单，但是只能有一个服务器端表单。

HTML控件
HTML服务器控件与普通服务器控件不同的是：在普通HTML控件中加上了一个id属性和一个runat=”server”标记。如下就是一个HTML服务器控件：

<input type="text" runat="server" id="txtUserName" />

HTML服务器控件有几个限制：
在整个asp.net页面中这个控件id的必须唯一，并且HTML服务器控件只能放在HTML服务器表单中。因为一个asp.net页面只能有一个服务器表单，所以说在服务器表单中控件的id值必须唯一，因为我们在编程的时候通过这个id来访问HTML服务器控件。如果不唯一就会报错，如下：

下面就是一个使用了HTML服务器控件并且能正确运行的表单：

 
 <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>服务器表单和HTML服务器控件</title> 
</head> 
<body> 
<form runat="server"> 
<input type="text" runat="server" id="txtUserName" /> 
<input type="password" runat="server" id="txtPassword" /> 
<input type="submit" runat="server" id="btnOK" value="提交" /> 
</form> 
</body> 
</html>
 

这个页面在浏览器端的HTML源代码如下：

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>服务器表单和HTML服务器控件</title> 
</head> 
<body> 
<form name="ctl00" method="post" action="serverform.aspx" id="ctl00"> 
<div> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTQ0MjI5MTUzZGR1mFZ52ODFgAKe7Qx9/67qMGFJCA==" /> 
</div> 
 
<input name="txtUserName" type="text" id="txtUserName" /> 
<input name="txtPassword" type="password" id="txtPassword" /> 
<input name="btnOK" type="submit" id="btnOK" value="提交" /> 
 
<div> 
 
 <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKIpeT6DgKl1bKzCQK1qbSRCwLdkpmPAcJ7Zy/C66ypRIq49nr3hQNayqwk" /> 
</div></form> 
</body> 
</html>
 

我们可以看到在客服端得到的HTML代码中都是标准的HTML代码，我们的文本框和密码框及服务器端提交按钮（因为它在服务器代码里也有runat=”server”标记）变成了如下代码：
<input name="txtUserName" type="text" id="txtUserName" />
<input name="txtPassword" type="password" id="txtPassword" />
<input name="btnOK" type="submit" id="btnOK" value="提交" />
也就是，所有的服务器控件经过服务器运行之后都会变成标准的HTML控件。这样我们可以得出一个结论：如果我们的控件功能本来就很简单，我们就可以直接使用HTML控件，这样就可以减轻服务器的负担，提高运行效率。另外，在上面的代码中多了一些以前我们没有见过的部分：
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTQ0MjI5MTUzZGR1mFZ52ODFgAKe7Qx9/67qMGFJCA==" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKIpeT6DgKl1bKzCQK1qbSRCwLdkpmPAcJ7Zy/C66ypRIq49nr3hQNayqwk" />
因为服务器会保存服务器控件的状态和属性，所以它会利用一些隐藏域来保存这方面的信息，这部分的内容是经过Base64编码的。

服务器控件的好处是我们可以动态在代码中动态控制服务器控件的属性，对于上面的代码我们改造如下：

 
 <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>服务器表单和HTML服务器控件</title> 
</head> 
<script runat="server"> 
protected void btnOK_Click(Object Src, EventArgs E) 
{ 
Response.Write("用户名："+this.txtUserName.Value); 
  Response.Write("密码："+this.txtPassword.Value); 
} 
</script> 
<body> 
<form runat="server"> 
<input type="text" runat="server" id="txtUserName" /> 
<input type="password" runat="server" id="txtPassword" /> 
<input type="submit" runat="server" id="btnOK" value="提交" onserverclick="btnOK_Click" /> 
</form> 
</body> 
</html>
 

上面代码中多了“<script runat="server"></script>”，并且提交按钮多了一个onserverclick="btnOK_Click"属性。在“<script runat="server"></script>”标记中我们写了一个protected void btnOK_Click(Object Src, EventArgs E)方法，这个方法符合System.EventHandler委托的标准。这个方法有两个参数，第一个表示由什么控件激发了这个事件，第二个参数表示事件发生时的一些相关信息。
在protected void btnOK_Click(Object Src, EventArgs E)方法中我们利用了类似WinForm中操作控件的方式来操作我们的服务器控件，这也就是为什么asp.net页面成为WebForm的原因。在这个方法里我们获取了控件的值，并最后将提交按钮禁用。
提交按钮的onserverclick属性值表示当这个按钮点击后由服务器上的哪个方法进行处理，这个方法要满足System.EventHandler委托的定义，这里我们写了btnOK_Click这个方法名。
这个页面初次运行的效果如下：

然后我们分别输入”zhoufoxcn”和”123456”，提交表单之后的效果如下：

我们看到在当前页面输出了表单控件的值，并且最后提交按钮呈现灰色状态，也就是被禁用了。
上面例子中我们确实就像在WinForm一样控制asp.net控件，非常方便。其实在asp.net开发中，用的最多的是asp.net服务器控件，而不是HTML服务器控件，asp.net控件提供了比HTML服务器控件更多的灵活性，以后的文章中会继续探讨asp.net控件。

实际上不管是HTML控件还是HTML服务器控件在asp.net里面用的都不是太多，介绍这部分主要是提及一些被Microsoft Visual Studio 2005隐藏的细节，还有其它动态页面与asp.net页面进行交互等问题。

后记：写完这篇文章已经是2008年9月18日临晨两点了，最近工作比较忙，整个系列下来可能会有30篇左右，我会在工作之余继续酝酿。同时也在考虑如何安排更合理，并且尽可能地将实际项目中应该注意到的一些问题贯穿进来。比如这次文章中讲到了SQL注入问题，以后在ADO.NET部分我会讲解如何防止SQL注入。希望大家多多提宝贵意见。

周金桥于2008年9月18日星期四 2:03

看了老周的文章我觉得我们既然已经用惯了JavaScript控制HTML控件格式属性，就不要用HTML服务器端控件了，它还占用服务器资源，HTML服务器端控件说白了就是用C#控制控件格式属性,HTML控件说白了就是用JavaScript控制控件格式属性，我建议为了

1、程序的可读性

2、少用服务器资源

3、简化后台代码，推崇JavaScript

4、便于初学者区分、学习

ASP.net可以取掉一些HTML服务器端控件，微软既然大力推广JavaScript了，那么就应该取掉一些HTML服务器端控件（与HTML控件相冲突）我不提倡用HTML服务器端控件

文章来源：http://blog.csdn.net/zhoufoxcn

txl816

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML服务器控件介绍

服务器端表单在此之前我们见到的表单都是如下格式： form action="接收数据页面" method="post">并且我们都是利用的HTML控件。现在我们要介绍服务器端表单，服务器端表单与前面的表单相比，多了一个runat=”server”标记，如下：form id="form1" runat="server">在服务器端表单里可以不用指定acti
复制链接

扫一扫