如何解决如何从控制器调用剃须刀页面组件
我正在尝试创建用于删除记录的通用删除确认对话框屏幕。我已经创建了一个组件文件作为“删除剃须刀”页面,以便从其他MVC控制器中调用它作为重复使用剃须刀页面。这是我的代码 Confirm.razor
@inherits ConfirmBase
<div class="modal fade show d-block " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">@ConfirmationTitle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"
@onclick="() => OnConfirmationChange(false)">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
@ConfirmationMesssge
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"
@onclick="() => OnConfirmationChange(false)">
Cancel
</button>
<button type="button" class="btn btn-danger"
@onclick="() => OnConfirmationChange(true)">
Delete
</button>
</div>
</div>
</div>
</div>
命名空间LibraryBooks.ViewComponents
public class ConfirmBase : ComponentBase
{
protected bool ShowConfirmation { get; set; }
[Parameter]
public string ConfirmationTitle { get; set; } = "Delete confirmation";
[Parameter]
public string ConfirmationMesssge { get; set; } = "Are you sure you want to Delete ?";
public EventCallback<bool> ConfirmationChanged { get; set; }
protected async Task OnConfirmationChange(bool value)
{
ShowConfirmation = false;
await ConfirmationChanged.InvokeAsync(value);
}
}
现在我正尝试从家庭控制器调用“确认”对话框 Index.cshtml
<div>
<a asp-action="ProductDetails" class="btn btn-primary form-control" asp-route-id="@product.ProductId">Details</a>
<button type="button" class="btn btn-danger m-1" onclick="Delete_Click">
Delete
</button>
</div>
家庭控制器
public IActionResult Delete_Click()
{
return RedirectToPage("Confirm"); Confirm.razor must be called
}
解决方法
这可能就是您想要的。
1。创建剃刀组件Conf.razor
。
@inherits {your namespace}.ConfirmBase
<div class="modal fade show d-block " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">@ConfirmationTitle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"
@onclick="() => OnConfirmationChange(false)">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
@ConfirmationMesssge
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"
@onclick="() => OnConfirmationChange(false)">
Cancel
</button>
<button type="button" class="btn btn-danger"
@onclick="() => OnConfirmationChange(true)">
Delete
</button>
</div>
</div>
</div>
</div>
2。将Razor组件集成到View Delete_Click.cshtml
中。
<app>
<component type="typeof(MVC_RazorComponents.Views.Conf)" render-mode="ServerPrerendered" />
</app>
3。使用<a>
标记代替<button>
。单击以重定向到控制器。
<a asp-action="Delete_Click" class="btn btn-danger m-1">Delete</a>
4。从View
返回带有剃须刀组件的controller
。
public IActionResult Delete_Click()
{
return View(); //Confirm.razor must be called
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。