Question

我正在尝试创建用于删除记录的通用删除确认对话框屏幕。我已经创建了一个组件文件作为“删除剃须刀”页面，以便从其他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">&times;</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

        }

Answer 1

这可能就是您想要的。

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">&times;</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
}

如何从控制器调用剃须刀页面组件

1 个答案: