asp.net - tutorial - ¿Dónde se almacenan los valores de DataValueField para CheckBoxList?
que es asp net (9)
Tengo esta CheckBoxList en una página:
<asp:checkboxlist runat="server" id="Locations" datasourceid="LocationsDatasource"
datatextfield="CountryName" datavaluefield="CountryCode" />
Me gustaría recorrer los elementos del checkbox en el cliente usando Javascript y tomar el valor de cada casilla marcada, pero los valores no parecen estar disponibles en el lado del cliente. La salida HTML se ve así:
<table id="ctl00_Content_Locations" class="SearchFilterCheckboxlist" cellspacing="0" cellpadding="0" border="0" style="width:235px;border-collapse:collapse;">
<tr>
<td><input id="ctl00_Content_Locations_0" type="checkbox" name="ctl00$Content$Locations$0" /><label for="ctl00_Content_Locations_0">Democratic Republic of the Congo</label></td>
</tr><tr>
<td><input id="ctl00_Content_Locations_1" type="checkbox" name="ctl00$Content$Locations$1" /><label for="ctl00_Content_Locations_1">Central African Republic</label></td>
</tr><tr>
<td><input id="ctl00_Content_Locations_2" type="checkbox" name="ctl00$Content$Locations$2" /><label for="ctl00_Content_Locations_2">Congo</label></td>
</tr><tr>
<td><input id="ctl00_Content_Locations_3" type="checkbox" name="ctl00$Content$Locations$3" /><label for="ctl00_Content_Locations_3">Cameroon</label></td>
</tr><tr>
<td><input id="ctl00_Content_Locations_4" type="checkbox" name="ctl00$Content$Locations$4" /><label for="ctl00_Content_Locations_4">Gabon</label></td>
</tr><tr>
<td><input id="ctl00_Content_Locations_5" type="checkbox" name="ctl00$Content$Locations$5" /><label for="ctl00_Content_Locations_5">Equatorial Guinea</label></td>
</tr>
Los valores ("cd", "cg", "ga", etc.) no se encuentran por ningún lado. ¿Dónde están? ¿Es posible acceder a ellos en el cliente, o tengo que construir esta lista de casilla de verificación usando un repetidor o algo así?
Almacenado en ViewState, no puede acceder a ellos en el cliente sin algunos piratería .
Para evitar hackear la lista de casillas, simplemente use un repetidor como tal:
<asp:Repeater ID="rptItems" runat="server" DataSourceID="odsDataSource">
<ItemTemplate>
<input id="iptCheckBox" type="checkbox" runat="server" value=''<%# Eval("Key") %>''><%# Eval("Value") %></input>
</ItemTemplate>
</asp:Repeater>
He buscado esto antes y es posible que tengas poca suerte. Creo que recuerdo haber visto que no hay un elemento de la lista de casilla de verificación para JavaScript, por lo que no lo entiendo. Tendrás que buscar elementos en la página que tengan el tipo de casilla de verificación y probar para ver qué grupo (creo que es la propiedad) a lo que también pertenece.
Buscaré mi código y veré si puedo encontrar lo que hice ...
Por supuesto, no puedo encontrar lo que hice.
¿Por qué lo haces en el lado del cliente en javascript? ¿Por qué no haces algo de AJAX y controlas todo el lado del servidor?
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBoxList ID="CheckBoxList1" runat="server" DataTextField="tx" DataValueField="vl">
</asp:CheckBoxList>
</div>
<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
</form>
</body>
<script type="text/javascript">
function Button1_onclick()
{
var itemarr = document.getElementById("CheckBoxList1").getElementsByTagName("span");
var itemlen = itemarr.length;
for(i = 0; i <itemlen;i++)
{
alert(itemarr[i].getAttribute("dvalue"));
}
return false;
}
</script>
Código
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add("tx");
dt.Columns.Add("vl");
DataRow dr = dt.NewRow();
dr[0] = "asdas";
dr[1] = "1";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = "456456";
dr[1] = "2";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = "yjryut";
dr[1] = "3";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = "yjrfdgdfgyut";
dr[1] = "3";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = "34534";
dr[1] = "3";
dt.Rows.Add(dr);
CheckBoxList1.DataSource = dt;
CheckBoxList1.DataBind();
foreach (ListItem li in CheckBoxList1.Items)
{
li.Attributes.Add("dvalue", li.Value);
}
}
}
Tuve que hacer algo realmente desagradable para que esto funcione.
<asp:Repeater ID="rptItems" runat="server">
<ItemTemplate>
<input ID="iptCheckBox" type="checkbox" runat="server" value=''<%# Eval("your_data_value") %>'' />
<label ID="iptLabel" runat="server"><%# Eval("your_data_field") %></label>
<br />
</ItemTemplate>
</asp:Repeater>
Código detrás:
Private Sub rptItems_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles rptItems.ItemDataBound
Dim checkBox As HtmlInputCheckBox = DirectCast(e.Item.FindControl("iptCheckBox"), HtmlInputCheckBox)
Dim label As HtmlControl = DirectCast(e.Item.FindControl("iptLabel"), HtmlControl)
label.Attributes.Add("for", checkBox.ClientID)
End Sub
Swapna, tu respuesta funciona absolutamente. Entonces, para verificar si la casilla de verificación en la lista de casilla de verificación ASP.Net está marcada y luego acumular la lista como una cadena delimitada por comas, puede hacer lo siguiente:
C # Código detrás
ChkboxList1.DataSource = dsData;
ChkboxList1.DataTextField = "your-display-column-name";
ChkboxList1.DataValueField = "your-identifier-column-name";
ChkboxList1.DataBind();
foreach (ListItem li in ChkboxList1.Items)
{
li.Attributes.Add("DataValue", li.Value);
}
Entonces en Javascript do
var selValues = "";
var ChkboxList1Ctl = document.getElementById("ChkboxList1");
var ChkboxList1Arr = null;
var ChkboxList1Attr= null;
if (ChkboxList1Ctl != null)
{
ChkboxList1Arr = ChkboxList1Ctl.getElementsByTagName("INPUT");
ChkboxList1Attr = ChkboxList1Ctl.getElementByTagName("span");
}
if (ChkboxList1Arr != null)
{
for (var i = 0; i < ChkboxList1Arr.length; i++)
{
if (ChkboxList1Arr[i].checked)
selValues += ChkboxList1Attr[i].getAttribute("DataValue") + ",";
}
if (selValues.length > 0)
selValues = selValues.substr(0, selValues.length - 1);
}
¡Finalmente tengo la respuesta que estaba buscando!
El control asp.net CheckboxList de hecho representa el atributo de valor en HTML. ¡ Hace más de un año que funciona en un sitio de producción! (SIEMPRE hemos habilitado EnableViewState para todos nuestros sitios y todavía funciona, sin ajustes ni hacks)
Sin embargo, de repente, dejó de funcionar un día, y nuestras casillas CheckboxList ya no estaban representando su atributo de valor en HTML. WTF dices? ¡Nosotros también! Nos tomó un tiempo resolver esto, pero como había estado funcionando antes, sabíamos que tenía que haber una razón. La razón fue un cambio accidental en nuestra web.config!
<pages controlRenderingCompatibilityVersion="3.5">
Eliminamos este atributo de la sección de configuración de páginas y eso fue todo un truco.
¿Por qué esto es tan? Reflejamos el código para el control CheckboxList y lo encontramos en el método RenderItem:
if (this.RenderingCompatibility >= VersionUtil.Framework40)
{
this._controlToRepeat.InputAttributes.Add("value", item.Value);
}
¡Queridos hermanos y hermanas devotos, no desesperen! ¡TODAS las respuestas que busqué aquí en Stackexchange y el resto de la web dieron información errónea! A partir de .Net 4.0, asp.net representa el atributo value de las casillas de verificación de una CheckboxList:
<input type="checkbox" value="myvalue1" id="someid" />
Tal vez no sea prácticamente útil, Microsoft le dio la posibilidad de agregar una "controlRenderingCompatibilityVersion" a su web.config para desactivarla configurando una versión inferior a 4, que para nuestros propósitos es completamente innecesaria y de hecho dañina, ya que el código de javascript depende en el atributo de valor ...
Estamos obteniendo chk.val () igual a "on" para todas nuestras casillas de verificación, que es lo que originalmente nos alertó sobre este problema en primer lugar (usando jquery.val () que obtiene el valor de la casilla de verificación. Se apaga "on "es el valor de una casilla de verificación que está marcada ... Aprender algo todos los días).
La eliminación de <pages controlRenderingCompatibilityVersion="3.5"> causó un problema en algún código anterior en el que estaba trabajando. Estaba recibiendo este error . Una vez que obtuve ese error, me di cuenta de que era demasiado arriesgado para un cambio.
Para solucionar esto, terminé extendiendo CheckBoxList y reemplazando el método Render para agregar un atributo adicional que contiene el valor para cada elemento de la lista:
public class CheckBoxListExt : CheckBoxList
{
protected override void Render(HtmlTextWriter writer)
{
foreach (ListItem item in this.Items)
{
item.Attributes.Add("data-value", item.Value);
}
base.Render(writer);
}
}
Esto representará el atributo de data-value en la etiqueta de span externa.
Easy Way I Do It.
//First create query directly From Database that contains hidden field code format (i do it in stored procedure)
SELECT Id,Name + ''<input id="hf_Id" name="hf_Id" value="''+convert(nvarchar(100),Id)+''" type="hidden">'' as Name FROM User
//Then bind checkbox list as normally(i bind it from dataview).
cbl.DataSource = dv;
cbl.DataTextField = "Name";
cbl.DataValueField = "Id";
cbl.DataBind();
//Then finally it represent code as follow.
<table id="cbl_Position" border="0">
<tbody>
<tr>
<td>
<input id="cbl_0" name="cbl$0" type="checkbox">
<label for="cbl_0">
ABC
<input id="hf_Id" name="hf_Id" value="1" type="hidden">
</label>
</td>
</tr>
</table>
This way you can get DataValueField as inside hiddenfield and also can get it value from client side using javascript.