如何在尝试使用 Razor Pages 删除 ASP.NET Core 中的记录时显示确认消息
Posted
技术标签:
【中文标题】如何在尝试使用 Razor Pages 删除 ASP.NET Core 中的记录时显示确认消息【英文标题】:How do I display a confirmation message with trying to delete a record in ASP.NET Core using Razor Pages 【发布时间】:2019-12-14 19:46:51 【问题描述】:我正在使用 Razor 页面,当用户单击删除按钮时似乎很难显示确认消息。
在我的 Index.cshtml 我有:
<a asp-page-handler="Delete" asp-route-id="@item.Id" id="deleteBtn" class="btn bg-danger mr-1"><i class="fas fa-trash-alt text-white"></i></a>
这些是作为 foreach 循环的一部分生成的。
我的删除方法:
public async Task<IActionResult> OnGetDelete(Guid id)
if (id == null)
return NotFound();
var record = await _context.LoadTable.FindAsync(id);
if (record != null)
_context.LoadTable.Remove(record);
await _context.SaveChangesAsync();
return RedirectToPage("./Index");
我正在使用 Bootstrap,因此理想情况下希望使用它的模式来显示消息。显示消息不是问题,而是我需要停止触发该方法,直到用户确认这是他们想要做的事情,并且对于 Razor Pages,我似乎正在苦苦挣扎。
我的想法是在模式中使用删除按钮,而删除按钮显示模式,但我不确定如何传递 @item.Id。
或者使用 javascript 来拦截按钮点击?
【问题讨论】:
【参考方案1】:你可以使用这个标签来调用你的删除处理程序。
<a asp-page-handler="Delete" asp-route-id="@item.Id" onclick="return confirm('Are you sure you want to delete this?')">
<i class="trash"></i>
</a>
【讨论】:
你可以使用这个标签来调用你的删除处理程序【参考方案2】:您可以为引导模式的数据目标属性和模式 id 指定不同的值,请参阅我的示例演示:
索引.cshtml
@foreach (var item in Model.Cars)
var tm = "#myModal" + item.Id;
var mid = "myModal" + item.Id;
<tr>
<td>
@Html.DisplayFor(modelItem => item.Id)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
<a asp-page="./Edit" asp-route-id="@item.Id">Edit</a> |
<a asp-page="./Details" asp-route-id="@item.Id">Details</a> |
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="@tm">
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-Id="@item.Id" id="deleteBtn" class="btn bg-danger mr-1">Delete</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
【讨论】:
【参考方案3】:亲爱的@Fullen,我看到了您的问题,并遇到了您想在删除操作调用之前使用带有确认消息的链接调用 OnGetDelete 操作的问题。这可能是我的代码帮助你。
<a href="~/YourControllerName/OnGetDelete?id=@item.id" id="deleteBtn" class="btn bg-danger mr-1" onclick="return confirm('Are you sure you want to delete?');"><i class="fas fa-trash-alt text-white"></i>Delete</a>
【讨论】:
【参考方案4】:出于安全原因,我认为最好将按钮放入form
以执行DELETE
的操作
用这种方法,你可以试试:
<form asp-page-handler="Delete" method="OnGetDelete" asp-route-id="@item.Id"
onclick="return confirm('Are you sure you want to delete this?')">
<button type="submit" class="btn btn-default"><i class="fas fa-trash-alt text-white"></i></button>
</form>
【讨论】:
以上是关于如何在尝试使用 Razor Pages 删除 ASP.NET Core 中的记录时显示确认消息的主要内容,如果未能解决你的问题,请参考以下文章
Razor Pages Anchor Tag Helper 不会从 href 中删除索引
如何在 Razor Pages 路由的开头添加应用程序名称?
如何在 ASP.NET Core Razor Pages 项目的 _layout.cshtml 文件中使用 Razor Page Using Entity Framework 作为部分视图?