你的位置:首页 > ASP.net教程

[ASP.net教程]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>

confirm()使用方法

(2)ImageButton:图片按钮
        属性同Button类似,多以个ImageUrl属性,此属性用于存放图片地址。

(3)LinkButton:被编辑成超链接模样的按钮,

 

:①HyperLink:超链接控件(不经常用此方式见超链接)

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


 

二、数据库连接样式

例:做一个登录页面,连接数据库,判断是否登录成功。

实体类:

/// <summary>/// Users 的摘要说明/// </summary>public class Users{  public Users()  {    //    // TODO: 在此处添加构造函数逻辑    //  }  private string _UserName;  /// <summary>  /// 账号  /// </summary>  public string UserName  {    get { return _UserName; }    set { _UserName = value; }  }  private string _Parssword;  /// <summary>  /// 密码  /// </summary>  public string Parssword  {    get { return _Parssword; }    set { _Parssword = value; }  }  }

实体类

数据访问类:

/// <summary>/// UsersDA 的摘要说明/// </summary>public class UsersDA{  SqlConnection conn = null;  SqlCommand cmd = null;  public UsersDA()  {    conn = new SqlConnection("server=.;database=mydb;user=sa;pwd=128712jdhlys");    cmd = conn.CreateCommand();  }  /// <summary>  /// 用户验证  /// </summary>  /// <param name="uname">用户名验证</param>  /// <param name="pwd">密码验证</param>  /// <returns></returns>  public bool Select(string uname, string pwd)  {    bool yanzheng = false;    cmd.CommandText = "select * from Users where UserName=@uname and Password=@pwd";    cmd.Parameters.Clear();    cmd.Parameters.Add("@uname",uname);    cmd.Parameters.Add("@pwd", pwd);    conn.Open();    SqlDataReader dr = cmd.ExecuteReader();    if (dr.HasRows)    {      yanzheng = true;    }    conn.Close();    return yanzheng;  }}

访问类

:●创建的类要放在App_Code文件夹中,一般不需要自己创建,建类时会有提示。

      ●web没有命名空间

Web中代码:

<body>  <form id="form1" runat="server">     账号:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />    密码:<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox><br />    <asp:Button ID="Button1" runat="server" Text="登录" />    <asp:Literal ID="Literal1" runat="server"></asp:Literal>  </form></body>

.aspx
public partial class _Default : System.Web.UI.Page{  protected void Page_Load(object sender, EventArgs e)  {    Button1.Click += Button1_Click;//登录按钮事件  }  void Button1_Click(object sender, EventArgs e)  {    string zh = TextBox1.Text;    string mm = TextBox2.Text;    bool yanz = new UsersDA().Select(zh, mm);    //法一,无弹窗    if (yanz)      Literal1.Text = "登陆成功!";    else      Literal1.Text = "用户名或密码错误!";    //法二,有弹窗    //if (yanz)    //  Literal1.Text = "<script>alert('登陆成功!')</script>";    //else    //  Literal1.Text = "<script>alert('用户名或密码错误!')</script>";  }}

.aspx.cs


三、复合控件

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

实体类:

/// <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; }  }}

Nation

数据访问类:

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;  }

NationDA

 

(一)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();   }

DataSource

法二: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);      }    }  }

foreach

编译后显示:

<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;  }

listbox取数据

(二)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!


四、http协议无状态性

每一次事件提交,都会将页面刷新,刷新就必走Load事件,进而出现重复绑定的情况

解决方法:判断页面是第一次加载,还是由已经加载出来的页面中的某个按钮执行了提交返回回来的

if (!IsPostBack)

{     load事件中95%的代码都要写在这里面,委托点击事件除外!    }

 


后注:★控件中,name用于服务端 , id用于客户端,

 

未完待续!!!!!!!