我是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
我认为您应该分离模态主体并将其作为局部视图。使用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] 删除。
我来说两句