CODEWITHSUNDEEP
c#razor
SEAKDev
SEAKDev

Reputation: 13

Parameter for razor page handler method always getting the same value

I have a razor page that displays a collection of entities in a table. There's a delete button with a named handler method that is supposed to delete the item from the collection by it's Id. The problem is no matter what row I hit delete on the top Log/row always gets removed. When I put a break point to debug on the handler method, the value of the LogId parameter is always the same(the Id of the Log at the top of the table).

.cshtml

<tbody>
    @foreach (var item in Model.Client.Logs.ToList())
    {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.TrnType)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TrnDte)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TrnAmount)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            <input type="hidden" name="LogId" value="@item.LogId" />
            <input onclick="return confirm('Are you sure you want to delete this?')" type="submit" class="btn btn-sm btn-danger" asp-page-handler="DeleteTransaction" value="Delete" />
        </td>
    </tr>
    }
</tbody>

.cshtml.cs

public async Task<IActionResult> OnPostDeleteTransactionAsync(int? LogId)
{
    //LogId always has the value of the Id from the first Log in the table
    //Delete log
}

Upvotes: 1

Views: 7504

Answers (1)

Dennis VW
Dennis VW

Reputation: 3207

Let me give you a visual example.

Say your Model.Client.Logs contains 2 items.

<tbody>
    @foreach (var item in Model.Client.Logs.ToList())
    {
    <tr>
        <td>
            <input type="hidden" name="LogId" value="@item.LogId" />
            <input onclick="return confirm('Are you sure you want to delete this?')" type="submit" class="btn btn-sm btn-danger" asp-page-handler="DeleteTransaction" value="Delete" />
        </td>
    </tr>
    }
</tbody>

The result of this would output

<tr>
    <td>
        <!-- First element named "LogId" -->
        <input type="hidden" name="LogId" value="123" />
        <input type="submit" asp-page-handler="DeleteTransaction" name="LogId" value="Delete" /> 
    </td>
</tr>
<tr>
    <td>
        <!-- Second element named "LogId" -->
        <input type="hidden" name="LogId" value="456" />
        <input type="submit" asp-page-handler="DeleteTransaction" name="LogId" value="Delete" /> 
    </td>
</tr>

You click on delete on the second row. Now the pagehandler method will look for an html element with the name of LogId to take its value.

But there are 2 elements with the name LogId (not counting the delete buttons).

The handler goes through your DOM, line by line until it discovers it has found what it was looking for. The first element named LogId. Great, now it can stop looking.

It has found the value and it returns it to the action. That's why your code doesn't work and why it's returning the first value it finds, because it isn't aware that there are actually more items named LogId. And even then, it wouldn't know which one you selected.

Upvotes: 1

Related Questions