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


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

    1. 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')";

    1. 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     }


     

  • 相关阅读:
    【JQuery Easy UI】后台管理系统的简单布局分享
    Effective JavaScript Item 10 避免使用with
    娓娓道来c指针 (4)解析c的声明语句
    打造敏捷外包团队的高度自主与自我学习的生态系统
    LeetCode --- Count And Say
    RAD Studio XE8 技术研讨会讲义与范例程序下载
    SpringMVC工作原理
    SpringMVC 学习笔记(十一) SpirngMVC执行流程
    转 jeecg3.5中多数据源的配置
    浅谈JEECG多数据源的使用
  • 原文地址:https://www.cnblogs.com/hanyinglong/p/2652288.html
Copyright © 2020-2023  润新知