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

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.创建 Razor 组件 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 组件集成到视图 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. Return View 剃须刀组件来自 controller.

public IActionResult Delete_Click()
{
     return View(); //Confirm.razor must be called
}

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

how can I call razor page component from the controller

controller

razor

asp.net-core