剃刀页面异步任务返回到模式

Devcore

我是Razor Pages的新手,我真的无法解决我的问题。

我有一个模式,我想在其中更新身份角色(添加/删除用户)。异步任务工作正常,我有成员和非成员的列表,但是模式在发布后关闭。在这种情况下,如何防止(模态关闭)正确的回报是什么?

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

谢谢,Devcore

mj1313

我认为您应该分离模态主体并将其作为局部视图。使用jquery ajax获取局部视图,将其附加到模态然后打开它。

我做了一个简单的演示,您可以参考它。

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

结果:

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

剃刀页面将处理程序中的图像返回到<img>元素

来自分类Dev

将剃刀视图返回到iframe

来自分类Dev

任务返回值,不带Task <T>(异步/等待模式)

来自分类Dev

任务返回值,不带Task <T>(异步/等待模式)

来自分类Dev

异步等待返回任务

来自分类Dev

返回到RouterLink的页面顶部

来自分类Dev

WCF基于任务的异步模式

来自分类Dev

使用JavaScript或MVC剃刀返回页面

来自分类Dev

异步android将值返回到数组

来自分类Dev

将 ThreadPoolExecutor 返回到任务数组

来自分类Dev

如何从异步任务返回结果

来自分类Dev

何时使用异步返回任务

来自分类Dev

异步任务后返回数据

来自分类Dev

何时使用异步返回任务

来自分类Dev

异步任务后返回数据

来自分类Dev

“异步任务然后等待任务”与“任务然后返回任务”

来自分类Dev

核心剃刀页面-ID未发布在以模式包装的表单上

来自分类Dev

外部认证后返回到请求的页面

来自分类Dev

宏运行后返回到所选页面

来自分类Dev

重复记录返回到Vf页面

来自分类Dev

在构建器模式下使用异步任务

来自分类Dev

了解基于任务的异步模式C#

来自分类Dev

Telerik中基于任务的异步模式支持

来自分类Dev

剃刀页面-EF返回2个表的值

来自分类Dev

“执行正常”后从插入模式返回到正常模式

来自分类Dev

使用LINQ select返回异步任务

来自分类Dev

从异步任务方法返回“普通”变量

来自分类Dev

“异步任务”与“返回Task.Run”

来自分类Dev

如何从异步任务返回对象列表