CODEWITHSUNDEEP
jqueryasp.net-mvc
Big Daddy
Big Daddy

Reputation: 5224

JQuery and MVC: Get Row(values) Based on CheckBox Selected

I've got a table with row data. Each row has a checkbox that will flag that row for processing. The table is populated with the aid of a DisplayTemplate as can be seen in the below code. When the user clicks the "Process" button, the code should iterate the table and add all selected rows to an array that will be sent to a web service. I thought this would be a simple thing to find an example on, but this hasn't been the case.

This is the table:

<table id="hes" class="table-striped table-condensed table-bordered">
        <thead>
            <tr>
                <th></th>
                <th>Detail Id</th>
                <th>Detail Reason Code</th>
                <th>Detail Status Code</th>
            </tr>
        </thead>
        <tbody>
            @if (Model.HesViewModels != null)
            {
                @Html.DisplayFor(i => i.HesViewModels)
            }
        </tbody>

I'm using this JQuery code to get the selected row and can't figure out how to get the row and it's corresponding values into an array.

$('#process').click(function () {
            var x = $('#hes tr').find('input[type="checkbox"]:checked').each(function () {
               // GET THE VALUES OF THE TDs ON THIS ROW AND STICK IN AN ARRAY
            });
        });

EDIT - Here's what the rendered source looks like for each row:

<tr>
    <td><input data-val="true" data-val-required="The Process field is required." id="HesViewModels_0__Process" name="HesViewModels[0].Process" type="checkbox" value="true" /><input name="HesViewModels[0].Process" type="hidden" value="false" /></td>
    <td>500116</td>
    <td>0</td>
    <td>1</td>
</tr>

Upvotes: 3

Views: 5859

Answers (2)

Shyju
Shyju

Reputation: 218702

$(function(){

  $("#process").click(function(e){
     e.preventDefault();

      var idArray=[]; 

     $("#hes").find('input[type="checkbox"]:checked').each(function (i,k) {

         var item =$(this);       

         //Read the Id of the selected checkbox item.

         idArray.push(item.attr("id"));

     }); 
     console.log(idArray);
     //idArray is an array which has the Id of the checked checkboxes
     //now you can send the idArray to your web service endpoint

  });

});

If you want to get any other attribute value other than the id, you may replace id the expression item.attr("id") with your custom attribute name.

Here is a working jsbin sample.

Edit : As per the comments, you want to send more data. It is not a good idea to send the markup of html row as it is(like you mentioned in the comment). It is best to get the required data you want and send it in format which the web service can easily understand. Having a web service end point which accepts the HTML string and parse it for some data is a bad idea !

So i suggest you to keep the data you want to send, in HTML 5 data attributes. You may update your razor code like

<tbody>
@if (Model.HesViewModels != null)
{
    foreach (var item in Model.HesViewModels)
    {
        <tr>
            <td>
                @Html.CheckBoxFor(s => item.Process, 
                                  new {data_detailid = item.DetailId,
                                       data_reasoncode = item.DetailRasonCode})
            </td>
            <td>@item.DetailId</td>
            <td>@item.DetailRasonCode</td>
        </tr>
    }
}
</tbody>

This will render the check box items with 2 data attributes, detailid and reasoncode

So in our jQuery code, We just need to read the data attribute values of the selected checkboxes.

$(function () {

    $("#yourProcessBtnId").click(function (e) {
        e.preventDefault();

        var itemsArray = [];     
        $("#hes").find('input[type="checkbox"]:checked').each(function (i, k) {

          var item = $(this);                     
          var row = { detailId:item.data("detailid"), reasonCode: item.data("reasoncode")} 
          itemsArray.push(row);

        });
        //you can send itemsArray now.
        console.log(itemsArray);

    });
});

itemsArray will be an array of object with properties detailId and reasonCode

Upvotes: 4

Andrei Olariu
Andrei Olariu

Reputation: 556

You're iterating through the checkboxes so you could use the .parents() function, (between your .find() and .each(), https://api.jquery.com/parents/) to select the containing trs and then iterate through them. Something like:

$('#process').click(function () {

    $('#hes tr').find('input[type="checkbox"]:checked').parent('tr').each(function () {
    // GET THE VALUES OF THE TDs ON THIS ROW AND STICK IN AN ARRAY
    });
});

Alternatively, you could do something like this:

$('#process').click(function () {
    $('#hes tbody tr').each(function () {
        var $self = $(this);
        if ($self.find(':checkbox').is(':checked'))
        {
            // Here you must look for values within the row (give your tds different ids, or class names to be able to select them 

            var someValue = $self.find('td.someValue').text();
            // use the value to stick it into the array

        }
    });
});

You can stick the values into the array like in @Shyju's answer.

Upvotes: 0

Related Questions