ASP.NET服务器端控件RadioButtonList,DropDownList,CheckBoxList的取值、赋值用法

这三个控件都有一个Items集合,可以用 RepeatLayout 和 RepeatDirection 属性来控制列表的呈现形式。如果 RepeatLayout 的值为 Table,那么将在表中呈现列表。如果设置成 Flow,那么将在没有任何表结构的情况下呈现列表。默认情况下,RepeatDirection 的值为 Vertical。将此属性设置成 Horizontal 将会使列表水平呈现。

RadioButtonList:控件提供已选中一个选项的单项选择列表(数据源单选)。与其他列表控件相似,RadioButtonList 有一个 Items 集合,其成员与列表中的每个项目相对应。

DropDownList:下拉列表选择,对于有些形式的输入,用户必须从适用选项列表中选择一个选项(下拉唯一选择)。

CheckBoxList:多选列表,将数据源以横向或纵向方式呈现给用户,用户可以进行多个item的选择。

由于这三个控件是服务器端控件,需要在客户端进行解析,下面有三个控件的服务器端、客户端例子

服务器端


代码如下:

<asp:RadioButtonList ID="RadioButtonList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
            runat="server">
            <asp:ListItem Value="0">单选一</asp:ListItem>
            <asp:ListItem Value="1">单选二</asp:ListItem>
            <asp:ListItem Value="2">单选三</asp:ListItem>
        </asp:RadioButtonList>
        <br />
        <asp:CheckBoxList ID="CheckBoxList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
            runat="server">
            <asp:ListItem Value="0">多选一</asp:ListItem>
            <asp:ListItem Value="1">多选二</asp:ListItem>
            <asp:ListItem Value="2">多选三</asp:ListItem>
        </asp:CheckBoxList>
        <br />
        <asp:DropDownList ID="DropDownList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
            runat="server">
            <asp:ListItem Value="0">下拉选择一</asp:ListItem>
            <asp:ListItem Value="1">下拉选择二</asp:ListItem>
            <asp:ListItem Value="2">下拉选择三</asp:ListItem>
        </asp:DropDownList>

经过浏览器解析后

代码如下:

<span id="RadioButtonList1">
      <input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="0" /><label for="RadioButtonList1_0">单选一</label>
      <input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="1" /><label for="RadioButtonList1_1">单选二</label>
      <input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="2" /><label for="RadioButtonList1_2">单选三</label>
   </span>
        <br />
   <span id="CheckBoxList1">
      <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="0" /><label for="CheckBoxList1_0">多选一</label>
      <input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="1" /><label for="CheckBoxList1_1">多选二</label>
      <input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" value="2" /><label for="CheckBoxList1_2">多选三</label>
   </span>
        <br />
   <select name="DropDownList1" id="DropDownList1" RepeatDirection="Horizontal" RepeatLayout="Flow">
    <option value="0">下拉选择一</option>
    <option value="1">下拉选择二</option>
    <option value="2">下拉选择三</option>
   </select>

对于这三个控件的操作无非就是取值和赋值,下面通过Jquery和.cs两种方式进行操作

Jquery对三种控件进行操作

1、RadioButtonList

1)取值

代码如下:

$("#RadioButtonList1").change(function () {
   //弹出选中项的val值
                alert($("input[name='RadioButtonList1']:checked").val());
  //弹出选中项的text值
                alert($("input[name='RadioButtonList1']:checked+label").text())
  });

2)赋值

代码如下:

//默认选中第二项
var rbts = document.getElementsByName("RadioButtonList1");
            for (var i = 0; i < rbts.length; i++) {
                if (rbts[i].value == "1")
                    rbts[i].checked = "true";
            }

2、DropDownList

1)取值

代码如下:

$("#DropDownList1").change(function () {
//弹出选中项的Val值
                alert($("#DropDownList1").val());
//弹出选中项的text值
                alert($("#DropDownList1 option:selected").text());
            });

2)赋值

代码如下:

//默认选中第二项
var ddls = $("#DropDownList1 option");
                        for (var i = 0; i < ddl.length; i++) {
                            if (ddl[i].value == "1") {
                                ddl[i].selected = "true";
                            }
                        }

3、CheckBoxList

1)取值

代码如下:

