I have a form in a partial view. The view receives a "model".
@model EditUserViewModel
@{Layout = null;}
<form asp-action="Edit" id="EditUser" method="post">
<input type="hidden" asp-for="Id" />
<div class="mb-3">
<label asp-for="UserName" class="form-label">Nom d'utilisateur</label>
<input asp-for="UserName" class="form-control" required />
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<div class="mb-3">
<label asp-for="Email" class="form-label">Email</label>
<input asp-for="Email" type="email" class="form-control" required />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="mb-3">
<label class="form-label">Changer le mot de passe (laisser vide pour ne pas modifier)</label>
<input asp-for="Password" type="password" class="form-control" value=""/>
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="mb-3">
<label asp-for="Pseudo" class="form-label">Pseudo</label>
<input asp-for="Pseudo" class="form-control" />
<span asp-validation-for="Pseudo" class="text-danger"></span>
</div>
<div class="mb-3">
<label class="form-label">Rôles</label>
<div>
@for (int i = 0; i < Model.Roles.Count; i++)
{
<div class="form-check">
<input type="checkbox" class="form-check-input" asp-for="Roles[i].Selected" />
<label class="form-check-label" for="Roles[i].Selected">@Model.Roles[i].RoleName</label>
<input type="hidden" asp-for="Roles[i].RoleId" />
<input type="hidden" asp-for="Roles[i].RoleName" />
</div>
}
</div>
</div>
<button type="submit" class="btn-dark btn-sm" >Enregistrer</button>
<button type="button" id="[email protected]" onclick="LoadDetailPartialView_USERS()" style="background-color:lightgray">Annuler</button>
</form>
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Controller side:
public async Task<IActionResult> Edit(string id)
{
var user = await _userManager.FindByIdAsync(id);
if (user == null) return NotFound();
var userRoles = await _userManager.GetRolesAsync(user);
var allRoles = _roleManager.Roles.ToList();
var model = new EditUserViewModel
{
Id = user.Id,
UserName = user.UserName,
Email = user.Email,
Pseudo = user.Pseudo,
Roles = allRoles.Select(r => new RoleSelectionViewModel
{
RoleId = r.Id,
RoleName = r.Name,
Selected = userRoles.Contains(r.Name)
}).ToList()
};
return View(model);
}
This view is itself called by a partial view (list of 'Users'), by:
function Modif_User(Id) {
$.ajax({
url: '@Url.Action("Edit", "Users", new { Area = "Admin" })',
type: 'GET',
cache: false,
data: {id:Id }
}).done(function (result) {
$(PartialUsers).html(result);
});
}
Upon form submission, in my Edit view:
$("#Edit").submit(function (e) {
e.preventDefault();
var formdata = new FormData(this);
$.ajax({
url: '@Url.Action("Edit","Users", new { Area = "Admin" })',
data: formdata,
method: "post",
success: function (result) {
debugger;
if(result.success)
{
window.location.href = "@Url.Action("Index","Users", new { Area = "Admin" })";
}
},
});
});
and the related controller method:
[HttpPost]
public async Task<IActionResult> Edit(EditUserViewModel model)
{
if (!ModelState.IsValid)
{
return Json(new { success = false });
}
var user = await _userManager.FindByIdAsync(model.Id);
if (user == null) return Json(new { success = false });
user.Email = model.Email;
user.Pseudo = model.Pseudo;
if (!string.IsNullOrEmpty(model.Password))
{
var token = await _userManager.GeneratePasswordResetTokenAsync(user);
await _userManager.ResetPasswordAsync(user, token, model.Password);
}
await _userManager.UpdateAsync(user);
var currentRoles = await _userManager.GetRolesAsync(user);
var selectedRoles = model.Roles.Where(r => r.Selected).Select(r => r.RoleName).ToList();
await _userManager.RemoveFromRolesAsync(user, currentRoles);
await _userManager.AddToRolesAsync(user, selectedRoles);
return Json(new { success = true });
}
The submission process is successful and the information is saved.
The problem is that "Json(new { success = true })" is not returned to the calling AJAX function but is displayed in raw form in the browser.
The AJAX function isn't even being read in `$("#Edit").submit(function (e)...").
The JSON response would allow me to display the result where it should appear, that is, by calling the partial view listing the 'Users' which then calls the partial view containing the 'User' edit form.
I've already used this method, with a partial view containing a form and the data submitted by 'submit', and it worked; AJAX received the JSON response correctly.
I don't understand what's not working this time. Thanks

dataType: 'json'