I am trying to store the employeeIds from the selected row of the table into the model column EmployeeReinstateVM.selectedEmployeeId from the click event of 'btnUpdate', each id must be stored to EmployeeReinstateVM.selectedEmployeeId. Currently the Ids are stored in to selectedEmployeeId hidden column as array string "23,24,25" So I am trying to store each employee id of the selected rows into the EmployeeReinstateVM.selectedEmployeeId from javascript to send the model into controller post method with selected employeeIds. I am looking for the help from someone. Here is the code

Model Class

public class EmployeeReinstateVM
{
  public int EmployeeID { get; set; }
   public string EmployeeName { get; set; }
   public List<string> selectedEmployeeId { get; set; }
   public IEnumerable<EmployeeModel> employees { get; set; }      
}

Views

<style>
.selectable-row.selected {
        background-color: #ddd;
    }
</style>
@model EmployeeReinstateVM
foreach (var item in Model.employees)
{
  <tr selected" :"")" 
  employee-id="@item.EmployeeID">
  <td>@item.EmployeeID</td>
  <td>@item.EmployeeName</td>
  </tr>
  
}
 <input hidden id="selectedEmployeeId" asp-for="selectedEmployeeId" name="selectedEmployeeId" value="">
<button type="submit"  id="btnUpdate" name="btnActivate" value="update">
        Update
</button>
<script type="text/javascript">

$(document).ready(function() {
  var employeeIds = [];
  $(".selectable-row").click(function() {
    $(this).toggleClass("selected");
    var employeeId = $(this).attr('employee-id');

    if ($(this).hasClass("selected")) {
      employeeIds.push(employeeId);
      //employeeIds.push($(this).attr('employee-id'));
    } else {
      employeeIds = employeeIds.filter(function(id) {
        return id !== employeeId;
      });
    }
  });
  $("#btnUpdate").click(function() {
    $("#selectedEmployeeId").val(employeeIds);
    console.log($("#selectedEmployeeId").val());
  });
})

CodePudding user response：

This seems to be simpler - you need to store the result

$(".selectable-row").click(function() {
  $(this).toggleClass("selected");
  $("#selectedEmployeeId")
    .val(
      $("tr[employee-id].selected")
       .map(function() { return $(this).attr("employee-id") })
       .get()
       .join(",")
    );
});

CodePudding user response：

store each employee id of the selected rows into the EmployeeReinstateVM.selectedEmployeeId from javascript to send the model into controller post method with selected employeeIds

Do you want to try the below code?

 $("#btnSave").click(function () {
            $("#selectedEmployeeId").val(employeeIds);
            console.log($("#selectedEmployeeId").val());
            $.ajax({
                type: "POST",
                url: "/Keepselected/ReinstateEmployee",
                data: { "selectedEmployeeId": employeeIds },
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                success: function (response) {                 
                   alert(response);
                }

            });
        });

result: