ASP.NET WebForm 的CheckBoxList控件通过js获取Value值问题

ASP.NET WebForm 的CheckBoxList控件通过js获取Value值问题

故事背景

最近在改之前很早的一个项目，用的还是WebForm开发的。追加功能之后，有个地方是弹出层来填写表单信息，然后保存到datagrid中。需要通过js获取CheckBoxList的值然后保存到列表中。CheckBoxList控件的数据源是从数据库中获取的，在后台绑定的。一切都很顺利，但是到了保存弹出表单的时候，发现js获取不到CheckBoxList的值。在我的印象中很早之前解决过这个问题，但是没有单独写一篇博客来记录，导致了浪费了一些查询时间。

目的

目的很简单就是保留所有CheckBoxList的原有功能，在不影响原功能使用的前提下，能够通过js来获取CheckBoxList的选中的Value和Text。

原因分析

js获取控件的值属于前端的操作，个人比较喜欢Google的Chrome浏览器，对于调试分析前端，包括js、css等非常的方便。

回正题，首先通过查看前端的源代码来看一下CheckBoxList生成的html。

原始的页面html代码：

<div>
    <asp:CheckBoxList ID="cklCoreProduct" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" RepeatColumns="6" >
    </asp:CheckBoxList>
    <asp:TextBox ID="tbCoreProductOther" runat="server" Style="width: 150px; height: 24px; border-bottom: 1px solid; float: right; margin: -30px 30px 10px;" class="easyui-validatebox" data-options="required:false,validType:'length[1,40]'"></asp:TextBox>
</div>

后台绑定值

    if (dt != null && dt.Rows.Count > 0)
    {

        cklCoreProduct.DataSource = dt;
        cklCoreProduct.DataValueField = "Code";
        cklCoreProduct.DataTextField = "Description";
        cklCoreProduct.DataBind();

    }

页面中生成的html代码

<div>
    <span id="cklCoreProduct">
    <input id="cklCoreProduct_0" type="checkbox" name="cklCoreProduct$0" checked="checked"><label for="cklCoreProduct_0">基础软件</label>
    <input id="cklCoreProduct_1" type="checkbox" name="cklCoreProduct$1" checked="checked"><label for="cklCoreProduct_1">支撑软件</label>
    <input id="cklCoreProduct_2" type="checkbox" name="cklCoreProduct$2"><label for="cklCoreProduct_2">应用软件</label>
    <input id="cklCoreProduct_4" type="checkbox" name="cklCoreProduct$4"><label for="cklCoreProduct_4">信息安全软件</label>
    <input id="cklCoreProduct_5" type="checkbox" name="cklCoreProduct$5"><label for="cklCoreProduct_5">软件定制服务</label>
    <input id="cklCoreProduct_6" type="checkbox" name="cklCoreProduct$6"><label for="cklCoreProduct_6">信息系统集成服务</label>
    <input id="cklCoreProduct_7" type="checkbox" name="cklCoreProduct$7"><label for="cklCoreProduct_7">信息技术咨询服务</label>
    <input id="cklCoreProduct_9" type="checkbox" name="cklCoreProduct$9"><label for="cklCoreProduct_9">其他</label></span>           
</div>

可以看到生成的每个checkbox上根本就不存在value值。但是后台可以通过获取此控件获取到每一个的值，经过研究发现微软是通过viewstate来绑定值。来回传递。这样通过js获取选中项的value值时，只会得到一个on值。

解决方案

微软的webform控件，都可以通过后台自由指定Attribute属性。这样可以使绑定的每一个ListItem上追加一个Attribute属性来保存Value值。

改造后台代码

// 为了js 获取CheckBoxList的各项的值
foreach (DataRow row in dt.Rows)
{
    ListItem li = new ListItem();
    li.Text = row["Description"].ToString();
    li.Value = row["Code"].ToString();
    li.Attributes.Add("myValue", row["Code"].ToString());
    cbl.Items.Add(li);
}

生成的页面代码

<div>
    <span id="cklCoreProduct">
        <span myvalue="01">
            <input id="cklCoreProduct_0" type="checkbox" name="cklCoreProduct$0" checked="checked">
            <label for="cklCoreProduct_0">基础软件</label>
        </span> 
        <span myvalue="02">
            <input id="cklCoreProduct_1" type="checkbox" name="cklCoreProduct$1" checked="checked">
            <label for="cklCoreProduct_1">支撑软件</label>
        </span>
        <span myvalue="03">
            <input id="cklCoreProduct_2" type="checkbox" name="cklCoreProduct$2">
            <label for="cklCoreProduct_2">应用软件</label>
        </span>
        ...
    </span>
</div>

可以看到在每一组checkbox和label上层又增加了一个span元素，并且里面有我们在后台指定的myvalue的属性。这样我们就可以通过js来获取值了。

// 获取选中的checkboxlist的值和文本
var types = [];
var typeNames = [];
$("#detail_Type input:checked").each(function(){ 
    //alert($(this).parent("span").attr("myValue"));
    types.push($(this).parent("span").attr("myValue"));
    typeNames.push($(this).next().html());
});

经过验证，此方法指定的Attribute名称不能是value。第一次尝试走了弯路。特提醒大家