MVC 5 How create clickable row to reconnect to customer edit with id from table?

Question

I need to enable click on the row of table to reconnect to customer edit view , I need customer id. @*@Html.ActionLink("Edit", "Edit", new { id=customer.CustomerId })

Customer View List:

    <table>
    <thead>
    <tr>
        <th>Name</th>
        <th>Surname</th>
     </tr>
    </thead>
    <tbody>
    @foreach (var customer in Model.Customers)
    {
        <tr>
            <td>@customer.Name</td>
            <td>@customer.Surname</td>
         </tr>
    }
    </tbody>
</table>

You haven't demonstrated what you have tried and what went wrong? — IronAces, Aug 07 '18 at 09:02

score 4 · Accepted Answer · answered Aug 07 '18 at 09:08

4

you can add the attribute onclick on your tr tag like this :

  <tr onclick="location.href = '@Html.ActionLink("Edit", "Edit", new { id=customer.CustomerId }))'">
    <td>@customer.Name</td>
    <td>@customer.Surname</td>
 </tr>

answered Aug 07 '18 at 09:08

AlexiAmni

382
1
15

Thx, its great! – Marcin Rakoczy Aug 07 '18 at 20:47
1

Correct: – Marcin Rakoczy Aug 16 '18 at 16:22
Can anyone also suggest how to change the clickable row css onmouse hover please – Sam May 19 '23 at 08:12

score 2 · Answer 2 · answered Aug 07 '18 at 11:59

I would approach this like the below.

Use css to use as a JQuery selector, obtain the id from the data attribute and then use window.opener passing in the customer id.

CSS Style

.ClickToEdit {
}

View HTML with data-customerid attribute set from model

Class is set on the row.

 <tr class="ClickToEdit" data-customerid="@customer.CustomerId">
   <td>
      @customer.Name
    </td>
 </tr>

JQuery to intercept click and open URL

$(document).on("click", ".ClickToEdit", function () {
    var custID = $(this).data("customerid"); 
    window.opener.location.href("/Edit/Edit?id=" + custID);
});

Hope that helps

MVC 5 How create clickable row to reconnect to customer edit with id from table?

2 Answers2