C# Online Compiler | .NET Fiddle

<no name> by vtsells

using System;
using System.ComponentModel.DataAnnotations;
using MvcApp;

namespace MvcApp
{
	public class UserViewModel
	{
		public int Id
		{
			get;
			set;
		}

		public string Username
		{
			get;
			set;
		}

		public string FirstName
		{
			get;
			set;
		}

		public string LastName
		{
			get;
			set;
		}
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
using MvcApp;
​
namespace MvcApp
{
    public class UserViewModel
    {
        public int Id
        {
            get;
            set;
        }
​
        public string Username
        {
            get;
            set;
        }
​
        public string FirstName
        {
            get;
            set;
        }
​
        public string LastName
        {
            get;
            set;
        }
    }
}

@model IEnumerable<MvcApp.UserViewModel>
@{
	Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap 101 Template</title>

		<!-- CSS Includes -->
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
		
		<style type="text/css">

			.field-validation-error {
				color: #ff0000;
			}

		</style>
	</head>
	
	<body>

		<div class="container">
			<!-- Create the edit form in your controller -->
			<form id="edit">
				<div class="row">
					 <input type="hidden" id="userId" name="Id">
					 <div class="col-md-2">
					 	<label for="username">Username:</label>
					 	<input type="text" id="username" name="Username" class="form-control">
					 </div>
					 <div class="col-md-2">
					  	<label for="firstname">First Name:</label>
					 	<input type="text" id="firstname" name="FirstName" class="form-control">
					 </div>
					 <div class="col-md-2">
					  	<label for="lastname">Last Name:</label>
					 	<input type="text" id="lastname" name="LastName" class="form-control">
					</div>

				</div>
				<input type="submit" class="btn btn-info" value="Save">
			</form>
		<!-- Display your users as usual -->
		<table class="table">
			
			@foreach(var item in @Model){
				<tr>
					<td>
						@item.Username
					</td>
					<td>
						@item.FirstName
					</td>
					<td>
						@item.LastName
					</td>
					<td>
						<!-- Create dummy buttons to handle edit/delete -->
						<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>
					</td>
				</tr>
			}
		</table>
		</div>

		<!-- JS includes -->
		<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(){
						$.ajax({
							url: '@Url.RouteUrl(new{ action="Delete", controller="Home"})',
							data: {userId:parseInt(btn.dataset.id,10)},
							type: 'POST',
							dataType:"json",
							complete: function(resp) {
								alert(resp.responseText);
							}
						});
						//Hide (or delete) the row after a deletion is done to update the UI
						removeRow(btn);
					})
				})
				removeRow = (elemInRow)=>{
					$(elemInRow).closest("tr").hide();	
				}
				const form = document.getElementById("edit");
				// Hide the form initially
				$(form).hide();
		        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"));
						$(form).show();
					})
				})
				// 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){
					event.preventDefault();
					$.ajax({
						url: '@Url.RouteUrl(new{ action="Edit", controller="Home"})',
						data: $(this).serialize(),
						type: 'POST',
						dataType: 'json',
						complete: function(resp) {
							const jsonOb = JSON.parse(resp.responseText);
							updateRow(jsonOb.Username,jsonOb.FirstName,jsonOb.LastName,$(form).closest("tr")[0]);
							$(form).hide();
							alert(`I saved: ${JSON.stringify(jsonOb)}`);
						}
					});
				})
				updateRow = (username, firstname, lastname,row)=>{
					const tds = $("td",row);
					$(tds[0]).text(username);
					$(tds[1]).text(firstname);
					$(tds[2]).text(lastname);
				}


		</script>
	</body>
</html>

View

 
@model IEnumerable<MvcApp.UserViewModel>
@{
    Layout = null;
}
​
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
​
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>
​
        <!-- CSS Includes -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        
        <style type="text/css">
​
            .field-validation-error {
                color: #ff0000;
            }
​
        </style>
    </head>
    
    <body>
​
        <div class="container">
            <!-- Create the edit form in your controller -->
            <form id="edit">
                <div class="row">
                     <input type="hidden" id="userId" name="Id">
                     <div class="col-md-2">
                        <label for="username">Username:</label>
                        <input type="text" id="username" name="Username" class="form-control">
                     </div>
                     <div class="col-md-2">
                        <label for="firstname">First Name:</label>
                        <input type="text" id="firstname" name="FirstName" class="form-control">
                     </div>
                     <div class="col-md-2">
                        <label for="lastname">Last Name:</label>
                        <input type="text" id="lastname" name="LastName" class="form-control">
                    </div>
