Get a boolean value from database to checkbox with option to update in .NET MVC using AJAX - ajax

Question

I need to do the following table with .NET MVC and AJAX:
The idea is a list with users with the option to lock each of them (i am using the standard identity model):
Email | Username | LockoutEnabled
user1#domain.com | User1 | [x]
user2#domain.com | User2 | [0]
user3#domain.com | User3 | [0]
For the moment I successfully update the current status in the view from the db to the checkbox using this approach
<td>
#Html.EditorFor(modelItem => user.LockoutEnabled)
</td>
What i want to do next is:
1. Update the db on the current checkbox status without reloading the page
2. Show a notification on successful DB update from the view (no reload)
This is the controller returning the status
[Authorize(Roles = "Admin")]
public ActionResult LockUser(string id, bool status)
{
PFMDbContext db = new PFMDbContext();
db.Users.FirstOrDefault(user => user.Id == id).LockoutEnabled = status;
db.SaveChanges();
return new HttpStatusCodeResult(HttpStatusCode.OK);
}

Answer 1

This is a simple job using Ajax.
Create a ViewModel that will be passed to the view.
public class ApplicationUserViewModel
{
public string Id { get; set; }
public string Name { get; set; }
public bool IsLocked { get; set; }
}
The controller methods.
[HttpGet]
public ActionResult LockUsers()
{
var db = new PFMDbContext();
var model = db.Users
.Select(p => new ApplicationUserViewModel
{
Id = p.Id,
Name = p.Name, // Or whatever properties you have
IsLocked = p.LockoutEnabled
}).ToList();
}
[HttpPost]
public ActionResult LockUser(string id, bool isLocked)
{
var db = new PFMDbContext();
try
{
var user = db.Users.FirstOrDefault(user => user.Id == id);
user.LockoutEnabled = isLocked;
db.SaveChanges();
return Json(true);
}
catch
{
return Json(false);
}
}
In your view
#model List<ApplicationUserViewModel>
<!-- This is just an example. Use your own template. -->
#foreach (var user in Model)
{
<div>
<p>#user.Name</p>
<input id="#user.Id" type="checkbox" data-userid="#user.Id" class="js-islocked" value="#user.IsLocked" />
</div>
}
Then using javascript you can bind the select event.
$(document).ready(function () {
$(this).on('change', 'js-islocked', function () {
var userId = $(this).data('userid');
var isLocked = $(this).prop('checked');
// Use ajax to save the modification
$.ajax({
type: 'POST',
url: '/Users/LockUser',
data:{ id: userId, isLocked: isLocked },
contentType: 'application/json',
success:function(data) {
// Update a div or show a message
}
})
});
});