ASP.NET高级编程基础第十二篇—服务器控件

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

前言：从这篇博客我们开始学习asp.net的服务器控件，虽然现在的IT界对asp.net的控件有好多种态度，但是任何一件事物或者事情只要发生都是有其发生的必然性，我们不能否定这种控件，只是看这种控件使用在那种情况下，下面我们就详细的说明一下这些控件的使用以及它们的原理。

ASP.NET服务端基本控件介绍

(1) ASP.NET服务端控件是ASP.NET对HTML的封装，在C#代码中就可以用txt.Text=’韩迎龙’这种方式来修改input的值，ASP.NET会将服务端控件渲染成HTML代码输出给浏览器，服务端控件是ASP.NET非常吸引初学者，非常容易上手的东西，也是最被人诟病的东西，物尽其用，服务端控件在内网系统，互联网系统的后台部分等访问频率不高的地方用还是很合适的。

(2) 所有的ASP.NET大部分是从Control，WebControl类继承的，几乎所有的成员有：

1) clientID，控件在客户端的ID,控件在服务端的ID不一定等于客户端HTML中的ID，比如：在ListView等控件的模版中，因此如果要在客户端通过JavaScript，Dom，Jquery的getElementById，$(“#Id”)来操作控件的话最好不要直接写服务端的ID，而是$(‘#<%=txt.ClinetID%>’)。用Jquery事件设置鼠标移到控件上和从控件移开的不同样式，在用户控件中就可以看到ClientID和ID的不同。

1) 拖放一个TextBox控件，鼠标放到控件变红，离开恢复原状

 1     <script type="text/javascript">
 2 
 3         function Myonload() {
 4 
 5             document.getElementById('<%=txtRed.ClientID %>').onmouseover = function () {
 6 
 7                 this.style.background = 'Red';
 8 
 9             }
10 
11             document.getElementById('<%=txtRed.ClientID %>').onmouseout = function () {
12 
13                 this.style.background = '';
14 
15             }
16 
17         }
18 
19 </script>
20 
21 <body onload="Myonload()">
22 
23 <asp:TextBox  ID="txtRed" runat="server"></asp:TextBox>

2) 新建一个MyUserCtrl.ascx用户控件，拖放一个TextBox和Button控件，另一个写监听事件：

<script type="text/javascript">

document.getElementById('<%=btnOK.ClientID %>').OnClick = function ()

{

        document.getElementById('<%=txtShow.ClientID %>').value = "Hello,Kencery";

    }

</script>

<asp:TextBox ID="txtShow" runat="server"></asp:TextBox>

<asp:Button ID="btnOK" runat="server" Text="Button" />

注：将用户控件拖放到.aspx项目中进行验证

2) Visible属性，控件的是否可见，如果Visible=False是不会渲染到HTML中的，这和在HTML中给元素style.display=’none’效果是不一样的。

3) CssClass属性，控件的样式名，就是HTML中控件的class属性。

注释：新建一个WebForm的项目，写入如下代码：

    <style type="text/css">

        .waring

        {

            color:Red;

        }

    </style>

<asp:TextBox runat="server" ID="txtColor" CssClass="waring"></asp:TextBox>

注：拖放一个TextBox控件，设置CssClass属性为”waring”，也可以单独修改BackColor,BorderStyle等属性，但是不建议这么做，因为会生成很多的内联样式，生成Html(尺寸大，不便于统一的修改)。

4) Attributes，用来设置控件的额外属性，和Dom中的SetAttribute，getAttribute是一样的。

注：在Default.aspx的Pege_Load中写入如下代码：

btnCancel.Attributes["a1"] = "3.jpg";

btnCancel.Attributes["onmouserover"] = "alert('Kencery')";

ASP.NET服务端基本控件

(1) Label控件，Text属性为显示文本，AssociatedControlID属性用来关联一个控件，如果为空的话会展示为一个span，如果指定为一个控件的ID，则会展示为一个HTML中的<Label>并且将for属性设置为被关联控件的ClientID。

注：拖放一个Label控件和TextBox控件，将Label控件的AssociatedControllID设置为关联TextBox。

(2) Literal控件也是展示一段文本，但是Literal控件不会渲染任何额外的标签，就是将Text属性展示出来即可。

