Revised EditModal.

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/AbpAspNetCoreMvcUiBootstrapModule.cs

@@ -32,6 +32,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
                 {
                     "/libs/jquery/jquery-3.1.1.min.js",
                     "/libs/bootstrap/js/bootstrap.bundle.min.js",
+                    "/libs/jquery-form/jquery.form.min.js",
                     "/libs/material/js/material.min.js",
                     "/libs/datatables/datatables.min.js",
                     "/libs/vue/vue.js",

src/Volo.Abp.Identity.Application.Contracts/Volo/Abp/Identity/IdentityUserCreateOrUpdateDtoBase.cs

@@ -10,6 +10,7 @@ namespace Volo.Abp.Identity
         public string UserName { get; set; }
 
         [MaxLength(IdentityUserConsts.MaxEmailLength)]
+        [EmailAddress]
         public string Email { get; set; }
 
         [MaxLength(IdentityUserConsts.MaxPhoneNumberLength)]

src/Volo.Abp.Identity.Application/Volo/Abp/Identity/AbpIdentityApplicationModule.cs

@@ -1,5 +1,6 @@
 using Microsoft.Extensions.DependencyInjection;
 using Volo.Abp.AutoMapper;
+using Volo.Abp.Identity.ObjectMappings;
 using Volo.Abp.Modularity;
 
 namespace Volo.Abp.Identity

src/Volo.Abp.Identity.Application/Volo/Abp/Identity/AbpDeskApplicationModuleAutoMapperProfile.cs → src/Volo.Abp.Identity.Application/Volo/Abp/Identity/ObjectMappings/AbpIdentityApplicationModuleAutoMapperProfile.cs

@@ -1,7 +1,6 @@
-using System.Collections.Generic;
+using AutoMapper;
-using AutoMapper;
 
-namespace Volo.Abp.Identity
+namespace Volo.Abp.Identity.ObjectMappings
 {
     public class AbpIdentityApplicationModuleAutoMapperProfile : Profile
     {
@@ -9,7 +8,7 @@ namespace Volo.Abp.Identity
         {
             CreateMap<IdentityUser, IdentityUserDto>();
             CreateMap<IdentityRole, IdentityRoleDto>();
-            CreateMap<IdentityRoleDto, IdentityUserRoleDto>();
+            CreateMap<IdentityRoleDto, IdentityUserRoleDto>(); //TODO: This should be removed!
         }
     }
 }

src/Volo.Abp.Identity.Web/AbpIdentityWebModule.cs

@@ -1,7 +1,9 @@
 using Microsoft.Extensions.DependencyInjection;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap;
+using Volo.Abp.AutoMapper;
 using Volo.Abp.Identity.Web.Areas.Identity.Localization.Resource;
 using Volo.Abp.Identity.Web.Navigation;
+using Volo.Abp.Identity.Web.ObjectMappings;
 using Volo.Abp.Localization;
 using Volo.Abp.Modularity;
 using Volo.Abp.Ui.Navigation;
@@ -31,6 +33,14 @@ namespace Volo.Abp.Identity.Web
             {
                 options.Resources.AddJson<IdentityResource>("en");
             });
+
+            services.Configure<AbpAutoMapperOptions>(options =>
+            {
+                options.Configurators.Add(context =>
+                {
+                    context.MapperConfiguration.AddProfile<AbpIdentityWebAutoMapperProfile>();
+                });
+            });
         }
     }
 }

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

@@ -0,0 +1,19 @@
+using AutoMapper;
+using Volo.Abp.Identity.Web.Pages.Identity.Users;
+
+namespace Volo.Abp.Identity.Web.ObjectMappings
+{
+    public class AbpIdentityWebAutoMapperProfile : Profile
+    {
+        public AbpIdentityWebAutoMapperProfile()
+        {
+            CreateMap<IdentityUserDto, EditModalModel.UserInfoViewModel>();
+
+            CreateMap<EditModalModel.UserInfoViewModel, IdentityUserUpdateDto>()
+                .ForMember(dest => dest.RoleNames, opt => opt.Ignore());
+
+            CreateMap<IdentityRoleDto, EditModalModel.AssignedRoleViewModel>()
+                .ForMember(dest => dest.IsAssigned, opt => opt.Ignore());
+        }
+    }
+}

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

