@model IEnumerable<MvcApp.UserViewModel>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
.field-validation-error {
<input type="hidden" id="userId" name="Id">
<label for="username">Username:</label>
<input type="text" id="username" name="Username" class="form-control">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="FirstName" class="form-control">
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="LastName" class="form-control">
<input type="submit" class="btn btn-info" value="Save">
@foreach(var item in @Model){
<a href="#" class="btn btn-success edit-btn" data-id=@item.Id>Edit</a>|
<a href="#" class="btn btn-danger delete-btn" data-id=@item.Id>Delete</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
const deleteBtns = document.querySelectorAll(".delete-btn");
deleteBtns.forEach((btn)=>{
// Listen for clicks on your delete buttons, then send an ajax call back to your controller
// for the Delete method, passing the id data-attribute to identify the record
btn.addEventListener("click",function(){
url: '@Url.RouteUrl(new{ action="Delete", controller="Home"})',
data: {userId:parseInt(btn.dataset.id,10)},
complete: function(resp) {
alert(resp.responseText);
//Hide (or delete) the row after a deletion is done to update the UI
removeRow = (elemInRow)=>{
$(elemInRow).closest("tr").hide();
const form = document.getElementById("edit");
// Hide the form initially
const editBtns = document.querySelectorAll(".edit-btn");
editBtns.forEach((btn)=>{
// When an edit button is clicked, set the userId input field of the form
// to point to the id of the record selected.
// Then move the form into the same row.
// Lastly, show the form.
btn.addEventListener("click",function(){
document.getElementById("userId").value=btn.dataset.id;
$(form).appendTo($(btn).closest("td"));
// Handle the form submit by passing it's input to the Edit function.
// Update the UI to reflect the changes.
// Hide the form again and send feedback via an alert.
form.addEventListener("submit",function(event){
url: '@Url.RouteUrl(new{ action="Edit", controller="Home"})',
data: $(this).serialize(),
complete: function(resp) {
const jsonOb = JSON.parse(resp.responseText);
updateRow(jsonOb.Username,jsonOb.FirstName,jsonOb.LastName,$(form).closest("tr")[0]);
alert(`I saved: ${JSON.stringify(jsonOb)}`);
updateRow = (username, firstname, lastname,row)=>{
$(tds[0]).text(username);
$(tds[1]).text(firstname);
$(tds[2]).text(lastname);