单击时使 jQuery 数据表行成为 asp-action link

Question

我正在尝试创建一个 jQuery datable，当用户单击 table 行时，资产 ID 会传递给 ViewAsset 控制器。感谢您的帮助

HTML 标记：

<table id="tblAsset">
 <thead >
    <tr>
        <th>
           Asset Name
        </th>
        <th>
           Asset Type
        </th>
        <th>
           Data Type
         </th>
   </tr>
   </thead>
   <tbody>

  @foreach (var item in Model)
   {
     // Onclick function for each row

     <tr onclick="ViewAsset(@item.Id)">

        <td>
         @Html.DisplayFor(modelItem => item.AssetName)
        </td>
        <td>
          @Html.DisplayFor(modelItem => item.AssetType)
         </td>

         <td>
         @Html.DisplayFor(modelItem => item.TypeofData)
         </td>
    </tr>
   }
  </tbody>
 </table>

jQuery数据table

    <script type="text/javascript">
    $(document).ready(function () {
        $('#tblAsset').DataTable({
            "pageLength":10,
            "order": [[1, "asc"]],
        }
        );

    });

    // jQuery Function to call the controller

    function ViewAsset(id) {
        window.location.href = "Assets/ViewAsset/" + id;
    }
</script>

控制器动作link

 <a asp-action="ViewAsset" asp-route-id="@item.Id">

Answer 1

要为每一行处理一个点击事件，请为标签添加一个 onclick 事件。创建一个 js 函数，并将您尝试达到的操作的 url 指定为参数。

//Razor view
<tr onclick='CallController("@Url.Action("ViewAsset", "YourController", new { id = "123" }))"'></tr>

//JS CODE 
function CallController(url){
        $.ajax({
            url: url,
            complete: function () {

            }
        });
}

Answer 2

如果你想在点击行时重定向到另一个视图，你可以直接使用window.location.href访问控制器动作。

<tr onclick="ViewAsset(@item.Id)">

脚本：

<script type="text/javascript">
    $(document).ready(function () {
        $('#tblAsset').DataTable({
            "pageLength": 10,
            "order": [[1, "asc"]],
        }
        );

    });

    function ViewAsset(id) {
        window.location.href = "ControllerName/ActionName/" + id; 
    }

</script>

Answer 3

我找到了解决问题的更好方法。 Post 给以后遇到类似问题的人

<tr style="cursor: pointer;" onclick="location.href ='@(Url.Action("ViewAsset", "Assets", new { id = item.Id}))'">

单击时使 jQuery 数据表行成为 asp-action link

Make jQuery datatable row an asp-action link when clicked

javascript

datatable

asp.net-core-mvc