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 [email protected] and [email protected]";
        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用于客户端，

未完待续！！！！！！！

时间： 2024-10-27 13:36:29

WebForm（二）——控件和数据库连接方式的相关文章

Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..

Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid App为什么会兴起编辑 1 1.2. 如何实现网页语言与程序语言的混合编辑 2 1.2.1. 多View混合型 2 1.2.2. 单View混合型 2 1.2.3. Web主体型 2 1.3. Hybrid App的瓶颈与未来编辑 3 2. Web App.Hybrid App.Native APP对比

DevExpress XtraReports 入门六 控件以程序方式创建一个 交叉表 报表

原文:DevExpress XtraReports 入门六 控件以程序方式创建一个 交叉表 报表 本文只是为了帮助初次接触或是需要DevExpress XtraReports报表的人群使用的,为了帮助更多的人不会像我这样浪费时间才写的这篇文章,高手不想的看请路过 本文内容来DevExpress XtraReports帮助文档,如看过类似的请略过. 废话少说 开始正事 在继续本示例之前,要把所有 必需的程序集 添加到项目的 引用 列表中,并且把一个按钮拖放到窗体上. 然后,以下列方式接管此按钮的

C#-Xamarin的Android项目开发(二)——控件应用

相信我,这不是一篇吐槽文章.... 基础控件 Android的控件和控件样式非常特别,它是一种内联特别高的设计模式,换句话说,它是非常烂的设计.... 但在这种特别的关系里还是有一定的规律的,下面我们一起来看看控件的使用方式. 首先我们定义一个ImageButton,如下: <ImageButton android:src="@drawable/toolbar_upload_photo_normal" android:layout_gravity="right|cent

webform简单控件和复合控件

简单控件: label:标签控件用于显示文本信息,用来获取或设置指定在label控件上显示的文字. 属性: text:获取或设置控件的文本内容. font:获取或设置控件的文本字体. forecolor:获取或设置控件中文本的颜色. bordercolor:获取或设置控件的边框颜色. borderstyle:获取或设置控件的边框样式. <asp:Label ID="Label4" runat="server" Text="Label">

WebForm 常用控件

一.简单控件 1.Label(作用:显示文字) Web中: <asp:Label ID="Label1" runat="server" Text="Label" BorderColor="Black" BorderStyle="Solid" BorderWidth="5px"></asp:Label> 编译完成后的元素时span(html) <span id

自定义圆角图片控件（Xfermode方式）

苹果都放弃自己的棱角了... 看惯了方方正正的图片,乍一看到圆角图片觉得挺漂亮的.可当满世界都是圆角图片的时候,我又开始怀念那些棱角了~之前仓促的写过一个,今天拿过来又修改了一下,现在贴在这里,以方便以后ctrl+c.ctrl+v~~~~~ 一.目标 自定义一个图片控件,有圆形和圆角两种选择.控件的行为和ImageView一致! 二.思路 扩展ImageView控件,重写其onDraw方法.一开始还想重写onMeasure方法,如果显示圆形图片强制宽高相等,没能行得通(代码中会说明).圆角图片以

VS2017移动开发（C#、VB.NET）——Numeric控件的使用方式

Visual Studio 2017移动开发 控件介绍和使用方式:Numeric控件 Smobiler开发平台,.NET移动开发 一.          样式一 我们要实现上图中的效果,需要如下的操作: 从工具栏上的"Smobiler Components"拖动一个Numeric控件到窗体界面上 修改Numeric的属性 BackColor属性 设置控件的背景色,默认设置为"White",如图1: 图 1 若将该属性设置为"128, 255, 255&qu

webform简单控件和Repeater的使用

(一) <%@ %> - 这里面写一些声明和引用的 <%  %> - 编写C#代码的 <%= %> - 往界面上输出一个变量的值 <%# %> - 在Repeater数据展示中使用 (二)Repeater  数据展示 1.HeaderTemplate ---  先执行,执行一次 FooterTemplate --- 后执行,执行一次 ItemTemplate --- 在Header之后执行,有多少条数据绑定就执行多少次 AlterNatingItemTemp

WebForm 简单控件、复合控件

简单控件: Label:被编译成span 样式表里设置lable的高度:  display:inline-block; Text  --文本 ForeColor  --字体颜色 Visible  --权限时使用 CssClass  --样式表 Literal:无任何元素,只会在其位置上将Text内容完全展示出来 重要属性只有:Text  --文本 TextBox: 不一定被编译成什么元素 属性:Text  --文本   TextMode - 它设置为什么值,被编译后将会是不同的一些表单元素 Si