可点击的表格行 ASP.NET Core - C#

在 ASP.NET Core 中，你可以创建一个可点击的表格行，允许用户通过点击行来执行某些操作或导航到其他页面。本文将介绍如何在 ASP.NET Core 中实现可点击的表格行，并提供代码示例供参考。

实现步骤

1. 创建一个带有表格展示数据的视图。

@model IEnumerable<YourModelClass>

<table>
    <thead>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <!-- 添加其他列 -->
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr class="clickable-row" data-href="@Url.Action("ActionName", "ControllerName", new { id = item.Id })">
                <td>@item.Column1</td>
                <td>@item.Column2</td>
                <!-- 添加其他列 -->
            </tr>
        }
    </tbody>
</table>

@section scripts {
    <script>
        $(document).ready(function () {
            $(".clickable-row").click(function () {
                window.location = $(this).data("href");
            });
        });
    </script>
}

2. 创建对应的控制器和操作方法。

public class ControllerNameController : Controller
{
    public IActionResult ActionName(int id)
    {
        // 执行操作或跳转到其他页面
        return View();
    }
}

3. 配置路由。

在 Startup.cs 文件的 Configure 方法中增加路由配置：

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
});

代码说明

• 在视图中，我们通过循环生成表格的每一行，并给每个 <tr> 元素添加了 clickable-row 类名和 data-href 属性。clickable-row 类名用于 CSS 样式定义，而 data-href 属性用于存储点击行后跳转的 URL。
• 我们使用 JavaScript/jQuery 来实现点击行时的页面跳转。.clickable-row 类名用于选择所有可点击的行，注册点击事件后，通过 window.location 实现页面跳转。
• 控制器的操作方法中可以执行一些操作或者返回其他页面。

以上就是实现可点击的表格行的基本步骤。你可以根据自己的需要进行修改和扩展。希望对你有所帮助！