zoukankan      html  css  js  c++  java
  • 常用的WebForm 控件

    首先回忆一下Html页中的12个表单元素

     1 1.文本类
     2      文本框 <input type="text" id="" name="" value="" />
     3      密码框 <input type="password" id="" name="" value="" />
     4      文本域 <textarea id="" cols="字符多少" rows="几行高"></textarea>
     5      隐藏域 <input type="hidden" name="" id="" value="" />
     6 2.按钮类
     7      提交按钮<input type="submit" disabled="disabled" value="提交" />
     8      重置按钮<input type="reset" value="" />
     9      普通按钮<input type="button" />
    10      图片按钮<input type="image" src="图片地址"/>
    11 3.选择输入
    12      单选按钮<input type="radio" name="" checked="checked" value=""/>
    13         name 的值用来分组 value提交给程序用 checked 设置默认选择项
    14      复选框组<input type="checkbox"  name="" value=""/>
    15      下拉列表<select name="" id="" multiple="multiple" size="1">
    16             <option value="">内容</option>
    17             <option selected="selected"></option>
    18             </select>
    19          multiple设置为多选 size=1为菜单>为列表selected 设置默认选择项
    20      文件上传<input type="file" />

    在Web端开发过程中控件

    文本类

    1.Label 控件

    1     作用: 用于在页面上显示文本 。
    2     语法: <asp:Label ID="控件名" runat="server" Text="显示的文本"></asp:Label>
    3     Label控件Text属性为显示文本。AssociatedControlID属性用来关联一个控件,如果为空的话会展示为一个<Span>,如果指定为一个控件的id,则会展示为一个HTML中的<Label>并且将for属性设置为被关联控件的ClientId。

    2.Literal

    1     语法:<asp:Literal ID="Literal1" runat="server"></asp:Literal>
    2     不渲染任何标签,设置Mode属性为Encode,避免xss攻击。
    3     Literal控件也是展示一段文本,但是Literal控件不会渲染任何额外的标签,就是将Text属性的值展示出来而已。

    3.TextBox控件

    1  语法: <asp:TextBox ID="TextBox1" PlaceHolder="请输入**内容" runat="server" TextMode="MultiLine"></asp:TextBox>
    2 设置TextMode的值改变他的样式   MultiLine  文本域  Password   密码框  Number选择数字
    6 PlaceHolder属性 给TextBox加上水印非常好用

    4.HiddenField控件 编译为隐藏域 值放在属性Value里面。 

    按钮类

    1 语法: <asp:Button ID="Button1" runat="server" Text="Button" /> 编译为submit
    2 语法:<asp:ImageButto ID="ImageButton1" runat="server" />      编译为image
    3 语法:<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton> 超链接类行的按钮

    选择输入类

     1 单选按钮
     2 语法:<asp:RadioButtonList ID="RadioButtonList1 runat="server"></asp:RadioButtonList>
     3 复选框组
     4 语法:<asp:CheckBoxList ID="CheckBoxList1" runat="server"></asp:CheckBoxList>
     5 下拉列表
     6 语法:<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
      能多选的下拉列表
      语法: <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
    7 页面中点击鼠标右键 选择查看代码编辑他的绑定数据,以DropDownList1为例代码结构如下: 8     DropDownList1.DataSource=数据源指向 9 DropDownList1.DataTextField= 显示的数据 10 DropDownList1.DataValueField= 后台数据 11 DropDownList1.DataBind();数据绑定

    文件上传

    语法;<asp:FileUpload ID="FileUpload1" runat="server"  accept=".jpg,.jpeg,.png" /> 
    它是用来选择要上传的文件,还需要一个确定按钮来将选中的文件上传到服务器上
    accept=".jpg,.jpeg,.png"限制可以选择的文件类型

    FileUpload优化使用功能

    1.防止重名,或是同一时间多个人同时上传同一名称文件 可以定义上传到路径名称来区分

    1 string path = "Uploads/" + DateTime.Now.ToString("yyyy年MM月dd日hh时ss分mm秒") + Request.Cookies["ures"].Value + FileUpload1.FileName;

    2.可以上传大文件 默认4MB=4096KB 

    扩容方法:

     Web.config中的system.web标记中加上  <httpRuntime maxRequestLength="扩大的长度" />

     1 <?xml version="1.0" encoding="utf-8"?>
     2 
     3 <!--
     4   有关如何配置 ASP.NET 应用程序的详细信息,请访问
     5   http://go.microsoft.com/fwlink/?LinkId=169433
     6   -->
     7 
     8 <configuration>
     9 
    10     <system.web>
    11       <compilation debug="false" targetFramework="4.0" />
    12       <httpRuntime maxRequestLength="70960" />
    13     </system.web>
    14 
    15 </configuration>

     注意!!!!

    不要扩的太大,因为如果多人同时上传大文件,可能会造成服务器内存溢出,导致服务器崩溃。

    3.超过上传要求的大小,阻止上传并提示文件过大 c#端限制如果文件超过了最大长度,C#端是限制不住的,会直接将程序崩溃 用Js端进行限制,代码如下

     1 document.getElementById("确定上传按钮ID").onclick = function () {
     2         //取出上传元素
     3         var fi1 = document.getElementById("FileUpload1");
     4         //判断是否有选中的文件
     5         if (fi1.value.length <= 0) {
     6             alert('请选择要上传的文件!');
     7             return false;
     8         }
     9         else {
    10             //验证选中的文件长度是否满足条件
    11             if (fi1.files[0].size > (1024 * 1024 * 10))
    12             {
    13                 alert('文件过大,不允许上传!');
    14                 return false;
    15             }
    16         }
    17     };
  • 相关阅读:
    Qt第一个小程序(使用vs2017开发)
    Qt资料大全
    Win10+MSVC2017+QT5.9.4开发环境
    小波去噪的基本知识
    RxJava Map操作详解
    Tomcat提示Null component
    章节目录
    BeanDefinition的载入和解析
    org.springframework.util.Assert
    使用Eclipse maven构建springmvc项目
  • 原文地址:https://www.cnblogs.com/fuze/p/6188186.html
Copyright © 2011-2022 走看看