Razor页面实现双击表格行获取对应行数据

Blazor（Server/WASM）实现方案 #

如果你的项目是Blazor类型，直接利用Blazor的事件绑定就能快速实现：

1. 定义数据模型与数据源 #

@code {
    // 示例数据模型
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }

    // 模拟数据源
    private List<Product> _productList = new()
    {
        new Product { Id = 1, Name = "无线耳机", Price = 299.9M },
        new Product { Id = 2, Name = "机械键盘", Price = 499.9M },
        new Product { Id = 3, Name = "电竞鼠标", Price = 199.9M }
    };

    private Product _selectedRowData;
}

2. 渲染表格并绑定双击事件 #

在Razor视图中循环渲染表格行，给每行绑定@onclick:dblclick事件，直接传递当前行的数据对象：

<table class="table table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>商品名称</th>
            <th>价格</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in _productList)
        {
            <tr @onclick:dblclick="() => HandleRowDoubleClick(product)">
                <td>@product.Id</td>
                <td>@product.Name</td>
                <td>@product.Price</td>
            </tr>
        }
    </tbody>
</table>

<!-- 展示选中的数据 -->
@if (_selectedRowData != null)
{
    <div class="mt-3 p-3 border rounded">
        <h5>选中行详情</h5>
        <p>ID：@_selectedRowData.Id</p>
        <p>名称：@_selectedRowData.Name</p>
        <p>价格：@_selectedRowData.Price</p>
    </div>
}

3. 实现双击处理逻辑 #

在@code块中添加处理方法，拿到选中的行数据后即可执行后续业务逻辑（比如弹窗、提交等）：

private void HandleRowDoubleClick(Product selectedProduct)
{
    _selectedRowData = selectedProduct;
    // 这里可以添加自定义逻辑，比如调用API、打开模态框等
    Console.WriteLine($"双击了ID为{selectedProduct.Id}的商品行");
}

传统Razor Pages（后端渲染）实现方案 #

如果是传统的Razor Pages项目，结合JavaScript来实现：

1. 渲染表格并为行添加数据标识 #

在Razor视图中，给每行通过data-*属性存储行数据：

@model IndexModel

<table id="productTable" class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>商品名称</th>
            <th>价格</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in Model.Products)
        {
            <tr 
                data-id="@product.Id" 
                data-name="@product.Name" 
                data-price="@product.Price">
                <td>@product.Id</td>
                <td>@product.Name</td>
                <td>@product.Price</td>
            </tr>
        }
    </tbody>
</table>

<div id="selectedRowInfo" class="mt-3 p-3 border rounded" style="display: none;">
    <h5>选中行详情</h5>
    <p>ID：<span id="rowId"></span></p>
    <p>名称：<span id="rowName"></span></p>
    <p>价格：<span id="rowPrice"></span></p>
</div>

2. 添加JavaScript处理双击事件 #

在页面底部添加脚本，监听表格的双击事件，提取行数据并展示：

<script>
    // 监听表格双击事件
    document.getElementById('productTable').addEventListener('dblclick', function(e) {
        // 找到被双击的行元素
        const targetRow = e.target.closest('tr');
        if (!targetRow) return;

        // 提取行数据
        const rowId = targetRow.dataset.id;
        const rowName = targetRow.dataset.name;
        const rowPrice = targetRow.dataset.price;

        // 展示数据
        document.getElementById('rowId').textContent = rowId;
        document.getElementById('rowName').textContent = rowName;
        document.getElementById('rowPrice').textContent = rowPrice;
        document.getElementById('selectedRowInfo').style.display = 'block';

        // 可添加后续逻辑，比如AJAX提交数据
        console.log(`双击了ID为${rowId}的行`);
    });
</script>

内容的提问来源于stack exchange，提问作者Rajdeep Gupta