CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcactionlink
nemo_87
nemo_87

Reputation: 4791

Hide row by clicking on ActionLink in MVC 4

I was wondering is there some way to hide one row if action link is clicked in MVC, but pass via action link anyway. I'm just trying to hide it on clients page.

Like here for example. When user click on Add Friend action link whole row will be hidden. Should I do this with JavaScript for example?

enter image description here

This is my current view:

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

Upvotes: 0

Views: 1118

Answers (2)

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18883

You can use jquery for this as :-

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

In your update all actionlinks will have same id this is wrong do it as :

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

Upvotes: 1

Saranga
Saranga

Reputation: 3228

You cannot repeat ID in your HTML, Try this;

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

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

Upvotes: 1

Related Questions