Modal HTML should include modal tag too.

src/Volo.Abp.AspNetCore.Mvc/Volo/Abp/AspNetCore/Mvc/RazorPages/AbpPageModel.cs

@@ -1,4 +1,5 @@
 using System;
+using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
 using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Logging.Abstractions;
@@ -22,5 +23,10 @@ namespace Volo.Abp.AspNetCore.Mvc.RazorPages
 
         protected ILogger Logger => _lazyLogger.Value;
         private Lazy<ILogger> _lazyLogger => new Lazy<ILogger>(() => LoggerFactory?.CreateLogger(GetType().FullName) ?? NullLogger.Instance, true);
+
+        protected virtual NoContentResult NoContent() //TODO: Is that true to return empty result like that?
+        {
+            return new NoContentResult();
+        }
     }
 }

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

@@ -7,65 +7,73 @@
     Layout = null;
 }
 
-@* TODO: partial *@
+@* TODO: tag helpers for modal and tabs *@
-<div class="modal-header">
-    <h5 class="modal-title" id="userModalLabel">@Localizer["UpdateUser"]</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 class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
-    <form id="updateUserForm" method="post" asp-page="/Identity/Users/EditModal">
+    <div class="modal-dialog" role="document">
-        @* TODO: Remove id when model manager implemented *@
+        <div class="modal-content">
-        <!-- Nav tabs -->
+            
-        <ul class="nav nav-tabs" role="tablist">
+            <div class="modal-header">
-            <li class="nav-item">
+                <h5 class="modal-title" id="userModalLabel">@Localizer["UpdateUser"]</h5>
-                <a class="nav-link active" data-toggle="tab" href="#userInformations" role="tab">@Localizer["UserInformations"]</a>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            </li>
+                    <span aria-hidden="true">&times;</span>
-            <li class="nav-item">
+                </button>
-                <a class="nav-link" data-toggle="tab" href="#roles" role="tab">@Localizer["Roles"]</a>
+            </div>
-            </li>
-        </ul>
 
-        <!-- Tab panes -->
+            <div class="modal-body">
-        <div class="tab-content pt-3">
+                <form id="updateUserForm" method="post" asp-page="/Identity/Users/EditModal">
+                    @* TODO: Remove id when model manager implemented *@
+                    <!-- Nav tabs -->
+                    <ul class="nav nav-tabs" role="tablist">
+                        <li class="nav-item">
+                            <a class="nav-link active" data-toggle="tab" href="#EditUser_UserInfoTab" role="tab">@Localizer["UserInformations"]</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" data-toggle="tab" href="#EditUser_RolesTab" role="tab">@Localizer["Roles"]</a>
+                        </li>
+                    </ul>
 
-            <div class="tab-pane active" id="userInformations" role="tabpanel">
+                    <!-- Tab panes -->
+                    <div class="tab-content pt-3">
 
-                <input asp-for="UserInfo.Id" />
+                        <div class="tab-pane active" id="EditUser_UserInfoTab" role="tabpanel">
 
-                <div class="form-group">
+                            <input asp-for="UserInfo.Id"/>
-                    <label asp-for="UserInfo.UserName"></label>
-                    <input asp-for="UserInfo.UserName" 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="form-group">
-            <div class="tab-pane" id="roles" role="tabpanel">
+                                <label asp-for="UserInfo.UserName"></label>
-                <div class="user-role-checkbox-list">
+                                <input asp-for="UserInfo.UserName" class="form-control"/>
-                    @for (var i = 0; i < Model.Roles.Length; i++)
+                            </div>
-                    {
+                            <div class="form-group">
-                        <div class="form-check">
+                                <label asp-for="UserInfo.Email"></label>
-                            <input asp-for="@Model.Roles[i].IsAssigned" class="form-check-input" />
+                                <input asp-for="UserInfo.Email" class="form-control"/>
-                            <label asp-for="@Model.Roles[i].IsAssigned">@Model.Roles[i].Name</label>
+                            </div>
-                            <input asp-for="@Model.Roles[i].Name" />
+                            <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="EditUser_RolesTab" role="tabpanel">
+                            @for (var i = 0; i < Model.Roles.Length; i++)
+                            {
+                                <div class="form-check">
+                                    <input asp-for="@Model.Roles[i].IsAssigned" class="form-check-input"/>
+                                    <label asp-for="@Model.Roles[i].IsAssigned">@Model.Roles[i].Name</label>
+                                    <input asp-for="@Model.Roles[i].Name"/>
+                                </div>
+                            }
                         </div>
-                    }
+
-                </div>
+                    </div>
+                </form>
+            </div>
+
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">@Localizer["Close"]</button>
+                <button type="submit" class="btn btn-primary" id="btnUpdateUserSave">@Localizer["Save"]</button>
             </div>
 
         </div>
-    </form>
+    </div>
-</div>
-<div class="modal-footer">
-    <button type="button" class="btn btn-secondary" data-dismiss="modal">@Localizer["Close"]</button>
-    <button type="submit" class="btn btn-primary" id="btnUpdateUserSave">@Localizer["Save"]</button>
 </div>

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

