如何显示详细数据表与 asp.net 中的行 ID 相关的核心视图在 "a" 标签中定义

Question

我在我的 asp.net 核心 MVC 中定义了两个数据table，它们都工作正常。其中一个是 master table ，另一个是 detail 并与 Id 相互关联。我放置了一个“a”标签来调用 detail table，输入“id”作为过滤器，但是当我点击我的 link 时，它没有传递任何信息给我的操作。我复制了我的控制器和下面的按钮：

我的get方法仅供查看；

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

我的 post 方法发送数据table 查询到 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;
        }
    }

我的老师 html 在脚本标签中带有“详细信息”按钮 :

  @{
  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

方法一：

请使用<a href="@Url.Action("ActionName", "ControllerName", new { filterName = "", filterValue = '' })">Click</a>；调用您的 SalesDetail 方法。

方法二：

在标签中添加 onclick 事件，并使用 ajax 在控制器中调用您的方法。

如何显示详细数据表与 asp.net 中的行 ID 相关的核心视图在 "a" 标签中定义

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

html

javascript

model-view-controller

asp.net-core

asp.net-core-tag-helpers