how to show master/detail modal pop up in asp.net core razor page

Question

In my project, the pop-up opens properly, but no data is loaded inside the modal. I think the problem is with the script code because in the debug I noticed that OnGetPermissionAsync does not run by pressing the permissionList button

its my index

@page "{handler?}"
@model AccessLevel.Areas.AccessLevel.Pages.AdminPanel.IndexModel
@{   
}
<table class="table table-striped table-bordered bootstrap-datatable datatable">
                    
                    <tbody>
                        @foreach (var item in Model.RoleList)
                        {
                            <tr>
                                <td>@user.RoleTitle</td>
                                <td class="center">@user.CreateDate</td>
                                <td class="center">@user.Description</td>
                                <td>
                                    <button class="btn btn-sm btn-dark details" data-id="@user.Id" data-toggle="modal" data-target="#details-modal">permissionList</button>
                                    </td>
                                
                            </tr>

                        }

                    </tbody>
                </table>


            <div class="modal fade" tabindex="-1" role="dialog" id="details-modal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Permission List</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body"></div>
                    </div>
                </div>
            </div>
@section scripts{
    <script>
        $(function () {
            $('button.details').on('click', function () {
                $('.modal-body').load(`/Index/Permission?id=${$(this).data('id')}`);
            });
        })
    </script>
}

its my index.cs

public class IndexModel : PageModel
    {
        private IRoleService roleService;

        public IndexModel(IRoleService roleService)
        {
            this.roleService = roleService; 
        }
        public List<AdminRoleListViewModel> RoleList { get; set; }
        public async Task<IActionResult> OnGetAsync()
        {
            RoleList = await roleService.GetRoleListInViewModel();
            return Page();
        }
        public async Task<PartialViewResult> OnGetPermissionAsync(int id)
        {
            
            return Partial("_RolePermissions", await roleService.GetRolePermissionsListAsync(id));
        }
    }

its my GetRolePermissionsListAsync

 public async Task<List<RolePermissionsListViewModel>> GetRolePermissionsListAsync(int roleId)
        {
           
                return await dBContext.RolePermissions.Include(r => r.FK_Permission).Where(r => r.FK_RoleID == roleId).Select((r => new RolePermissionsListViewModel()
                {
                    Id = r.ID,
                    PermissionTitle = r.FK_Permission.Title,                   

                })).ToListAsync();
            
        }

its my patial _RolePermissions

@model List<AccessLevel.DTOs.RolePermissionsListViewModel>

@foreach (var permission in Model)
{


    <div>
        <span class="d-inline-block">title:</span><span>@permission.PermissionTitle</span>
    </div>

}

Answer 1

Your project is a razor-pages,the url is different from mvc project,the url should be

  $(function () {
        $('button.details').click(function () {
            $('.modal-body').load(`?handler=Permission&id=${$(this).data('id')}`);
            $('#details-modal').modal('show');
        });
    })