@@ -28,23 +28,11 @@ namespace Volo.Abp.Identity.Web.Pages.Identity.Users
         public async Task OnGetAsync(Guid id)
         {
             UserInfo = ObjectMapper.Map<IdentityUserDto, UserInfoViewModel>(await _identityUserAppService.GetAsync(id));
-            
+
             Roles = ObjectMapper.Map<List<IdentityRoleDto>, AssignedRoleViewModel[]>(
                 await _identityRoleAppService.GetAllListAsync()
             );
 
-            await SetAssignedRoles();
-        }
-
-        public async Task OnPostAsync()
-        {
-            var input = ObjectMapper.Map<UserInfoViewModel, IdentityUserUpdateDto>(UserInfo);
-            input.RoleNames = Roles.Where(r => r.IsAssigned).Select(r => r.Name).ToArray();
-            await _identityUserAppService.UpdateAsync(UserInfo.Id, input);
-        }
-
-        private async Task SetAssignedRoles()
-        {
             var userRoleNames = (await _identityUserAppService.GetRolesAsync(UserInfo.Id)).Items.Select(r => r.Name).ToList();
             foreach (var role in Roles)
             {
@@ -55,6 +43,15 @@ namespace Volo.Abp.Identity.Web.Pages.Identity.Users
             }
         }
 
+        public async Task<IActionResult> OnPostAsync()
+        {
+            var input = ObjectMapper.Map<UserInfoViewModel, IdentityUserUpdateDto>(UserInfo);
+            input.RoleNames = Roles.Where(r => r.IsAssigned).Select(r => r.Name).ToArray();
+            await _identityUserAppService.UpdateAsync(UserInfo.Id, input);
+
+            return NoContent();
+        }
+
         public class UserInfoViewModel
         {
             [HiddenInput]

src/Volo.Abp.Identity.Web/wwwroot/modules/identity/helpers/ModalManager.js

@@ -1,5 +1,6 @@
 /**
  * TODO: Document & prepare typescript definitions
+ * TODO: Refactor & test more
  */
 var abp = abp || {};
 (function ($) {
@@ -7,46 +8,15 @@ var abp = abp || {};
     abp.modals = abp.modals || {};
 
     abp.ModalManager = (function () {
-
+        
-        var _normalizeOptions = function (options) {
-            if (!options.modalId) {
-                options.modalId = 'Modal_' + (Math.floor((Math.random() * 1000000))) + new Date().getTime();
-            }
-        }
-
-        function _removeContainer(modalId) {
-            var _containerId = modalId + 'Container';
-            var _containerSelector = '#' + _containerId;
-
-            var $container = $(_containerSelector);
-            if ($container.length) {
-                $container.remove();
-            }
-        };
-
-        function _createContainer(modalId) {
-            _removeContainer(modalId);
-
-            var _containerId = modalId + 'Container';
-            return $('<div id="' + _containerId + '"></div>')
-                .append(
-                    '<div id="' + modalId + '" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">' +
-                    '  <div class="modal-dialog" role="document">' +
-                    '    <div class="modal-content"></div>' +
-                    '  </div>' +
-                    '</div>'
-                ).appendTo('body');
-        }
-
         return function (options) {
 
-            _normalizeOptions(options);
-
             var _options = options;
+
+            var _$modalContainer = null;
             var _$modal = null;
             var _$form = null;
-            var _modalId = options.modalId;
+            var _modalId = 'Modal_' + (Math.floor((Math.random() * 1000000))) + new Date().getTime();
-            var _modalSelector = '#' + _modalId;
             var _modalObject = null;
 
             var _publicApi = null;
@@ -55,6 +25,16 @@ var abp = abp || {};
 
             var _onCloseCallbacks = [];
 
+            function _removeContainer() {
+                _$modalContainer && _$modalContainer.remove();
+            };
+
+            function _createContainer() {
+                _removeContainer();
+                _$modalContainer = $('<div id="' + _modalId + 'Container' + '"></div>').appendTo('body');
+                return _$modalContainer;
+            }
+
             function _saveModal() {
                 if (_modalObject && _modalObject.save) {
                     _modalObject.save();
@@ -64,7 +44,7 @@ var abp = abp || {};
             }
 
             function _initAndShowModal() {
-                _$modal = $(_modalSelector);
+                _$modal = _$modalContainer.find('.modal');
 
                 _$form = _$modal.find('form');
                 if (!_$form.length) {
@@ -123,11 +103,9 @@ var abp = abp || {};
                 _getResultCallback = getResultCallback;
 
                 _createContainer(_modalId)
-                    .find('.modal-content')
                     .load(options.viewUrl, $.param(_args), function (response, status, xhr) {
                         if (status == "error") {
-                            //abp.message.warn(abp.localization.abpWeb('InternalServerError'));
+                            //TODO: ERROR message!
-                            //TODO: ERROR!
                             return;
                         };
 

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

@@ -49,14 +49,14 @@
     });
 
     //Update user command
-    _$table.on('click', '.update-user', function () {
+    _$table.on('click', '.update-user', function () { //TODO: To action list!
         _editModal.open({
             id: $(this).data('id')
         });
     });
 
     //Delete user command
-    _$table.on('click', '.delete-user', function () {
+    _$table.on('click', '.delete-user', function () { //TODO: To action list!
         var id = $(this).data('id');
         var userName = $(this).data('userName');