如何在asp.net核心剃须刀页面中显示主/详细模式弹出

Posted 2023-03-27

【中文标题】如何在asp.net核心剃须刀页面中显示主/详细模式弹出

【英文标题】：how to show master/detail modal pop up in asp.net core razor page

【发布时间】：2021-08-02 12:26:52

【问题描述】：

在我的项目中，弹出窗口正常打开，但模态框内没有加载任何数据。 我认为问题出在脚本代码上，因为在调试中我注意到 OnGetPermissionAsync 无法通过按 permissionList 按钮运行

这是我的索引

@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>

它是我的 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));
        
    

它是我的 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();
            
        

它是我的 _RolePermissions

@model List<AccessLevel.DTOs.RolePermissionsListViewModel>

@foreach (var permission in Model)



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

【参考方案1】：

你的项目是一个razor-pages，url与mvc项目不同，url应该是

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

【讨论】：

我做了更改，但没关系:(

在你的OnGetPermissionAsync中做一个endpoint，观察下断点是否成功，id是否绑定成功。

你可以看到我的测试here。

在浏览器中输入F12，点击网络，点击按钮，查看网址。 Test

@MahdiAbbasi，您网络中的网址是什么？