In my ASP.NET MVC project, there is a table that shows the user view the information of file type and Id (Hidden).

Whenever the user put checked the checkboxes and clicks on the Send Request Mail Button, I want to get the IDs of the checked rows and pass them to the controller as a List of Ids.

This is the table view

<tbody> 
@foreach (var item in Model.ReqDocumentsViewModel.OrderByDescending(x => x.Id)) 
{  <tr >
    <td style="display:none;">@item.Id</td>
    <td>@item.FileType</td>
    <td>@item.Note</td> @if (item.RequestStatus == false) { <td> Not Requested; </td> } else { <td> Requested; </td> } <td>
      <input type="checkbox" value="@item.Id" id="chk" />
    </td>
    <td>
      <button type="button" onclick="RemoveReqDocument()" >Remove</button>
    </td>
  </tr> 
  } 
 </tbody>
<button type="button"  onclick="SendMailNotification();">Send Request Mail</button>

This is what I tried.

function SendMailNotification() {

  const selectedRows = [...$('table tbody tr:has("input:checked")')]
    .map(tr => [...$(tr).find('td:lt(1)')]
      .reduce((res, td) => (res[$(td).attr('prop')] = $(td).text(), res), {}))

  console.log(selectedRows)

  var newOrders = $.map(selectedRows, function (element) {
    var obj = {};
    for (var key in element) {
      obj.Id = key;

    }
    return obj;

  });

  $.ajax({
    type: "POST",
    url: "/Task/RequestDocument",
    data: JSON.stringify(newOrders),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (r) {
      if (r == false) {
        alert("You have to enter Order Qty first");
      } else {
        alert("Order Created");
        location.reload();
      }

    }
  });
}

In Controller

public JsonResult RequestDocument(List < ReqDocList > idQs) 
{

}

Model

public class ReqDocList
{
  public int Id { get; set; }
       
 }

CodePudding user response：

I want to get the IDs of the checked rows and pass them to the controller as a List of Ids.

Below is a work demo, you can refer to it.

ReqDocListVM:

public class ReqDocListVM
    {     
        public ICollection<ReqDocList> ReqDocList { get; set; }
    }

TaskController:

public class TaskController : Controller
    {
        public static List<ReqDocList> ReqDocList = new List<ReqDocList>()
        {
            new ReqDocList() {Id =1},
            new ReqDocList() {Id =2},
            new ReqDocList() {Id =3},
            new ReqDocList() {Id =4}
        };
        public IActionResult Index()
        {
            var model =new  ReqDocListVM();
            model.ReqDocList= ReqDocList;   
            return View(model);

        }
        public JsonResult RequestDocument(List<int> ids)
        {
            return Json(ids);
        }

    }

Index view:

@model ReqDocListVM

<table >
<tbody>
    @foreach (var item in Model.ReqDocList)
    {
            <tr  chk-id="@item.Id">
            <td>
                <input type="checkbox" value="@item.Id" id="chk" />
            </td>
            <td>
                <button type="button" onclick="RemoveReqDocument()" >Remove</button>
            </td>
        </tr>
    }
</tbody>
</table>
<button id="bt"type="button"  >Send Request Mail</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var Ids = [];       
        $(".even-pointer").click(function () {
            $(this).toggleClass("selected");
            var Id = $(this).attr('chk-id');
            if ($(this).hasClass("selected")) {
                Ids.push(Id);
            }
            else {
               Ids = Ids.filter(function (id) {
                    return id !== Id;
                });
            }                
            });

        $("#bt").click(function () {           
            console.log(Ids);
            $.ajax({
                type: "POST",
                url: "/Task/RequestDocument",
                data: { "ids": Ids },                
                success: function (response) {
                    alert(response);
                }
            });
        });
    });
</script>

result: