You can add a class to your CheckBox
, then use it as a selector.
@Html.CheckBoxFor(model => item.Ativo, new { @class = "ckAtivo" })
and in jQuery do the following.:
$("#tabelaTiposCartao").on("click", ".ckAtivo", function () {
console.log(this.value);
});
this.value
will be the value of the checkbox. but I believe that this approach does what you want, but it will not solve your problem.
SUGGESTIONS
First point would be to use foreach
to set up your table, when doing so, Razor
gets lost when assigning an id and a name
to inpus
, then possibly you you will not receive the data when you send them back to the server.
Then you have two options, use a for
or nuget BeginCollectionItem
using a for
:
@for(var i = 0; i < Model.ListaProdutos.Count; i++)
{
<tr>
<td>@Model.ListaProdutos[i].Tipo</td>
<td align="right">@Model.ListaProdutos[i].Categoria</td>
<td>@Model.ListaProdutos[i].Descricao</td>
<td align="justify" onclick="AtivarProduto(@item.ID)">@Html.CheckBoxFor(model => Model.ListaProdutos[i].Ativo)</td>
</tr>
}
But to use this approach, your ListaProdutos
needs to be a concrete Type as a Array<T>
or a List<T>
and not an interface like IEnumerable<T>
, if this is your case, your only option will be the package of nuget mentioned above.
using BeginCollectionItem
:
using(Html.BeginCollectionItem("ListaProdutos"))
{
<tr>
<td>@Html.DisplayFor(model => model.Tipo)</td>
<td align="right">@Html.DisplayFor(model => model.Categoria)</td>
<td>@Html.DisplayFor(model => model.Descricao)</td>
<td align="justify" onclick="AtivarProduto(@model.ID)">@Html.CheckBoxFor(model => model.Ativo)</td>
</tr>
}
Now by the value of CheckBox
, it will have the value of the Ativo
property, ie true
or false
, but if you are interested in ID
, you will have to store it in some place, such as Hidden
.
And I would apply a class on the line, so I could get it in javaScript and use the line as scope for my future functions.
using(Html.BeginCollectionItem("ListaProdutos"))
{
<tr class="trProduto">
<td>@Html.DisplayFor(model => model.Tipo)</td>
<td align="right">@Html.DisplayFor(model => model.Categoria)</td>
<td>@Html.DisplayFor(model => model.Descricao)</td>
<td align="justify">
@Html.HiddenFor(model => model.ID)
@Html.CheckBoxFor(model => model.Ativo)
</td>
</tr>
}
Now follow the script:
var Produto = new Produto(container) {
var that = this;
this.dom = {};
this.dom.linha = container;
this.dom.celulas = this.dom.linha.querySelectorAll("td");
this.dom.id = this.dom.linha.querySelector("[id$=ID]");
this.dom.ativo = this.dom.linha.querySelector("[id$=Ativo]");
this.dom.ativo.addEventListener("click", function () {
that.onAtivoClick();
});
this.dom.celulas[3].addEventListener("click", function () {
that.onCelula4Click();
});
}
Produto.prototype.onAtivoClick = function () {
console.log(this.dom.id.value);
}
Produto.prototype.onCelula4Click = function () {
AtivarProduto(this.dom.id.value);
}
var containers = document.querySelectorAll(".trProduto");
[].forEach.call(produtos, function (container, indice) {
var produto = new Produto(container);
});
In the above script, it selects all rows with class .trProduto
so for each line it looks for inputs whose id
ends with ID
and Ativo
.
But I took the liberty of creating a "Class" to help delineate a scope for each line, here called the product.
If you need access to other data, such as Tipo
, Categoria
or Descricao
, then create a HiddenFor
for them as well and search for them within the Produto
object, an alternative is to get the property textContent
of this.dom.celulas[i]
, where i
will 0
, 1
or 2
.