B/S一些小知识及常用控件

一： B/S网页的运行

页面在设计的时候，本身就是一个类。在运行的时间，是一个对象。

其中aspx和aspx.cs是在同一个类下。

aspx是主要是负责界面，而aspx.cs主要是负责数据逻辑。

呈现：把页面上所有的控件对象，转化成HTML标签。  内存中的对象--->HTML

** 规范 **：

以后写代码的时候，在Page_Load方法中，99%的代码需要写在

  if (!IsPostBack)

  {

  }

IsPostBack——页面初始加载-false;表单提交加载-true

页面初始加载的情况：

1.地址栏中输入地址打开。

2.用超链接链到这个页面，或者代码 Response.Redirect()转过来的页面。

3.点击刷新按钮重新刷新。

1. 三个常用语句：

Response ：响应    从服务端--客户端

        Write("字符串")：向客户端页面输出一段文字，写出来的字符串在页面最上。

        Redirect("URL")：重定向，一般用来转页面

        End()：结束向客户端的输出

 

Request：请求    从客户端--服务端

        Request["名"]：获取客户端用post或get方式传递过来的数据。

        Request.Form["名"]：获取客户端用post方式传递过来的数据。

        Request.QueryString["名"]：获取客户端用get方式传递过来的数据。

 

Session ：会话——用来保存访问者状态。 一个会话中保存状态，这个状态只在这个会话中可用。

HTTP :无状态协议

例子：登录成功纪录下状态

  Session["uid"] = txtUID.Text;//登录的时候用Session纪录下登录者的UID，然后再跳转页面。

  Session["uid"].ToString();//之后的界面可以这样取出登录者UID

2. 防止跳过登录界面进入其他界面：

（1）在其他界面的Load里面写代码，判断是否登录;

  if (Session["uid"] == null)
    {
        Response.Redirect("Default.aspx");
    }

（2）做一个PageBase类派生自System.Web.UI.Page类，其他页面都派生自这个类，在这个类里重写OnLoad函数：

protected override void OnLoad(EventArgs e)
    {
        if (Session["uid"] == null)

        {
            Response.Redirect("Default.aspx");
        }
        base.OnLoad(e);
}

这样在加载每一个其他页面的时候都会事先判断一下是否登录，如果未登录则转向登录界面。

 

二： B/S常用控件：

1.1  Label 控件

父类WebControl，在呈现的时候，两边会呈现为span标签。

 属性：

   Width: (Unit)可设为像素，也可设为百分比

   Height: (Unit)可设为像素，也可设为百分比

   BackColor:（Color ）设置背景颜色

   ForeColor:（Color ）设置前景色

   BorderColor:（Color ）设置边框颜色

   BorderWidth:（Unit） 设置边框宽度

   BorderStyle:（BorderStyle ）设置边框样式

  字体属性Font，包含下面一些属性：

    Bold 加粗

    Italic 倾斜

    UnderLine 下划线

    OverLine 上划线

    StrikeOut 删除线

    Name: 字体

    Size: 大小

CssClass :  样式表的class名，多个控件可以设置为一个Class名，样式表添加样式方便

Text：标签上的文字

ToolTip : 鼠标放上去的气泡信息。

Enable：是否可用

Visible:是否可见

1.2  Literal也是一个标签：

     在呈现的时候，两边不会出现span标签。

2、TextBox控件：

拥有Label的所有属性。

    TextMode：文本框的呈现模式SingleLine-单行文本框，MultiLine-多行文本框，Password-密码框

    Rows：行数。只有TextMode=MultiLine时候起作用。

    Columns：列数，控制长度。

    Wrap：是否自动换行。

    MaxLength：最多输入多少个字符。只有TextMode=SingleLine/Password时起作用。

    ReadOnly：只读

3、 Button 控件

LinkButton 超链接模样的按钮

ImageButton 图片模样的按钮（ImageUrl属性）：

它们三个按钮拥有Label的所有属性。

 OnClientClick：按钮点击的时候，要执行的客户端脚本。如果说设置了此属性，在HTML代码中又添加了OnClick，则两个都执行。

例子：如何给控件加上JS 的脚本调用？

法一：直接在源代码中加上相应的JS事件，及脚本调用。

<asp:TextBox onblur="checkEmail()" ID="TextBox3" runat="server"></asp:TextBox>

法二：在Page_Load事件中，通过控件的Attributes属性加入相应的JS事件及脚本调用。  

 protected void Page_Load(object sender, EventArgs e)
     {
        TextBox3.Attributes.Add("onblur","return checkEmail()");
     }

法三：像按钮，它直接带有OnClientClick的脚本调用属性。

4、HyperLink超链接

拥有Label的所有属性。

    Text：超链接的文本

    NavigateUrl：超链接的地址，相当于href

    Target：超链接打开的位置

    ImageUrl：图片地址。如果设置此属性，则超链接会变成图片超链接，否则是文字超链接。

5、Image控件

拥有Label的所有属性。

ImageUrl：图片的地址

6、RadioButton控件：单选按钮

拥有Label的所有属性。

Text：文本

Checked：bool，是否被选中

