WebForm 常用控件

一、简单控件

1、Label（作用：显示文字）

Web中：

<asp:Label ID="Label1" runat="server" Text="Label" BorderColor="Black" BorderStyle="Solid" BorderWidth="5px"></asp:Label>

编译完成后的元素时span（html）

<span id="Label1" style="display:inline-block;border-color:Black;border-width:5px;border-style:Solid;">Label</span>

属性：①BackColor：控件背景色；

②BorderColor：控件边框颜色；

③BorderStyle：控件边框样式；

④BorderWidth：控件边框宽度

2、Literal（作用：显示文字）
Web中：

<asp:Literal ID="Literal1" runat="server" Text ="编译后不会形成什么元素"></asp:Literal>

编译后不会形成什么元素（一般用来后台输出js代码）

</div>

        编译后不会形成什么元素

3、TextBox（文字输入框）

属性：①TextMode：文本矿的行为模式，有以下几种模式：

★默认SingleLine：单行。

Web中：

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

编译后：

<input name="TextBox1" type="text" id="TextBox1" />

★Password：密码框

Web中：

<asp:TextBox ID="TextBox1" runat="server" TextMode="Password"></asp:TextBox>

编译后：

<input name="TextBox1" type="password" id="TextBox1" />

★Multiline：文本域

Web中：

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>

编译后textarea：

<textarea name="TextBox1" rows="2" cols="20" id="TextBox1">

②warp：换行（true：换行；false：不换行）

③Enabled：控件启用状态

④Readonly：是否可以更改控件中的文本

⑤Maxlength：限制最长长度；比如：密码限制多少位，就可以更改此属性

4、按钮类

（1）Button：

Web中：

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

编译后submit：

<input type="submit" name="Button1" value="Button" id="Button1" />

属性：Onclintclick：比如：在onclintclick后面加上alert("nihao");
编译后是：

<input type="submit" name="Button1" value="Button" onclick="alert(&quot;nihao&quot;);" id="Button1" />

注：

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick='if(confirm("是否要提交？")){return false;}' />

Confirm()：

confirm() 方法用于显示一个带有指定消息和OK 及取消按钮的对话框。

　　如果用户点击确定按钮，则confirm() 返回true。如果点击取消按钮，则confirm() 返回false。

　　在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用confirm() 时，将暂停对JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

　　下面我们通过这两个小例子，来了解一下它的使用方法吧：

<head>

<title>confrim 的使用方法</title>

<script type="text/javascript">

function clear1()

{

 if(confirm("确定要清空数据吗？"))

 {

 document.main.text1.value="";

 }

}

</script>

</head>

<boty>

<form name="main">

<input type="text" name="text1"/>

<input type="button" name="submit" value="数据清空" onclick="return clear1()"/>

</form>

</body>

confrim 的使用方法

（2）ImageButton：图片按钮
属性同Button类似，多以个ImageUrl属性，此属性用于存放图片地址。

（3）LinkButton：被编辑成超链接模样的按钮，

注：①HyperLink：超链接控件（不经常用此方式见超链接）

②边框注意：边框颜色——边框样式——边框粗细

二、复合控件

首先建两个类，下面的复合控件将会用到！

实体类：

/// <summary>

/// Nation 的摘要说明

/// </summary>

public class Nation

{

    public Nation()

    {

        //

        // TODO: 在此处添加构造函数逻辑

        //

    }

    private string _NationCode;

    /// <summary>

    /// 民族编号

    /// </summary>

    public string NationCode

    {

        get { return _NationCode; }

        set { _NationCode = value; }

    }

    private string _NationName;

    /// <summary>

    /// 民族名称

    /// </summary>

    public string NationName

    {

        get { return _NationName; }

        set { _NationName = value; }

    }

}

数据访问类：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data.SqlClient;

/// <summary>

/// NationData 的摘要说明

/// </summary>

public class NationDA

{

    SqlConnection conn = null;

    SqlCommand cmd = null;

    public NationData()

    {

        conn = new SqlConnection("server=.;database=Data0617;user=sa;pwd=123");

        cmd = conn.CreateCommand();

    }

    /// <summary>

    /// 返回全部Nation表数据集合

    /// </summary>

    /// <returns></returns>

    public List<Nation> Select()

    {

        List<Nation> list = new List<Nation>();

        cmd.CommandText = "select *from Nation";

        conn.Open();

        SqlDataReader dr = cmd.ExecuteReader();

        if (dr.HasRows)

        {

            while (dr.Read())

            {

                Nation n = new Nation();

                n.NationCode = dr["NationCode"].ToString();

                n.NationName = dr["NationName"].ToString();

                list.Add(n);

            }

        }

        conn.Close();

        return list;

    }

（一）DropDownList：下拉列表框

Web显示：

<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>

编译后select：

<select name="DropDownList1" id="DropDownList1">

</select>

1、给DropDownList写入数据（两种方法）——放在Page_Load中
法一：与winform中给下拉表框填数据类似（DataSource）

 protected void Page_Load(object sender, EventArgs e)

    {

        DropDownList1.DataSource = new NationData().Select();//数据源指向

        DropDownList1.DataTextField = "NationName";//显示字段绑定

        DropDownList1.DataValueField = "NationCode";//隐藏字段绑定

        DropDownList1.DataBind();  

    }

法二：Foreach遍历，同时加上默认选中

 protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            List<Nation> Nlist = new NationData().Select();

            foreach (Nation n in Nlist)

            {

                ListItem li = new ListItem(n.NationName, n.NationCode);

                if (li.Value == "N003")

                {

                    li.Selected = true;

                }

                DropDownList1 . Items.Add(li);

            }

        }

    }

编译后显示：

<select name="DropDownList1" id="DropDownList1">

    <option value="N001">汉族</option>

    <option value="N002">满族</option>

    <option selected="selected" value="N003">藏族</option>

    <option value="N004">彝族</option>

</select>

注：加一个Button和Label，点击按钮时，将取到的value或text显示在label上。下面用到

2、取DropDownList的Value或者text（只能取一条数据的value或text）

void Button1_Click(object sender, EventArgs e)

    {

        Label1.Text = DropDownList1.SelectedItem.Value;

        //Label1.Text = DropDownList1.SelectedItem.Text;

    }

3、取多条数据（ListBox控件）

ListBox控件（此控件可以取一条或多条数据）——编译后也是select（下拉列表框）
属性：SelectionMode（列的选择模式）——single：单行，只单选；Multiple：多行，可多选。

ListBox绑定数据的方法同DropDownList一样。

ListBox取数据的方法：

void Button1_Click(object sender, EventArgs e)

    {

        string end = "";

        foreach (ListItem li in ListBox1.Items)

        {

            if (li.Selected)

            {

                end += li.Text + " - " + li.Value + ",";

            }

        }

        Label1.Text = end;

    }

（二）CheckBoxList：多选列表

<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatLayout="UnorderedList"></asp:CheckBoxList>

属性：①RepeatColumns：一行最多显示多少个数据

②RepeatDirection——Vetical：垂直显示； Horizontal：水平显示

④RepeatLayout：Table → 用table布局

　　　　　　　　 Flow → 用span布局

　　　　　　　　 UnorderedList → 无序列表

　　　　　　　　 OrderedList → 有序列表

用法同DropDownList和ListBox！

（三）RadioButtonList

<asp:RadioButtonList ID="RadioButtonList1" runat="server"></asp:RadioButtonList>

属性同CheckBoxList类似，用法同DropDownList和ListBox！

★控件中，name用于服务端， id用于客户端

巴特西

WebForm 常用控件

最新文章

热门文章