$("#CheckBoxList1 > input").click(function () {
               var arrval = [];
                var val = "";
              $("#CheckBoxList1 :checkbox:checked").each(function () {
             //将选中项的值放进数组arrval
                    arrval.push($(this).val())
                })
            //将数组中的val值以‘,'进行连接
                val = arrval.join(',');
              //弹出所有选择的项以,连接
                                alert(val);
                var arrtext = [];
                var text = "";
                $("#CheckBoxList1 :checkbox:checked").each(function () {
              //将选中项的text值放进arrtext数组中
                    arrtext.push($(this).next().html());
              //将数组中的数据用,进行连接
                    text = arrtext.join(",");
                })
             //弹出选中项的Text值
               alert(text);
                });

2)赋值

代码如下:

var cbks = $("#CheckBoxList1 input[type='checkbox']");
            for (var i = 0; i < cbks.length; i++) {
                if (cbks[i].value== "1"||cbks[i].value=="2") {
                    cbks[i].checked = "true";
                }
            }

时间: 2013-10-09

ASP.NET自定义Web服务器控件之Button控件

本文实例讲述了ASP.NET自定义Web服务器控件之Button控件实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: using System;  using System.Collections.Generic;  using System.ComponentModel;  using System.Linq;  using System.Text;  using System.Web;  using System.Web.UI;  using System.Web.U

ASP.NET 动态写入服务器端控件第1/2页

关于动态写入html标签控件,大家都熟悉,这里就不再表述.本文讨论的重点是:如何动态写入服务器端控件,并且在页面PostBack到Server端时,在Server端来获取被动态写入的服务器端控件的各种属性. 这里,我来通过一个Demo来说明这个应用. 需求: 1. 用户在UI上输入一个数值(比如:5),系统动态为用户加载这个数值的Url Address输入域; 2. 用户输入的Url Address内容需要通过Url格式验证; 3. 用户提交输入内容后,系统给出提交的结果 设计如下: 1. Cs

asp.net Page.Controls对象(找到所有服务器控件)

实例一: 前台 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

jQuery生成asp.net服务器控件的代码

HTML如下 复制代码 代码如下: <tr> <td class="leftTd" style="width: 107px">附加金额</td> <td style="width: 315px"><asp:TextBox ID="txtExtendMoney" Text="0" runat="server"></asp:T

asp.net下使用Request.From获取非服务器控件的值的方法

复制代码 代码如下: <tr> <td>登录名:<input id="Text1" type="text" name="loginName" /><asp:Label ID="Label1" runat="server" Text="用户名已经存在"></asp:Label> </td> </tr> &l

Asp.Net使用服务器控件Image/ImageButton显示本地图片的方法

Image/ImageButton服务器控件显示本地的图片 . 这里,我做的是: 数据库中存放了图片的相对地址,读取数据库中的地址,用控件加载显示图片.  步骤: A .添加服务器控件, 这里以 Image控件为例. B. 数据库中的路径,这个很重要.  格式我是这样写的: ~/image/1.jpg. 我之前写的是: ~\image\1.jpg,图片显示加载失败,换了'\'后,就可以了. image是我在项目的主目录下创建的一个特地存放图片的文件夹. C.添加代码. 使用image的image

asp.net Page.EnableEventValidation 属性验证服务器控件的回发和回调事件出现的错误

本以为页面很简单不会出现问题,但运行时出现了如下错误: Page.EnableEventValidation 属性 参看了一下MSDN,获取或设置一个值,该值指示页面验证回发事件,还是验证回调事件..NET Framework出于安全考虑需要为服务器端控件的回发和回调事件进行注册,此事件验证机制可消除未经授权的回发请求和回调带来的风险.通过此模型,控件可在呈现期间注册其事件,然后在回发或回调期间验证这些事件.默认情况下,ASP.NET 中的所有事件驱动控件均使用此功能. 第一反应,既然启用了事件

jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值

-.获取dropdownlist的text(ddlList为服务器端dropdownlist的ID,生成name属性等于ddlList的select标签) $("#ddlList option:selected").text() 二.获取dropdownlist的value(ddlList为服务器端dropdownlist的ID,生成name属性等于ddlList的select标签) $("#ddlList").val() 三.获取radiobuttonlist的t

asp.net 服务器控件的 ID,ClientID,UniqueID 的区别

