how can I call Razor file from cshtml

Question

User-1355965324 posted

I am trying to create Delete Confirmation dialogue as a general component file to call   from    everywhere in the project for deleting  purpose of the record. I created   Delete Confirmation  razor file as component  and I want to call the razor file from other delete screen

Here is my component

// ConfirmBase.cs
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);
        }
    }
}

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>

How can I call  the Confirm.razor from my Index.cshtml

<button type="button" class="btn btn-danger m-1" onclick="Delete_Click">                                 
                                Delete
                            </button>

Index controller

public IActionResult Delete_Click()
        {
             return View(); // Here I would like to call Confirm.razor
        }

Please  help how can I call the razor file

Answer 1

User475983607 posted

View components are designed to render consistent dynamic content from the server.  For example, a menu for an admin or a menu for a user knowing the user's role.  IMHO, a view components is not a good fit for your application which requires user interaction.   

Answer 2

User-474980206 posted

view components are for render only, they do not support post back logic, as you appear to trying to do. also razor pages do not support click event handlers like webforms. if you name the button, it will be included in the post back data.

as its just a javascript popup, you should move the delete button to the component and replace the onclick with show modal logic. remove the useless callback code. also have the modal hidden by default.

then in component:

               <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger" name="submit" value="delete">Delete</button>
                </div>

add "submit" property to the post back model. then id submit=="delete" it was a delete operation.

to render the button its:

   @await Component.InvokeAsync("ConfirmBase")

this will render the button and its modal (hidden). 

Answer 3

User711641945 posted

Hi polachan,

It seems you use balzor component,I think you could integrate the components to the other view and when you click the button to return the view.

Reference:

https://stackoverflow.com/a/63682831/11398810

Why not using the view component in asp.net core mvc?I think it could be less limited than using blazor components.

Reference:

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-3.1

Here is a working demo:

1.Create Views/Shared/Components/DeleteConfirm/Default.cshtml:

2.Create ViewComponents/DeleteConfirmViewComponent.cs:

namespace Mvc2_2.ViewComponents
{
    public class DeleteConfirmViewComponent : ViewComponent
    {

        public async Task<IViewComponentResult> InvokeAsync()
        {
            var items = new DeleteModel();
            return View(items);
        }
    }
}

3.Model:

public class DeleteModel
{
    public string ConfirmationTitle { get; set; } = "Delete confirmation";
    public string ConfirmationMesssge { get; set; } = "Are you sure you want to Delete ?";
}

4.View(Views/Home/Index.cshtml):

<button type="button" class="btn btn-danger m-1" data-toggle="modal" data-target="#exampleModal">
    Delete
</button>
@await Component.InvokeAsync("DeleteConfirm")

5.View Component(Views/Shared/Components/DeleteConfirm/Default.cshtml):

@model DeleteModel
<div class="modal fade" 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">@Model.ConfirmationTitle</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @Model.ConfirmationMesssge
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </div>
</div>

6.HomeController:

public async Task<IActionResult> Index()
{
    return View();
}

Result:

Best Regards,

Rena