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分配给每一行，而class click函数将检查此data-id以找出正在单击的行，然后显示数据。希望这个源代码可以帮助别人。

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

1 个答案: