Update asp-route-id with jQuery-CodePudding

I'm building a razor pages application, and I want to use a modal as a partial view.

Foreach loop from where I'm opening the modal:

@foreach (var item in Model.SourceFiles)
                {

                    <tr>
                        <td>@item.Id</td>
                        <td>@item.FileName</td>
                        <td>@item.Created</td>
                        <td>
                            @(item.IsConverted == true ? "Exported" : "Imported")
                        </td>
                        <td>
                            <button type="submit"  asp-page-handler="FileContent" asp-route-fileId="@item.Id">View</button>
                        </td>
                        <td>
                            @if ((await authorizationService.AuthorizeAsync(User, "DeletePolicy")).Succeeded)
                            {
                                <a href="#"  onclick="triggerDeleteModal(@item.Id)">Delete</a>
                            }
                        </td>
                    </tr>
                }

I'm trying to set a new value of an asp-route-id tag using javaScript (jQuery), but I cant get it to work.

function triggerDeleteModal(itemId) {
    $('#'   'deleteModal').modal('toggle');
    $("#confirmDeleteButton").attr('asp-route-deleteid', itemId)
}

Modal (partial view):

<div  id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalTitle" aria-hidden="true">
    <div  role="document">
        <div >
            <div >
                <h5  id="deleteModalTitle">Caution!</h5>
            </div>
            <div >
                <p style="white-space: pre-wrap;">@Model.DeleteModalText</p>
                <p></p>
            </div>
            <div >
                <button type="submit" id="confirmDeleteButton"  data-bs-dismiss="modal">Yes</button>
                <button type="button"  data-bs-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>

When pressing the yes-button (#confirmDeleteButton) in the modal to submit the form, the id is not getting passed in the asp-route-deleteid tag helper, and the id is always 0 in the OnPost-method.

Code behind where deleteid always is 0:

public async Task<IActionResult> OnPostAsync(int deleteid)
{ 
    //code for deleting stuff
}

When trying to console.log the value of any attribute besides asp-route tags, the value is shown. When trying to log the value of an asp-route tag, the value is undefined.

Any ideas of how I can get the asp-route-deleteid to be passed to the code behind?

CodePudding user response：

The asp-route-* attribute works on tag helpers, which are server-side components. It is not rendered to the browser and is inaccessible to JavaScript. It is designed to work with elements that have an href, action or formaction attribute, and it either adds the attribute value to the query string of the generated href, or as a URL segment depending on the route template for the target page.

Generally, you shouldn't pass POST data within the URL, so instead, you can wire up a click event handler to the confirmDeleteButton that initiates an AJAX post that passes the deleteid:

$('#confirmDeleteButton').on('click, function(){
    $.post('/yourpage',{deleteid: itemId}, function(){
        // process the call back
    })
})