对整个 table 行使用 Ajax 操作链接

Question

目前我正在使用以下代码在 table -

下方的部分视图中显示信息

@foreach (var item in Model)
{
    <tr>
        <td>
            @Ajax.ActionLink(
                item.FirstName,
                "DisplayApplication",
                new { ID = item.ColleagueID },
                new AjaxOptions { UpdateTargetId = "Application" }
            )
        </td>
        <td>
...
        </td>
        <td>
...
        </td>
        <td>
...
        </td>
        <td>
...
        </td>
    </tr>
}

这很好用。但是我想让整个 table 行都可以点击，而不仅仅是这个人的名字。我似乎找不到与此类似的问题。

Answer 1

总是可以用一些 hacky 的方式来做... 这个 javascript 并不十分健壮 - jQuery 可能更安全，但它至少应该可以正常工作！

基本上我已经隐藏了原始的 link（点击时连接了 ajax 事件），并在其旁边创建了一个虚拟副本。然后为整行添加一个 onClick 事件，触发原始 link 上的点击事件！之所以隐藏原来的link，是为了防止直接点击link时点击事件触发两次。

@foreach (var item in Model)
{
    <tr onClick="this.children[0].children[0].click();">
        <td>
            @Ajax.ActionLink(
                item.FirstName,
                "DisplayApplication",
                new { ID = item.ColleagueID },
                new AjaxOptions { UpdateTargetId = "Application" },
                new { style="display:none;" }
            )
            <a href="javascript:void(0);">@item.FirstName</a>
        </td>
        <td>
...
        </td>
        <td>
...
        </td>
        <td>
...
        </td>
        <td>
...
        </td>
    </tr>
}

Answer 2

很好的答案，谢谢，它让我想到了这个替代版本...

<tr onclick="DoAjaxCall(@row.Key)">

这是 Javascript 函数，其中 "preview" 是我的操作...

function DoAjaxCall(row) {
        var url = '@Url.Action("Preview", "myController")' + '?rowKey=' + row;
        $.get(url, null, function (data) { $("#previewPane").html(data); });
    }

我的页面包含一个简单的 div 元素...

<div id="previewPane"></div>

并且在我的控制器中，我使用了可为空的参数...

    public PartialViewResult Preview(int? rowKey = null)
    {
        if(rowKey != null)
        { 
            /* do stuff */
        }
        return PartialView("_Preview");
    }

对整个 table 行使用 Ajax 操作链接

Use Ajax actionlink for entire table row

c#

model-view-controller

actionlink