GroupName：组名，将来被呈现为<input type=radio>中的name属性，设为一组。

7、CheckBox控件：复选框

拥有Label的所有属性。

    Text：文本

    Checked：bool，是否被选中

8、DropDownList下拉列表      //相似的控件ListBox,CheckBoxList,RadioButtonList

拥有Label的所有属性。

    （一）把数据填进去

    1.在界面中，手动一项项添加

    2.用代码逐项添加

       ListItem li = new ListItem("深圳","0755");
       DropDownList1.Items.Add(li);

    3.绑定

        MyDBDataContext context = new MyDBDataContext();
        var query = context.ChinaStates.Where(p=>p.ParentAreaCode == "37");
        DropDownList1.DataSource = query;
        DropDownList1.DataTextField = "AreaName";
        DropDownList1.DataValueField = "AreaCode";
        DropDownList1.DataBind();

      默认情况下，在绑定的时候，会把原有的内容给清空.

    （二）把选中的数据取出来

    Literal1.Text = DropDownList1.SelectedValue;
    Literal1.Text = DropDownList1.SelectedItem.Text + DropDownList1.SelectedItem.Value;
    int n = DropDownList1.SelectedIndex;
    Literal1.Text = DropDownList1.Items[n].Text + DropDownList1.Items[n].Value;

    （三）设定某一项的选中状态

    为下拉列表的SelectedIndex或SelectedValue属性赋值。

    DropDownList1.SelectedIndex = Convert.ToInt32(TextBox1.Text);
    DropDownList1.SelectedValue = TextBox2.Text;

属性：

Items：所有子项的集合

DataSource：数据源

DataTextField: 设置要显示的文字是哪个属性（字段）

DataValueField: 设置Value值是哪个属性（字段）

AppendDataboundItems：是否追加数据绑定项。true-绑定的时候，不清空原有的内容。false-绑定的进候，清空源有的内容。

SelectedIndex 选中项的索引

SelectedValue 选中项的值

SelectedItem 选中项

方法：

DataBind();//绑定数据

­

例子（1）：同意不同意控制按钮的可用

用两个RadioButton，不同意默认选中。

<asp:RadioButton ID="RadioButton1" onclick="tongyi()" runat="server" GroupName="aaa" Text="同意" />
<asp:RadioButton ID="RadioButton2" onclick="tongyi()" runat="server" Checked="True" GroupName="aaa" Text="不同意" />
<asp:Button ID="Button1" runat="server" Enabled="False" Text="下一步" />   

方式一：JS脚本：

       function tongyi() 
       {
            var btn = document.getElementById("Button1");
            var rd = document.getElementById("RadioButton1");
            if (rd.checked == true)
            {
                btn.disabled = false;
            }
            else {
                btn.disabled = true;
            }
        }

方式二：用C#语句来判断，需要设置RadioButton的AutoPostBack为True

    protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
    {
        if (RadioButton1.Checked)
        {
            Button1.Enabled = true;
        }
        else
        {
            Button1.Enabled = false;
        }
    }

9、ListBox——显示多个，选择多个。

     Items 项

    DataSource 数据源

    DataTextField 设置要显示的文字是哪个属性（字段）

    DataValueField 设置Value值是哪个属性（字段）

    SelectedValue 选中项的值

    SelectedItem 选中项

    SelectedIndex 选中项的索引

    AppendDataboudItem 是否追加数据绑定项。true-绑定的时候，不清空原有的内容。false-绑定的进候，清空源有的内容。

    SelectionMode：Single-单选；Multiple-多选

 

    获取选中项的值，多选的情况下需要遍历所有的项：

  foreach (ListItem li in ListBox1.Items)
    {
        if (li.Selected)
        {
            Literal1.Text += li.Value;
        }
    }

10、RadioButtonList——显示多个，选择1个。布局。

    Items 项

    DataSource 数据源

    DataTextField 设置要显示的文字是哪个属性（字段）

    DataValueField 设置Value值是哪个属性（字段）

    SelectedValue 选中项的值

    SelectedItem 选中项

    SelectedIndex 选中项的索引

    AppendDataboudItem 是否追加数据绑定项。true-绑定的时候，不清空原有的内容。false-绑定的进候，清空源有的内容。

    RepeatLayout：Table-用表格布局；Flow-用span布局。

    RepeatColumns：一行显示几个。

    RepeatDirection：布局方向。

11、CheckBoxList——显示多个，选择多个。布局。

    Items 项

    DataSource 数据源

    DataTextField 设置要显示的文字是哪个属性（字段）

    DataValueField 设置Value值是哪个属性（字段）

    SelectedValue 选中项的值

    SelectedItem 选中项

    SelectedIndex 选中项的索引

    AppendDataboudItem 是否追加数据绑定项。true-绑定的时候，不清空原有的内容。false-绑定的进候，清空源有的内容。

    RepeatLayout：Table-用表格布局；Flow-用span布局。

    RepeatColumns：一行显示几个。

    RepeatDirection：布局方向。

    获取选中项的值，多选的时候遍历所有项找选中的值：

    foreach (ListItem li in CheckBoxList1.Items)
        {
            if (li.Selected)
            {
               Literal1.Text += li.Value;
            }
        }

    设置那一项被选中：

    CheckBoxList1.SelectedIndex = -1;//清除原有状态。
        //设置选中状态。
        string s = TextBox1.Text;
        string[] spliters = s.Split('/');
        foreach(string key in spliters)
        {
            foreach (ListItem li in CheckBoxList1.Items)
            {
                if (li.Value == key)
                {
                    li.Selected = true;
                }
            }
        }