@@ -7,6 +7,7 @@
     Layout = null;
 }
 
+@* TODO: partial *@
 <div class="modal-header">
     <h5 class="modal-title" id="userModalLabel">@Localizer["UpdateUser"]</h5>
     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -15,7 +16,8 @@
 </div>
 
 <div class="modal-body">
-    <form id="updateUserForm">
+    <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">
@@ -31,31 +33,30 @@
 
             <div class="tab-pane active" id="userInformations" role="tabpanel">
 
-                <input type="hidden" name="Id" value="@Model.EditingUser.Id" />
+                <input asp-for="UserInfo.Id" />
 
                 <div class="form-group">
-                    <label for="userName">@Localizer["UserName"]</label>
+                    <label asp-for="UserInfo.UserName"></label>
-                    <input type="text" class="form-control" id="userName" name="UserName" placeholder="User name" value="@Model.EditingUser.UserName">
+                    <input asp-for="UserInfo.UserName" class="form-control" />
                 </div>
                 <div class="form-group">
-                    <label for="email">@Localizer["EmailAddress"]</label>
+                    <label asp-for="UserInfo.Email"></label>
-                    <input type="email" class="form-control" id="email" name="Email" placeholder="Enter email" value="@Model.EditingUser.Email">
+                    <input asp-for="UserInfo.Email" class="form-control" />
                 </div>
                 <div class="form-group">
-                    <label for="phoneNumber">@Localizer["PhoneNumber"]</label>
+                    <label asp-for="UserInfo.PhoneNumber"></label>
-                    <input type="tel" class="form-control" id="phoneNumber" name="PhoneNumber" placeholder="Phone number" value="@Model.EditingUser.PhoneNumber">
+                    <input asp-for="UserInfo.PhoneNumber" class="form-control" />
                 </div>
 
             </div>
             <div class="tab-pane" id="roles" role="tabpanel">
                 <div class="user-role-checkbox-list">
-                    @foreach (var role in Model.Roles)
+                    @for (var i = 0; i < Model.Roles.Length; i++)
                     {
                         <div class="form-check">
-                            <label class="form-check-label">
+                            <input asp-for="@Model.Roles[i].IsAssigned" class="form-check-input" />
-                                <input id="CreateUser_@(role.Name)" class="form-check-input" type="checkbox" name="@(role.Name)" value="true" @Html.Raw(role.IsAssigned ? "checked=\"checked\"" : "")>
+                            <label asp-for="@Model.Roles[i].IsAssigned">@Model.Roles[i].Name</label>
-                                @role.Name
+                            <input asp-for="@Model.Roles[i].Name" />
-                            </label>
                         </div>
                     }
                 </div>

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

@@ -1,15 +1,20 @@
 using System;
 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 EditModalModel : AbpPageModel
     {
-        public IdentityUserDto EditingUser { get; set; }
+        [BindProperty]
-        public IdentityUserRoleDto[] Roles { get; set; }
+        public UserInfoViewModel UserInfo { get; set; }
+
+        [BindProperty]
+        public AssignedRoleViewModel[] Roles { get; set; }
 
         private readonly IIdentityUserAppService _identityUserAppService;
         private readonly IIdentityRoleAppService _identityRoleAppService;
@@ -22,17 +27,25 @@ namespace Volo.Abp.Identity.Web.Pages.Identity.Users
 
         public async Task OnGetAsync(Guid id)
         {
-            EditingUser = await _identityUserAppService.GetAsync(id);
+            UserInfo = ObjectMapper.Map<IdentityUserDto, UserInfoViewModel>(await _identityUserAppService.GetAsync(id));
-            Roles = ObjectMapper.Map<List<IdentityRoleDto>, IdentityUserRoleDto[]>(
+            
+            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(EditingUser.Id)).Items.Select(r => r.Name).ToList();
+            var userRoleNames = (await _identityUserAppService.GetRolesAsync(UserInfo.Id)).Items.Select(r => r.Name).ToList();
             foreach (var role in Roles)
             {
                 if (userRoleNames.Contains(role.Name))
@@ -41,5 +54,31 @@ namespace Volo.Abp.Identity.Web.Pages.Identity.Users
                 }
             }
         }