​
                </div>
                <input type="submit" class="btn btn-info" value="Save">
            </form>
        <!-- Display your users as usual -->
        <table class="table">
            
            @foreach(var item in @Model){
                <tr>
                    <td>
                        @item.Username
                    </td>
                    <td>
                        @item.FirstName
                    </td>
                    <td>
                        @item.LastName
                    </td>
                    <td>
                        <!-- Create dummy buttons to handle edit/delete -->
                        <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>
                    </td>
                </tr>
            }
        </table>
        </div>
​
        <!-- JS includes -->
        <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(){
                        $.ajax({
                            url: '@Url.RouteUrl(new{ action="Delete", controller="Home"})',
                            data: {userId:parseInt(btn.dataset.id,10)},
                            type: 'POST',
                            dataType:"json",
                            complete: function(resp) {
                                alert(resp.responseText);
                            }
                        });
                        //Hide (or delete) the row after a deletion is done to update the UI
                        removeRow(btn);
                    })
                })
                removeRow = (elemInRow)=>{
                    $(elemInRow).closest("tr").hide();  
                }
                const form = document.getElementById("edit");
                // Hide the form initially
                $(form).hide();
                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"));
                        $(form).show();
                    })
                })
                // 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){
                    event.preventDefault();
                    $.ajax({
                        url: '@Url.RouteUrl(new{ action="Edit", controller="Home"})',
                        data: $(this).serialize(),
                        type: 'POST',
                        dataType: 'json',
                        complete: function(resp) {
                            const jsonOb = JSON.parse(resp.responseText);
                            updateRow(jsonOb.Username,jsonOb.FirstName,jsonOb.LastName,$(form).closest("tr")[0]);
                            $(form).hide();
                            alert(`I saved: ${JSON.stringify(jsonOb)}`);
                        }
                    });
                })
                updateRow = (username, firstname, lastname,row)=>{
                    const tds = $("td",row);
                    $(tds[0]).text(username);
                    $(tds[1]).text(firstname);
                    $(tds[2]).text(lastname);
                }
​
​
        </script>
    </body>
</html>
​

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace MvcApp
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			return View(GetUsers());
		}

		public List<UserViewModel> GetUsers()
		{
			//faux data from db
			var list = new List<UserViewModel>();
			for (int i = 0; i < 10; i++)
			{
				list.Add(new UserViewModel()
				{Id = i, Username = "User_" + i, FirstName = "UserFirst " + i, LastName = "UserLast " + i});
			}

			return list;
		}

		[HttpPost]
		public JsonResult Delete(int userId)
		{
			//perform deletion here
			/***************/
			return Json("I deleted " + userId);
		}

		[HttpPost]
		public JsonResult Edit(UserViewModel user)
		{
			//save data here
			/***************/
			//then return updated data as json
			return Json(user);
		}

	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace MvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View(GetUsers());
        }
​
        public List<UserViewModel> GetUsers()
        {
            //faux data from db
            var list = new List<UserViewModel>();
            for (int i = 0; i < 10; i++)
            {
                list.Add(new UserViewModel()
                {Id = i, Username = "User_" + i, FirstName = "UserFirst " + i, LastName = "UserLast " + i});
            }
​
            return list;
        }
​
        [HttpPost]
        public JsonResult Delete(int userId)
        {
            //perform deletion here
            /***************/
            return Json("I deleted " + userId);
        }
​
        [HttpPost]
        public JsonResult Edit(UserViewModel user)
        {
            //save data here
            /***************/
            //then return updated data as json
            return Json(user);
        }
​
    }
}

View in Full Screen

0
1
1
2
3
5
8
13
21
34
55
89
144
233
377
610
987
1597
2584
4181
6765
10946
17711
28657
46368
75025
121393
196418
317811
514229
832040
1346269
2178309
3524578
5702887
9227465
14930352
24157817
39088169
63245986
102334155
165580141
267914296
433494437
701408733
1134903170

Cached Result
Last Run:	6:29:52 am
Compile:	0.1s
Execute:	0s
Memory:	0b
CPU:	0s

View IL Code