Razor Pages 异步任务 return 到模态

Question

我是 Razor Pages 的新手，我找不到真正解决我的问题的方法。

我有一个模式，我想在其中更新身份角色（Add/Remove 用户）。异步任务工作正常，我有成员和非成员的列表，但模式在 post 后自行关闭。我如何防止它（模态关闭）在这种情况下正确的 return 是什么？

C#

public async Task<IActionResult> OnPostAddtoRoleAsync()
{
    if(Input != null) 
    { 
    ToolboxRoles role = await _RoleManager.FindByIdAsync(Input.Id);
    List<ToolboxUser> members = new List<ToolboxUser>();
    List<ToolboxUser> nonMembers = new List<ToolboxUser>();
    foreach (ToolboxUser user in _UserManager.Users)
    {
        var list = await _UserManager.IsInRoleAsync(user, role.Name) ? members : nonMembers;
        list.Add(user);
    }

        Input.Role = role; 
        Input.Members = members;
        Input.NonMembers = nonMembers;
    }
    return Page(); //I don't know what is the correct return action here, so the modal stay showed
}

函数调用：

                           <form method="post">
                                <button asp-page-handler="AddtoRole" asp-route-id="@item.Id" class="btn btn-default" data-id="@item.Id" data-name="@item.Name" data-toggle="modal"
                                        data-target="#EditRole" data-backdrop="static" data-keyboard="false" style="margin-bottom: 10px;">
                                    Update
                                </button>

模态：

<div id="EditRole" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #ffd800">
                <h4 class="modal-title" style="text-align:left">Update Role</h4>
            </div>
            <div class="modal-body" style="background-image: linear-gradient(#ffd800,#fff)">
                <form method="post">
                    <input type="text" id="modal_name" asp-for="Input.RName" />
                    <input type="text" id="modal_id" asp-for="Input.Id" />
                    @if (Model.Input != null)
                    {
                        <div class="row">
                            <div class="col-md-12" style="background-image: radial-gradient(#ffd800,#fff);border: 1px solid #f11322;margin-bottom: 10px;">
                                <h4 id="modal_text1" class="font-weight-bold" style="color: #f11322;"></h4>
                            </div>
                        </div>

                        <table class="table table-bordered table-sm">
                            @if (Model.Input.NonMembers.Count() == 0)
                            {
                                <tr><td colspan="2">All Users Are Members</td></tr>
                            }
                            else
                            {
                                @foreach (ToolboxUser user in Model.Input.NonMembers)
                                {
                                    <tr>
                                        <td>@user.UserName</td>
                                        <td>
                                            <input type="checkbox" name="AddIds" value="@user.Id">
                                        </td>
                                    </tr>
                                }
                            }
                        </table>

                        <div class="row">
                            <div class="col-md-12" style="background-image: radial-gradient(#ffd800,#fff);border: 1px solid #f11322;margin-bottom: 10px;">
                                <h4 id="modal_text2" class="font-weight-bold" style="color: #f11322;"></h4>
                            </div>
                        </div>
                        <table class="table table-bordered table-sm">
                            @if (Model.Input.Members.Count() == 0)
                            {
                                <tr><td colspan="2">All Users Are Members</td></tr>
                            }
                            else
                            {
                                @foreach (ToolboxUser user in Model.Input.Members)
                                {
                                    <tr>
                                        <td>@user.UserName</td>
                                        <td>
                                            <input type="checkbox" name="DeleteIds" value="@user.Id">
                                        </td>
                                    </tr>
                                }
                            }
                        </table>
                    }
                    <button asp-page-handler="UpdateRoles" class="btn btn-default">Save</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

以及我用来将值传递给模态的 JS：

$('#EditRole').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var id = button.data('id');
    var name = button.data('name');  // Extract info from data-* attributes
    // Update the modal's content
    document.getElementById('modal_id').setAttribute('value', id);
    document.getElementById('modal_name').setAttribute('value', name);
    var modal = $(this);
    modal.find('#modal_text1').text('Add Users to ' + name);
    modal.find('#modal_text2').text('Remove Users from ' + name);
});

谢谢，开发核心

Answer 1

return Page()刷新页面时调用。如果添加到列表后一切正常（您确定已执行添加），您可以：return Ok()，或return NoContent()。

阅读文档：Microsoft docs.

Answer 2

我认为最好看一下全貌（您的模式如何处理来自您的 OnPostAddtoRoleAsync() 函数的 return 响应）。

正如 Lazar 所指出的，return 对用户是否正确添加到角色的响应会更有帮助。在这种情况下，根据用户发生的情况使用 Ok() 或其他各种状态代码会更有益。

您可以使用 event.preventDefault(); 阻止在模态框内执行某些操作。同样，我们看不到您的前端 razor 页面是如何处理模态的，因为您没有在此处提供。此来源可能有助于使用模态 https://www.mikesdotnetting.com/article/349/razor-pages-and-bootstrap-modal-master-details

如果有帮助请告诉我，谢谢。

Answer 3

我认为你应该把模态体分开，做成局部视图。使用 jquery ajax 获取局部视图，将其附加到模式然后打开它。

我做了一个简单的demo，大家可以参考一下

Index.cshtml:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

@Html.AntiForgeryToken()

<button id="Edit" data-id="1" class="btn btn-danger"
        data-backdrop="static" data-keyboard="false" style="margin-bottom: 10px;">
    Update
</button>

<div id="EditRole" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #ffd800">
                <h4 class="modal-title" style="text-align:left">Update Role</h4>
            </div>
            <div class="modal-body" style="background-image: linear-gradient(#ffd800,#fff)">
            
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script>
        $("#Edit").click(function () {
            var id = $(this).attr('data-id');
            $.ajax({
                type: 'POST',
                url: 'Index?handler=AddtoRole',
                data: {
                    id: id,
                },
                headers: {
                    RequestVerificationToken:
                        $('input:hidden[name="__RequestVerificationToken"]').val()
                },
                success: function (result) {
                    $('.modal-body').html(result);
                    $('#EditRole').modal('show');
                }
            });
        })
    </script>
}

Index.cshtml.cs:

public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;

    public IndexModel(ILogger<IndexModel> logger)
    {
        _logger = logger;
    }

    [BindProperty]
    public Student Input { get; set; }

    public void OnGet()
    {
    }
    
    public IActionResult OnPostAddtoRole()
    {
        Input.Name = "StudentA";
        return Partial("_AddRolePartial",Input); 
    }

    public void OnPost()
    {

    }
}

_AddRolePartial.cshtml:

@model RazorTest.Models.Student

<form method="post">
    <div>
        <label>Id:</label>
        @Model.Id
    </div>
    <div>
        <label>Name:</label>
        @Model.Name
    </div>
    <button asp-page-handler="UpdateRoles" class="btn btn-default">Save</button>
</form>

Student.cs:

public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }
}

结果：

Razor Pages 异步任务 return 到模态

Razor Pages async task return to modal

html

c#

razor

asp.net-core

razor-pages