asp.net event handler for table click is called twice

Question

I have a table with some column in a asp.net mvc core project.

My view file looks like this

    <h1>Items</h1>
<div class="panel-body">
    <table class="table table-bordered table-responsive table-hover">
        <thead>
            <tr>
                <th>Id</th>
                <th>Title</th>

                <th>Rating</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Items)
            {
                <tr onclick="location.href='@(Url.Action("ShowItemDetails", "Item", new {Id = item.FilmId}))'">
                    <td>@item.Id</td>
                    <td>@item.Title</td>

                    <td>@item.Rating</td>
                    <td>@Html.ActionLink("Edit", "Edit", "Show", new { id = item.Id })  | @Html.ActionLink("Rate this", "RateItem", new { id = item.Id }) </td>

                </tr>
            }
        </tbody>
    </table>
</div>

The problem is that when i click on a row, the controller method ShowItemDetails is called twice(!). I can not see from the code above why this happens. Also, clicking on Edit or Rate this calls first ShowItemDetails and then immediately Edit or RateItem method in controller. Any suggestion how this can be solved?

use another button for details, i think because the event is applied for the `tr`(whole row).maybe like this `...| Details ` — Mohammed Sajid, May 30 '20 at 00:08
Does this answer your question? [MVC controller is being called twice](https://stackoverflow.com/questions/2751138/mvc-controller-is-being-called-twice) — akseli, May 30 '20 at 00:12
-not in my pc- what you are facing is event propagation/event bubelling, please have a look at this link https://stackoverflow.com/questions/7095826/stoppropagation-without-jquery ; you will need to add some extra javascript to prevent that. — TiGreX, May 30 '20 at 00:19
clicking on Edit or Rate this calls first ShowItemDetails and then immediately Edit or RateItem method because Edit is under a table row and on tablerow you have called showitemdetails. when you click on td , it gets first executed row then td function. We can propose solution if we know what you want to achieve. — Always_a_learner, May 30 '20 at 15:02

score 0 · Answer 1 · answered May 30 '20 at 15:12

Clicking on Edit or Rate this calls first ShowItemDetails and then immediately Edit or RateItem method because Edit is under a table row and on tablerow, you have called showitemdetails action.so, when you click on td , it gets first executed row action then td action.that's why it get called twice.

I hope, you want to show details and edit options with data of table and Edit is controller name.

Tweak your table code like below:

<tbody>
@foreach (var item in Model.Items)
  {
    <tr>
        <td>@Html.ActionLink("Show Details","ShowItemDetails","Item",new {Id = item.FilmId})</td>
        <td>@item.Id</td>
        <td>@item.Title</td>    
        <td>@item.Rating</td>
        <td>@Html.ActionLink("Edit", "Edit", "Show", new { id = item.Id })  | @Html.ActionLink("Rate this", "RateItem", new { id = item.Id }) </td>
    </tr>
  }
</tbody>

score 0 · Accepted Answer · answered May 30 '20 at 21:38

0

The problem seems to be caused be something i thought was irrelevant having a null image cause the method to be called twice. Setting it to solves this. Need to add code to check for Model.Image != null Very strange!!

answered May 30 '20 at 21:38

Teddy Consultant

53
6

asp.net event handler for table click is called twice

2 Answers2