三： 三个案例：

案例一：添加员工

两段代码：

1.初始化民族下拉列表的代码。 

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            InfoDataContext context = new InfoDataContext();
            var query = context.Nation;
            //清空
            ddNation.Items.Clear();
            foreach(Nation data in query)
            {
                //造项，非绑定的方式
                ListItem item = new ListItem();
                item.Text = data.Name;
                item.Value = data.Code;
                //添加
                ddNation.Items.Add(item);
            }
        }
    }

2.添加按钮，向数据库添加数据的代码。

  protected void btnAdd_Click(object sender, EventArgs e)
    {
        //取数据
        string code = txtCode.Text;
        string name = txtName.Text;
        bool sex = Convert.ToBoolean( radSex.SelectedValue);
        string nation = ddNation.SelectedValue;
        DateTime birthday = Convert.ToDateTime( txtBirthday.Text);
        InfoDataContext context = new InfoDataContext();
        //造添加对象
        Info data = new Info();
        data.Code = code;
        data.Name = name;
        data.Sex = sex;
        data.Nation = nation;
        data.Birthday = birthday;
        //添加提交
        context.Info.InsertOnSubmit(data);
        context.SubmitChanges();
        //清空函数
        TxtClear();
    }

案例二：三级联动

1.三个下拉列表填充数据的三个函数

 //上下文对象
    ChinaDataContext context = new ChinaDataContext();
    //省份加载函数
    protected void ShengLoad()
    {
        var sheng = context.ChinaStates.Where(p=>p.ParentAreaCode=="0001");
        ddSheng.DataSource = sheng;
        ddSheng.DataTextField = "AreaName";
        ddSheng.DataValueField = "AreaCode";
        ddSheng.DataBind();
    }
    //地市加载函数
    protected void ShiLoad()
    {
        var shi = context.ChinaStates.Where(p => p.ParentAreaCode == ddSheng.SelectedValue);
        ddShi.DataSource = shi;
        ddShi.DataTextField = "AreaName";
        ddShi.DataValueField = "AreaCode";
        ddShi.DataBind();
    }
    //区县加载函数
    protected void QuLoad()
    {
        var qu = context.ChinaStates.Where(p => p.ParentAreaCode == ddShi.SelectedValue);
        ddQu.DataSource = qu;
        ddQu.DataTextField = "AreaName";
        ddQu.DataValueField = "AreaCode";
        ddQu.DataBind();
    }

2.在Page_Load中调用三个函数

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            ShengLoad();
            ShiLoad();
            QuLoad();
        }
    }

3.在前两个下拉列表的Change事件中（双击进去的事件）填充相关联的下拉列表。

  protected void ddSheng_SelectedIndexChanged(object sender, EventArgs e)
    {
        ShiLoad();
        QuLoad();
    }
    protected void ddShi_SelectedIndexChanged(object sender, EventArgs e)
    {
        QuLoad();
    }

4.记得把前两个下拉列表的AutoPostBack属性设为True。自动提交。

案例三：修改员工

三段代码：

1.初始化民族下拉列表的代码,Load里面写。

  protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            InfoDataContext context = new InfoDataContext();
            var query = context.Nation;
            //绑定显示
            ddNation.DataSource = query;
            ddNation.DataTextField = "Name";
            ddNation.DataValueField = "Code";
            ddNation.DataBind();
        }
    }

2.根据传过来人员主键，查询并向页面加载人员信息的代码,Load里面写。

            //找出该代号的人员信息显示出来
            string code = Request["code"].ToString();
            var info = context.Info.Where(p=>p.Code==code);
            if (info.Count() > 0)
            {
                Info data = info.First();
                txtCode.Text = data.Code;
                txtName.Text = data.Name;
                radSex.SelectedValue = data.Sex.Value.ToString();
                ddNation.SelectedValue = data.Nation;
                txtBirthday.Text = data.Birthday.Value.ToString("yyyy年MM月dd日");
            }

以上两段代码都要在Page_Load中执行

3.修改按钮，向数据库修改数据的代码。

   protected void btnUpdata_Click(object sender, EventArgs e)
    {
        //找到该人员的信息
        InfoDataContext context = new InfoDataContext();
        string code = txtCode.Text;
        var info = context.Info.Where(p => p.Code == code);
        if (info.Count() > 0)
        {
            Info data = info.First();
            //修改字段
            data.Name = txtName.Text;
            data.Sex = Convert.ToBoolean(radSex.SelectedValue);
            data.Nation = ddNation.SelectedValue;
            data.Birthday= Convert.ToDateTime(txtBirthday.Text);
            //提交
            context.SubmitChanges();
        }
        //返回
        Response.Redirect("InfoList.aspx");
    }