前言:从这篇博客我们开始学习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 }