how to get the value of a specific checkbox in asp.net mvc using JQuery

0

I have a table in a system in ASP.NET MVC that each record has a checkbox, here is the code below the 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>

How can I get the checkbox value of the item I just clicked to use for other purposes?

    
asked by anonymous 15.07.2016 / 15:12

1 answer

1

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 .

    
15.07.2016 / 15:22