ASP.NET Web开发技术——常用标准服务器控件的具体介绍以及使用教程（ImageButton、AutoPostBack、RadioButton、RadioButtonList）

目录

 运行结果：

一： RadioButton、RadioButtonList的区别及用法

二:ImageButton和AutoPostBack的解释

三：运行结果的详细教程

1.aspx前台设计界面 

2.在.aspx.cs后台代码设计页面修改代码

---

 运行结果：

一： RadioButton、RadioButtonList的区别及用法

RadioButtonList是将一组相互排斥的单选按钮自动组成的一个组，且本身组中的项都是相互排斥的。最典型的例子是：性别选择男或者女

RadioButton也表示单选按钮，但不是一组，而只是单个的按钮。比如图中的“兴趣”以及“喜欢的明星”的选择常用该控件。

二:ImageButton和AutoPostBack的解释

ImageButtern用于在网页上点击按钮呈现图片的一种控件。

AutoPostBack属性用于设置或返回当用户在列表控件中选择一个项目时，是否发生自动回传到服务器的操作，属性值为True和False，True表示与服务器交互，False表示不与服务器交互。

如果把该属性设置为TRUE，则启用自动回传，否则为FALSE。默认是FALSE。
AutoPostBack是一种机制（自动根据Web控件的一些事件，将页面自动发回服务器。在一些Web控件中，称为AutoPostBack属性。如果设置为true ，当此控件的某事件发生时，将发送一个request到服务器。

三：运行结果的详细教程

1.aspx前台设计界面 

①.新建“解决方案”→“空白Web 网站”→创建“Web窗体”，最后选择“设计”，在显示页面输入第一行文字：“欢迎来到我的个人简介”；

②.接着输入第二行文字“请输入你的姓名”，并在其后面添加一个TextBox文本框，修改其ID名，比如txtName。

③.第三行输入文字“性别”，并添加RadioButtonList控件，修改其ID名，比如：rblSex。接着按照下图依次点击进入

进入后，点击“添加”，在“Text”后填入性别“男”，点击确定，一个性别男按钮就制作好了；接着按照同样步骤去设置性别女按钮选项。

最后点击“确定”。 

 

如果想要将方向修改为水平，单机按钮，选择属性，在ReaptDirection里选择Horizontal(水平)。

④.输入文字“兴趣”后，选择RadioButton,继续修改ID名，在Text属性里自行输入文字（这里我选的阅读等）

⑤.输入文字“喜欢的明星”，同样选择RadioButtonList控件，在“编辑项”里找到Text,输入喜欢的明星名字，方法与3相同。

⑥.那么如何实现点击明星名字就可以显示图片呢？那就要用到ImageButton控件了。

        首先在自己的网站名字的根目录下，创建文件夹“Image”,接着将自己所喜欢的明星图片存在Image文件夹里。或者直接在电脑硬盘里找到自己的所在项目网站存放位置，新建“Image”文件夹，将图片保存该文件夹里面。

   选择ImageButton，修改ID名（这里我修改为rblMx）。 接着找到ImageUrl,点击后面三个点，根据文件路径找到其中一个图片双击即可，这里表示图片的所选地址。可以修改其图片大小，找到“Height”和“Width”进行修改即可。

 ⑦.输入文字“我喜欢的电影”，选择CheckBox（用于多选按钮）,同样修改ID和Text。

⑧.最后选择“Button”按钮，修改ID(我修改为lbLogin),在Text里输入“提交”

以上就是.aspx前台设计界面的所有操作了，接下来就是修改其代码。

2.在.aspx.cs后台代码设计页面修改代码

① 在提交按钮代码界面里面输入所有要输出的内容。

代码如下：  

protected void lbLogin_Click(object sender, EventArgs e)
{
    string xq;

    lbMx.Text = "欢迎来到我的个人简介：" + "</br>";
    lbMx.Text+= "你的姓名为：" + txtName.Text + "</br>";
    lbMx.Text += "性别：" + rblSex.Text;
    
    if (rbRead.Checked)
    {
       xq = "阅读";
    }
    else if (rbSleep.Checked)
    {
       xq = "睡觉";
    }
    else
            {
    xq = "吃饭";
    }
    lbMx.Text +="</br>"+"兴趣：" + xq + "</br>";
    lbMx.Text += "喜欢的明星是：" + rblMx.SelectedItem.Text + "</br>";
    lbMx.Text += "喜欢的电影是：" + cblDy.SelectedItem.Text + "</br>";

}

②设置明星所在的按钮界面使之显示所选图片 。

代码如下：  

protected void rblMx_SelectedIndexChanged(object sender, EventArgs e)
{
    lbMx.Text += "喜欢的明星是：" + rblMx.SelectedItem.Text;
    foreach (ListItem item in rblMx.Items)
    {
        if (item.Selected)
        {
            ibtYangzi.ImageUrl = "image/" + item.Text + ".jpg";
        
        }
    
    }
}

③在 选择喜欢的电影时，显示多选结果。

代码如下： 

protected void cblDy_SelectedIndexChanged(object sender, EventArgs e)
{

    foreach (ListItem item in cblDy.Items)
        {
            if (item.Selected)
            {
                lbMx.Text += item.Text + "|";
            
            }
        
        
        
        }
    
    }

代码改写完毕。

希望我的回答可以帮助到你！