how can I call razor page component from the controller

Question

I am trying to create a general purpose Delete Confirmation dialogue screen for deleting the record . I have created a component file as Delete razor page to call from other MVC controller as re-use of razor page. Here is my code 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>

namespace 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);
    }
}

Now I am trying to call the Confirm dialogue from the home controller 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>

Home controller

 public IActionResult Delete_Click()
        {
            return RedirectToPage("Confirm"); Confirm.razor must be called

        }

Answer 1

This is might be what u want.

1. Create Razor component 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. integrate Razor components into View Delete_Click.cshtml.

<app>
    <component type="typeof(MVC_RazorComponents.Views.Conf)" render-mode="ServerPrerendered" />
</app>

3. Use <a> tag instead of <button>. Click to redirect to controller.

<a asp-action="Delete_Click" class="btn btn-danger m-1">Delete</a>

4. Return View with razor component from controller.

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