C#, Razor Pages. I have a Partial View called _Articles. It displays Articles in a table. Articles are populated from a Model. It also contains button (okay, not button, anchor) for deleting articles: <a asp-page-handler="delete" asp-route-ArticleId="@item.Id" id="deleteBtn" class="btn bg-danger mr-1">Delete</a>
. @item.Id is unique id of each article. This is processed by get handler in parents page, request looks like this: /Orders/Edit/1/58?handler=delete. So far so good.
But I would like to achieve this without postback, which is impossible with get, right?. So I created another button:
<form method="post">
<input type="submit" class="btn bg-danger mr-1 delete" id="@item.Id" asp-route-ArticleId="@item.Id" asp-page-handler="delete" value="Delete" />
</form>
And I created new post handler in parents page. Post request goes to same url as get request and yes, it is working.
But it still does postback which I would like to avoid. So now I would like to use ajax and I’m fighting with it. I add css ‘delete’ class to every button which I would like to use. Then I used this jquery:
$('.delete').on('click', function (evt) {
evt.preventDefault();
$.ajax({
type: "POST",
url: window.location.href + '?handler=Delete',
data: $('form').serialize(),
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
success: function () {
$('#articles').load(window.location.href + '?handler=Refresh');
}
}
)
});
Obviously it can’t work, because I’m missing the @item.Id parameter in url. But I don’t know how to pass it. Should I use another jquery selector to find nearest @item.Id? This should not be that hard, I can see the correct url in a formaction of the button, but how to access it with jquery?
Whole partial view:
@model IEnumerable<Models.ArticlesInOrder>
<table class="table">
<tr>
<th></th>
<th>PN</th>
<th>Name</th>
<th>Nickname</th>
<th>Quantity</th>
</tr>
@foreach (var item in Model)
{
var tm = "#myModal" + item.Id;
var mid = "myModal" + item.Id;
<tr>
<td>
</td>
<td>
@item.Article.PN
</td>
<td>
@item.Article.Name
</td>
<td>
@item.Article.Nickname
</td>
<td>
@item.Quantity
</td>
<td>
<a asp-page="EditArticle" class="edit" asp-route-id="@item.Id">Edit</a>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="@tm" formmethod="post">
Delete
</button>
<div class="modal fade" id="@mid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Delete Confirmation</h4>
</div>
<div class="modal-body">
Are you sure want to delete this item?
</div>
<div class="modal-footer">
<a asp-page-handler="delete" asp-route-ArticleId="@item.Id" id="deleteBtn" class="btn bg-danger mr-1">Delete</a>
<form method="post">
<input type="submit" class="btn bg-danger mr-1 delete" id="@item.Id" asp-route-ArticleId="@item.Id" asp-page-handler="delete" value="Delete" />
</form>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
}
</table>
2
Answers
Use a click event to pass the ID into the ajax request, instead of button.click event listener.
Then you can pass the
@item.Id
into AJAX request indelete()
method.