Question

目前我正在使用以下代码在我的表格下方的部分视图中显示信息 -

@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>
}

这完全没问题。但是我想让整个表格行可以点击，而不仅仅是这个人的名字。我似乎无法找到类似的问题。

Answer 1

可以总是以一种黑客的方式做到这一点...... 这个javascript并不完全健壮 - jQuery可能更安全，但它应该至少可以运气！

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

@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功能，其中“预览”是我的行动......

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");
    }

对整个表行使用Ajax actionlink

2 个答案: