user3407039 user3407039 - 3 days ago 5
C# Question

Use Ajax actionlink for entire table row

At the moment I am using the following code to display information in a partial view below my 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>
}


This works perfectly fine. However I want to make the entire table row to be clickable not just the person's first name. I can't seem to find a similar question to this.

Answer

Could always do it in a bit of a hacky way... This javascript is not exactly robust - jQuery might be safer, but it should at least work with any luck!

Basically I've hidden the original link (with the ajax event hooked up on click), and created a dummy copy next to it. Then added an onClick event for the entire row that fires the click event on the original link! The reason why I've hidden the original link is to prevent the click event firing twice when the link is clicked directly.

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