0

Eu tenho uma tabela em um sistema em ASP.NET MVC que cada registro possui uma checkbox, eis o código abaixo da view:

<table class="table table-hover table-striped" id="tabelaProdutos">
<thead>
    <tr>
        <th>Tipo de Produto</th>
        <th>Cód. Categoria</th>
        <th>Produto</th>
        <th>Ativado</th>
    </tr>
</thead>
<tbody>
    @foreach(var item in Model.ListaProdutos)
    {
        <tr>
            <td>@item.Tipo</td>
            <td align="right">@item.Categoria</td>
            <td>@item.Descricao</td>
            <td align="justify" onclick="AtivarProduto(@item.ID)">@Html.CheckBoxFor(model => item.Ativo)</td>
        </tr>
    }
</tbody>

Como posso pegar o valor da checkbox do item que acabei de clicar para ser usado para outros propósitos?

1 Resposta 1

1

você pode adicionar uma classe ao seu CheckBox, então usar ela como seletor.

@Html.CheckBoxFor(model => item.Ativo, new { @class = "ckAtivo" })

e no jQuery fazer o seguinte.:

$("#tabelaTiposCartao").on("click", ".ckAtivo", function () {
    console.log(this.value);
});

o this.value vai ser o valor do checkbox. mas acredito que estaá abordagem faz o que você quer, porém não vai resolver o seu problema.

SUGESTÕES

Primeiro ponto seria quanto ao uso do foreach para montar a sua tabela, ao faze-lo, o Razor se perde na hora de atribuir um id e um name aos inpus,, então possivelmente você não vai receber os dados quando enviar eles de volta ao servidor.

então você tem duas opções, usar um for ou o nuget BeginCollectionItem

usando um 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>
}

mas para usar esta abordagem, o seu ListaProdutos precisa ser um Tipo concreto como um Array<T> ou uma List<T> e não uma interface como o IEnumerable<T>, se este for o seu caso, a sua única opção será o pacote do nuget acima citado.

usando o 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>
}

Agora por valor do CheckBox, ele vai ter o valor da propriedade Ativo, ou seja true ou false, mas se você estiver interessado no ID, você terá de armazena-lo em algum lugar, como por exemplo em um Hidden.

E eu aplicaria uma classe na linha, para que eu pudesse pegar ela no javaScript e usar a linha como escopo para as minhas funções futuras.

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>
}

agora segue o 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);   
});

no script acima, ele seleciona todas as linhas com a classe .trProduto então para cada linha ele procura os inputs cujo id termina com ID eAtivo.

Porém tomei a liberdade de criar uma "Classe" para ajudar a delimitar um escopo para cada linha, aqui chamado de produto.

se precisar ter acesso a outros dados, tais como o Tipo, Categoria ou Descricao, então crie um HiddenFor para eles também e faça a busca por eles dentro do objeto Produto, uma alternativa é pegar a propriedade textContent de this.dom.celulas[i], onde i será 0, 1 ou 2.

4
  • interessante, mas como pego o valor da checkbox?: Commented 15/07/2016 às 13:32
  • @GustavoCorreiaSantos fiz uma longa edição na resposta, porém fui muito além do escopo da sua duvida, caso tenha alguma duvida sobre algumas das sugestões, por favor abra uma nova pergunta. Commented 15/07/2016 às 13:51
  • Uma pegunta: Este BeginCollectionItem substitui o for? ou precisa fazer o laço? Commented 15/07/2016 às 14:47
  • Sim, ele substitui. Commented 15/07/2016 às 14:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .