几个常用的控件（2）

一、单选按钮Radiobutton和RadioButtonList

1、Radiobutton控件

（1）button控制方式

（2）Radiobutton控制方式

2、RadiobuttonList控件

二、列表框ListBox和下拉列表DropdownList

1、ListBox

2、DropdownList

三、面板控件panel

四、日历

五、FileUpLoad

六、隐藏域HidderField

前面一篇中介绍了几个常用的控件，这篇继续学习常用的控件。

一、单选按钮Radiobutton和RadioButtonList

前面简单的看了一下这两个控件长什么样子，下面我们试着用小例子来学习一下这两个的使用差别。

用例一：使用这些按钮来选择图片，该怎么操作呢？

1、Radiobutton控件

首先，尝试使用单个按钮Radiobutton来实现：

拖动一个Image控件和四个Radiobutton控件，如下摆放：

控制使用哪个图片有两种方式，一种是直接加一个button，然后选择一个Radiobutton，点一下button，这种是比较繁琐的；另一种是直接修改每个Radiobutton的功能。但是作为初学者，一定不能选择跳过（说给我自己听的，以前跳过的太多后面后悔也不知道咋补了），下面先加一个button试试如何让他显示吧：

（1）button控制方式

双击button添加其功能：

        protected void Button3_Click(object sender, EventArgs e){if (RadioButton1.Checked){this.Image1.ImageUrl = "Images/1.png";}if (RadioButton2.Checked){this.Image1.ImageUrl = "Images/2.png";}if (RadioButton3.Checked){this.Image1.ImageUrl = "Images/3.png";}if (RadioButton4.Checked){this.Image1.ImageUrl = "Images/4.png";}}

启动，然后运行一下试试：

我们可以看到，四张倒是都能显示，但是有一个大大的缺点就是，这个RadioButton一旦被选择，那么它就回不去了，即一直显示的是被选的状态。我们肯定不希望是这么个现象的，要怎么做才能不出现在这种问题呢，我们继续往下看。

（2）Radiobutton控制方式

删除Button控件，依次修改每个Radiobutton的功能：

 protected void RadioButton1_CheckedChanged(object sender, EventArgs e){this.Image1.ImageUrl = "Image/1.png";}protected void RadioButton2_CheckedChanged(object sender, EventArgs e){this.Image1.ImageUrl = "Image/2.png";}protected void RadioButton3_CheckedChanged(object sender, EventArgs e){this.Image1.ImageUrl = "Image/3.png";}protected void RadioButton4_CheckedChanged(object sender, EventArgs e){this.Image1.ImageUrl = "Image/4.png";}

这是我的想法，至于行不行呢，咱们边走边看吧：

好吧，确实不行，应该怎么用呢？不理解。。。。。（慢慢来吧）

先解决（1）中提到的问题吧。这时候就需要使用到RadiobuttonList控件。

2、RadiobuttonList控件

我们可以看到，默认状态下，该列表是竖向排列的，那么想要它横向排列，该怎么做呢？

只需要修改RadiobuttonList的属性RepeatDirection为horizontal即可。

下面，按照要求进行修改它们的功能：

不加按钮的时候，怎么都不出来图片，这是为什么我不太理解。。。。。。

所以被迫加上按钮，就可以按照要求跳转了：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;namespace WebApplication2
{public partial class WebForm1 : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected void Button1_Click(object sender, EventArgs e){string r = RadioButtonList1.SelectedItem.Text;if (r == "1"){Image1.ImageUrl = "Images/1.png";}if (r == "2"){Image1.ImageUrl = "Images/2.png";}if (r == "3"){Image1.ImageUrl = "Images/3.png";}if (r == "4"){Image1.ImageUrl = "Images/4.png";}}}
}

二、列表框ListBox和下拉列表DropdownList

这两个控件基本上是一样的，但是显示的效果是不同的，ListBox是将所有选择都显示且可以多选，但是DropdownList一次只显示一个且一次只能选择一个。

1、ListBox

就是一个这样的框，在这个框里面可以添加很多的选择，例如：

运行显示就是这样子的：

前面说的可以多选，要多选的话就需要修改属性：SelectionMode，修改为Multiple，修改看看效果：

按着Ctrl键，就可以多选了：

2、DropdownList

加上选择的话，一次只显示一个：

运行显示的样子（这个框拉的有点大了，哈哈哈哈，等会改小点）：

这是直接加上去的，后面也可以追加上去。使用的语句是DropDownList1.Items.Add("");

但是加的时候要注意，只能加一次，而不能每按一次就加一次，这时候，就可以用到以前使用过一次的IsPostBack。

protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){DropDownList1.Items.Add("凉拌黄瓜");DropDownList1.Items.Add("西红柿炒鸡蛋");}}

单击button之后，就可以看到加上去的菜了：

下面按照上面的两种方式，选择之后，显示“你选择了：** ”

protected void Button2_Click(object sender, EventArgs e){Label1.Text = "你选择了：";Label1.Text += ListBox1.SelectedItem.Text;}protected void Button3_Click(object sender, EventArgs e){Label2.Text = "你选择了：";Label2.Text += DropDownList1.SelectedItem.Text;}

但是，出现了一个错误，如果用列表框，选择之后，显示的是第一个选择的，这个应该怎么修改呢？

暂时不清楚，等脑子清醒了在想吧。

如果有两个下拉列表，那么如何让它们联动呢？

我的想法是，将两个分别设置，但是有一个问题，就是有可能会错位，比如说我第一个设置的是省份，甘肃、新疆，市有定西、乌鲁木齐，如果选择错误的话就有可能出现新疆-定西这种情况。显然，这是错误的情况，所以设置的时候应该省份的时候，才去选择市。

先添加省份：

这里设置value是因为后面需要：

添加的时候发现这个会出错了，因为前面switch后面的字符型，所以需要修改成int型：

还是会出错：

为什么会出现这个错误呢？在课堂里也出现了这个错误，但是这个错误有时候却不会出现，所以这个需要再搜搜资料。

注释掉这句话之后，发现我连前面的功能是错误的，首先，我设置是第一个下拉框的Value值，但是我前面写的是第二个下拉框的 value，所以是错的。最终的代码应该是如下的：

protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e){DropDownList3.Items.Clear();switch (Convert.ToInt32(DropDownList2.SelectedValue)){case 0:DropDownList3.Items.Add("定西");DropDownList3.Items.Add("兰州");DropDownList3.Items.Add("平凉");break;case 1:DropDownList3.Items.Add("乌鲁木齐");DropDownList3.Items.Add("石河子");DropDownList3.Items.Add("喀什");break;}}

截图如下：

下面就修改label的功能：

在这句话后面加一个+ "" 就可以正常运行了，先记住吧。。（后面又不能正常运行了，啊啊啊啊啊啊，真的是一阵一阵的，最后发现，首先要修改一下第一个下拉框，才能使用button控件，如果不设置，就会出现上面的错误，因为：不设置第一个的时候可能switch后面没值，所以根本无法判断是哪种情况，所以会错误）

protected void Button4_Click(object sender, EventArgs e){Label3.Text = "你在：";Label3.Text += DropDownList2.SelectedItem.Text + DropDownList3.SelectedItem.Text + "";}

最终结果如下：