Refactored CreateModal.

src/Volo.Abp.AspNetCore.Mvc/Volo/Abp/AspNetCore/Mvc/ActionResultHelper.cs

@@ -21,7 +21,9 @@ namespace Volo.Abp.AspNetCore.Mvc
 
             if (typeof(IActionResult).GetTypeInfo().IsAssignableFrom(returnType))
             {
-                if (typeof(JsonResult).GetTypeInfo().IsAssignableFrom(returnType) || typeof(ObjectResult).GetTypeInfo().IsAssignableFrom(returnType))
+                if (typeof(JsonResult).GetTypeInfo().IsAssignableFrom(returnType) || 
+                    typeof(ObjectResult).GetTypeInfo().IsAssignableFrom(returnType) ||
+                    typeof(NoContentResult).GetTypeInfo().IsAssignableFrom(returnType))
                 {
                     return true;
                 }

src/Volo.Abp.Identity.Web/ObjectMappings/AbpIdentityWebAutoMapperProfile.cs

@@ -7,6 +7,8 @@ namespace Volo.Abp.Identity.Web.ObjectMappings
     {
         public AbpIdentityWebAutoMapperProfile()
         {
+            //EditModal
+
             CreateMap<IdentityUserDto, EditModalModel.UserInfoViewModel>();
 
             CreateMap<EditModalModel.UserInfoViewModel, IdentityUserUpdateDto>()
@@ -14,6 +16,14 @@ namespace Volo.Abp.Identity.Web.ObjectMappings
 
             CreateMap<IdentityRoleDto, EditModalModel.AssignedRoleViewModel>()
                 .ForMember(dest => dest.IsAssigned, opt => opt.Ignore());
+
+            //CreateModal
+
+            CreateMap<CreateModalModel.UserInfoViewModel, IdentityUserCreateDto>()
+                .ForMember(dest => dest.RoleNames, opt => opt.Ignore());
+
+            CreateMap<IdentityRoleDto, CreateModalModel.AssignedRoleViewModel>()
+                .ForMember(dest => dest.IsAssigned, opt => opt.Ignore());
         }
     }
 }

src/Volo.Abp.Identity.Web/Pages/Identity/Users/CreateModal.cshtml

@@ -7,66 +7,62 @@
     Layout = null;
 }
 
-<div class="modal-header">
-    <h5 class="modal-title" id="userModalLabel">@Localizer["CreateUser"]</h5>
-    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-    </button>
-</div>
+<abp-modal>
 
-<div class="modal-body">
-    <form id="createUserForm">
-        <!-- Nav tabs -->
-        <ul class="nav nav-tabs" role="tablist">
-            <li class="nav-item">
-                <a class="nav-link active" data-toggle="tab" href="#userInformations" role="tab">@Localizer["CreateUser"]</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" data-toggle="tab" href="#roles" role="tab">@Localizer["Roles"]</a>
-            </li>
-        </ul>
+    <abp-modal-header title="@Localizer["NewUser"]"></abp-modal-header>
 
-        <!-- Tab panes -->
-        <div class="tab-content pt-3">
+    <abp-modal-body>
 
-            <div class="tab-pane active" id="userInformations" role="tabpanel">
+        <form method="post" asp-page="/Identity/Users/CreateModal">
+            <ul class="nav nav-tabs" role="tablist">
+                <li class="nav-item">
+                    <a class="nav-link active" data-toggle="tab" href="#CreateUser_UserInfo" role="tab">@Localizer["CreateUser"]</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" data-toggle="tab" href="#CreateUser_RolesTab" role="tab">@Localizer["Roles"]</a>
+                </li>
+            </ul>
 
-                <div class="form-group">
-                    <label for="userName">@Localizer["UserName"]</label>
-                    <input type="text" class="form-control" id="userName" name="UserName" placeholder="User name">
-                </div>
-                <div class="form-group">
-                    <label for="password">@Localizer["Password"]</label>
-                    <input type="password" class="form-control" id="password" name="Password" placeholder="Password">
-                </div>
-                <div class="form-group">
-                    <label for="email">@Localizer["EmailAddress"]</label>
-                    <input type="email" class="form-control" id="email" name="Email" placeholder="Enter email">
-                </div>
-                <div class="form-group">
-                    <label for="phoneNumber">@Localizer["PhoneNumber"]</label>
-                    <input type="tel" class="form-control" id="phoneNumber" name="PhoneNumber" placeholder="Phone number">
-                </div>
+            <div class="tab-content pt-3">
 
-            </div>
-            <div class="tab-pane" id="roles" role="tabpanel">
-                <div class="user-role-checkbox-list">
-                    @foreach (var role in Model.Roles)
+                <div class="tab-pane active" id="CreateUser_UserInfo" role="tabpanel">
+
+                    <div class="form-group">
+                        <label asp-for="UserInfo.UserName"></label>
+                        <input asp-for="UserInfo.UserName" class="form-control" />
+                    </div>
+                    <div class="form-group">
+                        <label asp-for="UserInfo.Password"></label>
+                        <input asp-for="UserInfo.Password" class="form-control" />
+                    </div>
+                    <div class="form-group">
+                        <label asp-for="UserInfo.Email"></label>
+                        <input asp-for="UserInfo.Email" class="form-control" />
+                    </div>
+                    <div class="form-group">
+                        <label asp-for="UserInfo.PhoneNumber"></label>
+                        <input asp-for="UserInfo.PhoneNumber" class="form-control" />
+                    </div>
+
+                </div>
+                <div class="tab-pane" id="CreateUser_RolesTab" role="tabpanel">
+                    @for (var i = 0; i < Model.Roles.Length; i++)
                     {
                         <div class="form-check">
-                            <label class="form-check-label">
-                                <input id="CreateUser_@(role.Name)" class="form-check-input" type="checkbox" name="@(role.Name)" value="true" @Html.Raw(role.IsAssigned ? "checked=\"checked\"" : "")>
-                                @role.Name
+                            <label asp-for="@Model.Roles[i].IsAssigned" class="form-check-label">
+                                <input asp-for="@Model.Roles[i].IsAssigned" class="form-check-input" />
+                                @Model.Roles[i].Name
                             </label>
                         </div>
+                        <input asp-for="@Model.Roles[i].Name" />
                     }
                 </div>
