How to show detail Datatable relate to row id in asp.net core view define in "a" tag

Question

I define two Datatable in my asp.net core MVC which both of them work fine. One of them is master table and the other one is detail and relate to each other with Id. I put an "a" tag to call detail table with the input of "id" to be filter but when I click on my link it pass nothing to my action. I copy my controller and also my button bellow:

my get method just for view;

   [HttpGet]
    public IActionResult SalesDetail()
    {
        //List<SalesViewModel> Ply = _sv.GetSales();
        return View("SalesDetail");
    }


      

my post method to send datatable query to sql:

    public IActionResult SalesDetail([FromQuery] int pId)
    {
        try
        {
            var dict = Request.Form.ToDictionary(x => x.Key, x => x.Value.ToString());
            var parser = new Parser<Sales15DetailViewModel>(ToNameValueCollection<string, 
         string>(dict),
                       _sv.GetSalesDetail(pId));
            var data = parser.Parse();
            var ss = Json(data);
            return Json(data);
        }
        catch (Exception ex)
        {
            return null;
        }
    }

my mater html with button "detail" in script tag :

  @{
  ViewData["Title"] = "list";

   }
  @section Style{

 <link rel="stylesheet" type="text/css" href="/DataTables/DataTableCustom.css" />
 <link href="/dist/css/persianDatepicker-default.css" rel="stylesheet" />
  }
<div class="card-body">
    <div style="width:100%;height:800px;">
        <table id="demoGrid" class="table  table-fixed table-striped table-hover">
        </table>
    </div>
</div>

  @section Scripts{

<script src="/dist/js/persianDatepicker.js"></script>
<script type="text/javascript" src="/DataTables/datatables.min.js"></script>

<script>
    var dataTable;
    $(document).ready(function () {
        loadDataTable();
    });

    function loadDataTable() {
        $(".yadcf-filter-range-date").persianDatepicker();
        dataTable = $('#demoGrid').DataTable({
            serverSide: true,
            processing: true,
            //searchDelay: 500,
            pageLength: 10,
            infoFiltered: true,
            orderMulti: false,
           
            
            "ajax": {
                "url": "SalesDetail",
                "type": "POST",
                "datatype": "json"
            },

            "columns": [
                { "data": "PId", "searchable": true,  "name": "PId", "autoWidth": true },
                { "data": "BNo", "searchable": true,  "name": "BNo", "autoWidth": true },
                { "data": "PrvId", "searchable": true,  "name": "PrvId", "autoWidth": true },
                { "data": "PrvNo", "searchable": true, "name": "PrvNo", "autoWidth": true },
                { "data": "SDate", "searchable": true, "autoWidth": true },
                { "data": "HDate", "searchable": true, "name": "HDate", "autoWidth": true},
            
                {
                    "data": "PId",
                    "render": function (data, type, full, meta) {
                        return `<div class="text-center">
                               <a asp-controller="Report" asp-action="SalesDetail" asp-route- 
    pId="${data}"
                            href="/api/Report/SalesDetail?id=${data}" class="btn btn-primary 
    text-white  btn-lg" style='cursor:pointer; width:100px;'>
                               Detail
                               </a>
                             </div> `;
                    }

                }
            ]
        });
        ]);
       }
    
    </script>
 }

Answer 1

Method 1:

Please use <a href="@Url.Action("ActionName", "ControllerName", new { filterName = "", filterValue = '' })">Click</a>; to invoke your SalesDetail method.

Method 2:

Add onclick event in a Tag, and use ajax to invoke your method in controller.