通过单击MVC 4中的ActionLink来隐藏行

Question

我想知道如果在MVC中单击动作链接有一些隐藏行的方法，但无论如何都要通过动作链接传递。我只想在客户页面上隐藏它。

就像这里一样。当用户点击Add Friend动作链接时，整行将被隐藏。 我应该用JavaScript做这个吗？

这是我目前的观点：

@model IEnumerable<DesignedAppNew.Models.UserProfile>

@{
    ViewBag.Title = "ListAllFriends";
}

<script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        $("ID").click(function () {
            $(this).closest("tr").hide();
        });
    });
</script>

<h2>Add some new friends:</h2>

<table>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.UserId) 
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.UserName) 
        </td>
        <td>
            @Html.ActionLink("Add Friend", "AddNewFriend", new { id = "ID" })
        </td>
    </tr>
}

</table>

Answer 1

你可以使用jquery作为： -

 $(document).ready(function(){
   $(".friend").click(function(){
      $(this).closest("tr").hide();
   });
});

在您的更新中，所有操作链接都具有相同的ID，这是错误的：

@Html.ActionLink("Add Friend", "AddNewFriend", null, new { @class="friend" })

Answer 2

您无法在HTML中重复ID，请尝试此操作;

@Html.ActionLink("Add Friend", "AddNewFriend", null, new { @class = "addfriend" })

$(document).ready(function () {
    $(".addfriend").click(function (event) {
        event.preventDefault();
        $(this).closest("tr").hide();
    });
});