+
             </div>
+        </form>
+
+    </abp-modal-body>
+
+    <abp-modal-footer></abp-modal-footer>
 
-        </div>
-    </form>
-</div>
-<div class="modal-footer">
-    <button type="button" class="btn btn-secondary" data-dismiss="modal">@Localizer["Close"]</button>
-    <button type="button" class="btn btn-primary" id="btnCreateUserSave">@Localizer["Save"]</button>
-</div>
+</abp-modal>

src/Volo.Abp.Identity.Web/Pages/Identity/Users/CreateModal.cshtml.cs

@@ -1,25 +1,74 @@
 using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
+using System.Linq;
 using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
 using Volo.Abp.AspNetCore.Mvc.RazorPages;
 
 namespace Volo.Abp.Identity.Web.Pages.Identity.Users
 {
     public class CreateModalModel : AbpPageModel
     {
-        public IdentityUserRoleDto[] Roles { get; set; }
+        [BindProperty]
+        public UserInfoViewModel UserInfo { get; set; }
 
+        [BindProperty]
+        public AssignedRoleViewModel[] Roles { get; set; }
+
+        private readonly IIdentityUserAppService _identityUserAppService;
         private readonly IIdentityRoleAppService _identityRoleAppService;
 
-        public CreateModalModel(IIdentityRoleAppService identityRoleAppService)
+        public CreateModalModel(IIdentityUserAppService identityUserAppService, IIdentityRoleAppService identityRoleAppService)
         {
+            _identityUserAppService = identityUserAppService;
             _identityRoleAppService = identityRoleAppService;
         }
 
         public async Task OnGetAsync()
         {
-            Roles = ObjectMapper.Map<List<IdentityRoleDto>, IdentityUserRoleDto[]>(
+            UserInfo = new UserInfoViewModel();
+
+            Roles = ObjectMapper.Map<List<IdentityRoleDto>, AssignedRoleViewModel[]>(
                 await _identityRoleAppService.GetAllListAsync()
             );
         }
+
+        public async Task<NoContentResult> OnPostAsync()
+        {
+            var input = ObjectMapper.Map<UserInfoViewModel, IdentityUserCreateDto>(UserInfo);
+            input.RoleNames = Roles.Where(r => r.IsAssigned).Select(r => r.Name).ToArray();
+
+            await _identityUserAppService.CreateAsync(input);
+
+            return NoContent();
+        }
+
+        public class UserInfoViewModel
+        {
+            [Required]
+            [MaxLength(IdentityUserConsts.MaxUserNameLength)]
+            public string UserName { get; set; }
+
+            [Required]
+            [MaxLength(IdentityUserConsts.MaxPasswordLength)]
+            [DataType(DataType.Password)]
+            public string Password { get; set; }
+
+            [MaxLength(IdentityUserConsts.MaxEmailLength)]
+            [EmailAddress]
+            public string Email { get; set; }
+
+            [MaxLength(IdentityUserConsts.MaxPhoneNumberLength)]
+            public string PhoneNumber { get; set; }
+        }
+
+        public class AssignedRoleViewModel
+        {
+            [Required]
+            [HiddenInput]
+            public string Name { get; set; }
+
+            public bool IsAssigned { get; set; }
+        }
     }
 }

src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.js

@@ -3,6 +3,10 @@
 
     var _identityUserAppService = volo.abp.identity.identityUser;
 
+    var _createModal = new abp.ModalManager({
+        viewUrl: abp.appPath + 'Identity/Users/CreateModal'
+    });
+    
     var _editModal = new abp.ModalManager({
         viewUrl: abp.appPath + 'Identity/Users/EditModal'
     });
@@ -70,35 +74,11 @@
 
     //Create user command
     _$wrapper.find('.create-user-button').click(function () {
-        $('#createUpdateUserModal').modal('show')
-            .find('.modal-content')
-            .load(abp.appPath + 'Identity/Users/CreateModal');
+        _createModal.open();
     });
 
-    //TODO: btnCreateUserSave and btnUpdateUserSave clicks should be handled in the modals. We may consider to create a model manager as before
-
-    function findAssignedRoleNames() {
-        var assignedRoleNames = [];
-
-        $(document).find('.user-role-checkbox-list input[type=checkbox]')
-            .each(function () {
-                if ($(this).is(':checked')) {
-                    assignedRoleNames.push($(this).attr('name'));
-                }
-            });
-
-        return assignedRoleNames;
-    }
-
-    $('#createUpdateUserModal').on('click', '#btnCreateUserSave', function () {
-        var $createUserForm = $('#createUserForm');
-        var user = $createUserForm.serializeFormToObject();
-        user.RoleNames = findAssignedRoleNames();
-
-        _identityUserAppService.create(user).then(function () {
-            $('#createUpdateUserModal').modal('hide');
-            _dataTable.ajax.reload();
-        });
+    _createModal.onClose(function () { //TODO: Only refresh if saved!
+        _dataTable.ajax.reload();
     });
 
     _editModal.onClose(function() { //TODO: Only refresh if saved!