如何通過單擊表中的一行來加載局部視圖

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以找出正在單擊的行，然后顯示數據。 希望此源代碼能對某人有所幫助。