(3) TextBox控件，文本框控件，TextMode属性取值Singleline，Multiple，Password吗，分别渲染为<input type=”Text”>，Textarea和<input type=”Password”>。当AutoPostBack属性为true的时候，用户焦点离开TextBox就会造成页面Post，实现原理就是讲ASP.NET原理时的AutoPostBack，TextChanged事件，文本框发生变化的时候事件触发ASP.NET中要提交表单的时候最好调用_doPostBack方法。

(4) RadioButton控件，渲染为<input type=”radio”>，通过GroupName属性进行分组。

(5) Button控件，OnClientClick属性，当用户点击按钮的时候在浏览器端执行的代码，注意：OnClientClick是字符串属性，写的代码是JavaScript代码，运行在浏览器端。

<asp:Button ID="btnDelete" runat="server" Text="删除" OnClientClick="return confirm('您真的要删除吗？删除不能恢复')" />

(6) LinkButton，用法和Button差不多，区别就是Button控件渲染为按钮，而LinkButton控件渲染为超链接，不要用LinkButton来实现普通的超链接，因为LinkButton的href为一段JavaScript代码，进行的是表单的post，无法”在新窗口中打开超链接”。和前面所说的”行删除”的那个例子中的Href为JavaScript的超链接原理一样。

(7) ImageButton控件也和Button控件差不多，只不过是显示为图片，渲染为<input type=”image”>。

(8) Button，LinkButton和ImageButton等控件都有CommandName,CommandArgument两个属性和Command事件，可以让多个按钮控件共享一个Command事件处理函数，通过读取事件对象e的CommandName,CommandArgument两个属性读取被点击按钮上设置的这两个参数来执行不同的操作，例子：编辑删除多行数据，这种用法在ListView控件中用的最多。

注：新建一个表删除.aspx页面

 1     <div>
 2 
 3         <table>
 4 
 5             <tr>
 6 
 7                 <td>Kencery</td><td>23</td><td><asp:Button ID="btnDelete" runat="server"
 8 
 9                     Text="删除" CommandName="Remove" CommandArgument="Kencery"
10 
11                     oncommand="RemoveCommmand" /><asp:Button ID="btnEdit" runat="server"
12 
13                     Text="编辑" oncommand="RemoveCommmand" CommandArgument="Kencery" CommandName="Edit" /></td>
14 
15             </tr>
16 
17              </table>
18 
19         <asp:Label ID="lblShow" runat="server"></asp:Label>
20 
21     </div>

在aspx.cs页面中写入如下代码：

 1     protected void RemoveCommmand(object sender, CommandEventArgs e)
 2 
 3     {
 4 
 5         if (e.CommandName == "Remove")
 6 
 7         {
 8 
 9             string name = Convert.ToString(e.CommandArgument);
10 
11             lblShow.Text = name + "被删除了";
12 
13         }
14 
15         else if (e.CommandName == "Edit")
16 
17         {
18 
19             string name = Convert.ToString(e.CommandArgument);
20 
21             lblShow.Text = name + "被编辑了";
22 
23         }
24 
25     }

(9) Panel控件用来盛放一些控件，如果设定GroupingText属性，那么就渲染为<fieldset>标签，也就是GroupBox效果，否则渲染为Div。

注：拖放Panel控件设置GroupBox属性的值为高级设置

(10) HyperLink控件，超链接。和LinkButton不一样，不会向服务器端post，就是一个超链接。NavigateURL：连接地址，Text：显示文本。如果设定ImageUrl属性则会显示图片超链接。

(11) FileUpload控件，文件上传控件，渲染成<input type=”file” />。属性FileContent以流的形式获得上传的文件，FileName上传文件名，HasFile Bool值，表示用户是否选择的文件，SaveAs方法用于将文件保存到磁盘的指定位置，漏洞：文件上传漏洞(上传aspx)。只允许上传指定类型文件，上传文件夹不给执行权限。

注：拖放一个FileUpload和Button控件，将Button控件改为上传。双击Button

 1     protected void btnUpLoading_Click(object sender, EventArgs e)
 2 
 3     {
 4 
 5         if (flUploading.HasFile) //用户是否选择了文件
 6 
 7         {
 8 
 9             //Server.MapPath, VirtualPathUtility.ToAbsolute都可以
10 
11             string uploadPath = Server.MapPath("~/upload");
12 
13             //flUploading.FileName上传文件的哦文件名
14 
15             flUploading.SaveAs(uploadPath + flUploading.FileName);
16 
17         }
18 
19     }