+
+        public class UserInfoViewModel
+        {
+            [HiddenInput]
+            public Guid Id { get; set; }
+
+            [Required]
+            [MaxLength(IdentityUserConsts.MaxUserNameLength)]
+            public string UserName { 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/Pages/Identity/_ViewImports.cshtml

@@ -0,0 +1 @@
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

src/Volo.Abp.Identity.Web/Volo.Abp.Identity.Web.csproj

@@ -21,6 +21,7 @@
 
   <ItemGroup>
     <Content Remove="Pages\Identity\Users\EditModal.cshtml" />
+    <Content Remove="Pages\Identity\_ViewImports.cshtml" />
   </ItemGroup>
 
   <ItemGroup>
@@ -31,6 +32,7 @@
   <ItemGroup>
     <ProjectReference Include="..\Volo.Abp.AspNetCore.Mvc.UI.Bootstrap\Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.csproj" />
     <ProjectReference Include="..\Volo.Abp.Identity.Application.Contracts\Volo.Abp.Identity.Application.Contracts.csproj" />
+    <ProjectReference Include="..\Volo.Abp.AutoMapper\Volo.Abp.AutoMapper.csproj" />
   </ItemGroup>
 
   <ItemGroup>

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

@@ -18,13 +18,13 @@
                 defaultContent: '',
                 render: function (list, type, record, meta) {
                     return '<div class="dropdown">' +
-                            '<button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
+                        '<button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
-                                'Actions' +
+                        'Actions' +
-                            '</button>' +
+                        '</button>' +
-                            '<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">' +
+                        '<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">' +
-                                '<a class="dropdown-item update-user" href="#" data-id="' + record.id + '">Edit</a>' +
+                        '<a class="dropdown-item update-user" href="#" data-id="' + record.id + '">Edit</a>' +
-                                '<a class="dropdown-item delete-user" href="#" data-id="' + record.id + '">Delete</a>' +
+                        '<a class="dropdown-item delete-user" href="#" data-id="' + record.id + '">Delete</a>' +
-                            '</div>' +
+                        '</div>' +
                         '</div>';
                 }
             },
@@ -61,7 +61,7 @@
         if (confirm(_l('UserDeletionConfirmationMessage', userName))) {
             _identityUserAppService
                 .delete(id)
-                .then(function() {
+                .then(function () {
                     _dataTable.ajax.reload();
                 });
         }
@@ -102,10 +102,21 @@
 
     $('#createUpdateUserModal').on('click', '#btnUpdateUserSave', function () {
         var $updateUserForm = $('#updateUserForm');
-        var user = $updateUserForm.serializeFormToObject();
-        user.RoleNames = findAssignedRoleNames();
 
-        _identityUserAppService.update(user.Id, user).then(function () {
+        //TODO: Use ajaxform instead!
+
+        //$updateUserForm.ajaxForm(function () {
+        //    $('#createUpdateUserModal').modal('hide');
+        //    _dataTable.ajax.reload();
+        //});
+
+        //$updateUserForm.submit();
+
+        $.ajax({
+            url: $updateUserForm.attr('action'),
+            method: "POST",
+            data: $updateUserForm.serialize()
+        }).then(function () {
             $('#createUpdateUserModal').modal('hide');
             _dataTable.ajax.reload();
         });