1.简述 ID是设计的时候自己所指定的ID,是我们分配给服务器控件的编程标识符,我们常常使用this.controlid来寻找控件,那么这个controlid就是这里所说的ID. ClientID是由ASP.Net生成的服务器控件得客户端标识符,当这个控件生成到客户端页面的时候,在客户端代码访问该控件时就需要通过ClientID来访问. UniqueID 服务器控件的唯一的.分层的形式限定的标识符. 是当需要参与服务端回传的时候用的.当将控件放置到重复控件(Repeater.DataList和D

获取asp.net服务器控件的客户端ID和Name的实现方法

前几天在做项目的时候,遇到一个问题,想查看Asp.net中服务器控件在客户端显示的name属性.起初,感觉不是很难找,但就是找不到,几经周折,终于发现了: string btnClientName = btnSearch.UniqueID;//服务器控件在客户端显示的name属性 string btnClientID = btnSearch.ClientID;//服务器控件在客户端显示的id属性 以上这篇获取asp.net服务器控件的客户端ID和Name的实现方法就是小编分享给大家的全部内容了,

ASP.NET服务器控件开发(1)封装html

在我们的项目开发中,由于ASP.NET的服务器控件功能有限,所以我们经常会自己定义特定的服务器控件,来满足开发中特定的业务要求.可见知道如何开发ASP.NET服务器控件是非常有必要的. 其实简单的实现ASP.NET服务器控件不是很难,以前园子中也有大牛介绍过相应的内容,这里站在巨人的肩膀上也来分享下开发ASP.NET服务器控件的方法和自己的一些体会.写给新手,高手绕过. 学习ASP.NET的服务器控件开发,个人认为最好的方式就是自己去实践,当然理论知识也是很重要的,但是如果我们只是看理论的知识,

Asp.Net MVC4通过id更新表单内容的思路详解

用户需求是:一个表单一旦创建完,其中大部分的字段便不可再编辑.只能编辑其中部分字段. 而不可编辑是通过对input输入框设置disabled属性实现的,那么这时候直接向数据库中submit表单中的内容就会报错,因为有些不能为null的字段由于disabled属性根本无法在前端被获取而后更新至数据库. 有下面两种思路: 1.通过创建隐藏表单,为每一个disabled控件分别创建一个隐藏控件,但是这样的问题是工作量太大(如果表单有一千个属性,你懂的) 2.通过获取该表单在数据库中的id,把该id和可

asp.net checkbox 动态绑定id GridView删除提示

asp.net checkbox 动态绑定id 复制代码 代码如下: <input id='<%# "courseNo"+Eval("courseNo") %>' type="checkbox" onclick="return Click()"/> GridView删除提示 复制代码 代码如下: <div id="del" onClick="return confir

ASP.NET服务器控件的生命周期分析

本文实例分析了ASP.NET服务器控件的生命周期.分享给大家供大家参考.具体如下: (1)初始化----在此阶段中,主要完成两项工作:一.初始化在传入Web请求生命周期内所需的设置:二.跟踪视图状态.首先,页面框架通过默认方式引发Init事件,并调用OnInit()方法,控件开发人员可以重写该方法为控件提供初始化逻辑.此后,页面框架将调用TrackViewState方法来跟踪视图状态.需要注意的是:多数情况下,Control基类提供的TrackViewState方法实现已经足够了.只有在控件定义

详解Asp.Net母版页元素ID不一致的体现

本文介绍了Asp.Net母版页元素ID不一致的体现,分享给大家,具体如下; <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" Theme="style" AutoEventWireup="true" CodeFile="r_Balance.aspx.cs" Inherits="Report_r_Balance"

ASP中RecordSet Open和Connection.Execute一些区别与细节分享

rs.open sql,conn:如果sql是delete,update,insert则会返回一个关闭的记录集,在使用过程中不要来个rs.close在文件最后再写rs.close 中间可以来多个记录集rs1.open sql1,conn,最后一块关闭记录集:rs.close rs1.close conn.execute(sql) 如果sql是delete,update,insert则会返回一个关闭的记录集,在使用过程中不要来个rs.close在文件最后再写rs.close 中间可以来多个记录集r

JS或jQuery获取ASP.NET服务器控件ID的方法

在ASP.NET中使用js时,js获取DOM元素时,经常获取不到,这是因为获取的方法有误,现在介绍一方法,解决如何使用js获取ASP.NET控件在浏览器端生成html标签对应的id 1.获取服务器端控件在浏览器端生成的标签的id,即服务器控件对应的客户端html标签id 通过服务器端控件的ClientID属性可以获取到相应在浏览器即客户端html标签中对应的id值,获取方法如下 代码如下: 复制代码 代码如下: <%= newsId.ClientID %> 2.通过dom获取相应的dom元素