如何通过单击表中的一行来加载局部视图

Question

我有两个局部视图，一个是_UserList，另一个是_UserDetail，它们都显示在索引中。

[index.cshtml]

@Styles.Render("~/Content/PagedList.css")

<h2>UserManagement</h2>

<hr />
    <div id="UserList">
        @Html.Partial("_UserList")
    </div>
<hr />
    <div id="UserDetail"></div>
<hr />

我已经有一个名为Details的链接，该链接是通过Ajax.ActionLink实现的，以在每行中显示细节。

链接的源代码为：

[_UserList.cshtml]

@Ajax.ActionLink("Details", "UserDetail", new { userId = item.ID }, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "UserDetail" })

单击“详细信息”后，_UserDetail将显示在_UserList下。

现在，我想实现一个可单击的行，当我单击_UserList中的表的一行时，该行可以使用参数：item.ID加载_UserDetail。

我已经尝试了很多方法，但是仍然无法成功实现。

有人可以帮我吗？

Answer 1

最后，我找到了一种使用jQuery实现此功能的方法。
源代码如下：

<table class="table table-hover>
    @foreach (var item in Model.TlmAbstractPagedList)
    {
        <tr data-id="@item.TlmId" class="clickableRow">
            <td>
                @Html.DisplayFor(u => item.DateStart) ~ @Html.DisplayFor(u => item.DateEnd)
            </td>
            <td>
                @Html.DisplayFor(u => item.Name)
            </td>
            <td>
                @foreach (var product in item.ProductInformation)
                {
                    <ul>product.ProductNameWithId</ul>
                }
            </td>
        </tr>
    }
</table>

<script>
    $('.clickableRow').click(function () {
        var targetRow = $(this).data('id');

        $.ajax({
            url: 'TlmManagement/TlmReport',
            data: { tlmId: targetRow },
            method: "GET",
            success: function (data) {
                $("#TlmDetail").empty();
                $("#TlmReport").empty();
                $("#TlmReport").html(data);
            },
            error: function (xhr, status, error) {
                alert(xhr.responseText);
            }
        });
    })
</script>

我将data-id分配给每一行，类click函数将检查该data-id以找出正在单击的行，然后显示数据。 希望此源代码能对某人有所帮助。