[Fork] SO-36517705 Create and Edit Modal | C# Online Compiler

[Fork] SO-36517705 Create and Edit Modal by Stephen Muecke

using System;
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
	public class PersonVM
	{
		public int? ID { get; set; }
		public string FirstName { get; set; }
		public string LastName { get; set; }
	}
	public class PersonListVM
	{
		public int? ID { get; set; }
		[Required(ErrorMessage = "Please enter first name")]
		[Display(Name = "First Name")]
		public string FirstName { get; set; }
		[Required(ErrorMessage = "Please enter last name")]
		[Display(Name = "Last Name")]
		public string LastName { get; set; }
		public IEnumerable<PersonVM> People { get; set; }
	}

}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class PersonVM
    {
        public int? ID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
    public class PersonListVM
    {
        public int? ID { get; set; }
        [Required(ErrorMessage = "Please enter first name")]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }
        [Required(ErrorMessage = "Please enter last name")]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }
        public IEnumerable<PersonVM> People { get; set; }
    }
​
}

@model HelloWorldMvcApp.PersonListVM
@{
	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;
			}
            table {
				width: 100%;
				border-collapse:collapse;
			}
			tr {
				border-bottom: solid 1px gray;
			}
			#dialog-mask {
    			display: none;
    			width: 100%;
    			height: 100%;
    			position: fixed;
    			top: 0;
    			left: 0;
    			background: rgba(0,0,0,0.1);
			}
			#dialog {
   			 	width: 400px;
    			position: fixed;
    			left: 50%;
    			top: 50%;
    			margin: -100px 0 0 -200px;
    			border: solid 1px #aaa;
    			border-radius: 5px;
    			background-color: white;
    			padding: 10px;
			}
			#template {
				display: none;
			}
		</style>
	</head>
	
	<body>
		<div class="container">
			<table>
				<thead>
					<tr>
						<th>@Html.DisplayNameFor(m => m.FirstName)</th>
						<th>@Html.DisplayNameFor(m => m.LastName)</th>
						<th></th>
					</tr>
				</thead>
				<tbody id="table">
					@foreach (var person in Model.People)
					{
						<tr>
							<td class="firstname">@person.FirstName</td>
							<td class="lastname">@person.LastName</td>
							<td><a href="#" data-id=@person.ID class="edit">Edit</a></td>
						</tr>
					}
				</tbody>
			</table>
			<a href="#" id="create">Add new person</a>
		</div>
			
			
		<div id="dialog-mask">
			<div id="dialog">
				<div class="col-md-6 col-md-offset-3">
	
					<form id="form">
						@Html.HiddenFor(m => m.ID)
						<div class="form-group">
							@Html.LabelFor(m => m.FirstName)
							@Html.TextBoxFor(m => m.FirstName, new {@class="form-control"}) 
							@Html.ValidationMessageFor(m => m.FirstName)
						</div>
						<div class="form-group">
							@Html.LabelFor(m => m.LastName)
							@Html.TextBoxFor(m => m.LastName, new {@class="form-control"}) 
							@Html.ValidationMessageFor(m => m.LastName)
						</div>
						<button type="button" id="save" class="btn btn-success submit">Save</button>
						<button type="button" id="cancel" class="btn btn-success submit">Cancel</button>
					</form>
				</div>
			</div>
		</div>
		<table id="template">
			<tr>
				<td class="firstname"></td>
				<td class="lastname"></td>
				<td><a href="#" class="edit">Edit</a></td>
			</tr>
		</table>

		<!-- 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">
		
			var currentRow = null;
			var url = '@Url.Action("Save")';
			var dialog = $('#dialog-mask');
			var form = $('#form');
			var table = $('#table');
			var template = $('#template');
					
			$('#create').click(function() {
				currentRow = null;
				$('#ID').val('');
				$('#FirstName').val('');
				$('#LastName').val('');
				dialog.show();
			});
					
			$('#table').on('click', '.edit', function() {
				currentRow = $(this).closest('tr');
				$('#ID').val($(this).data('id'));
				$('#FirstName').val(currentRow.find('.firstname').text());
				$('#LastName').val(currentRow.find('.lastname').text());
				dialog.show();
			});
					
			$('#save').click(function() {
				if (!form.valid()) {
					return;
				}
				$.post(url, form.serialize(), function(data) {
					if (data) {
						if (currentRow == null) {
							var row = template.clone();
							row.find('.firstname').text($('#FirstName').val());
							row.find('.lastname').text($('#LastName').val());
							row.find('.edit').data($('id', data.ID));
							table.append(row.find('tr'));
						} else {
							currentRow.find('.firstname').text($('#FirstName').val());
							currentRow.find('.lastname').text($('#LastName').val());
						}
					} else
					{
						console.log('error');
						// oops
					}
					dialog.hide();
				}).fail(function() {
					console.log('error');
					// oops
				});
				
			});
			$('#cancel').click(function() {
				dialog.hide();
			});

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

View

 
@model HelloWorldMvcApp.PersonListVM
@{
    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;
            }
            table {
                width: 100%;
                border-collapse:collapse;
            }
            tr {
                border-bottom: solid 1px gray;
            }
            #dialog-mask {
                display: none;
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                background: rgba(0,0,0,0.1);
            }
            #dialog {
                width: 400px;
                position: fixed;
                left: 50%;
                top: 50%;
                margin: -100px 0 0 -200px;
                border: solid 1px #aaa;
                border-radius: 5px;
                background-color: white;
                padding: 10px;
            }
            #template {
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div class="container">
            <table>
                <thead>
                    <tr>
                        <th>@Html.DisplayNameFor(m => m.FirstName)</th>
                        <th>@Html.DisplayNameFor(m => m.LastName)</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="table">
                    @foreach (var person in Model.People)
                    {
                        <tr>
                            <td class="firstname">@person.FirstName</td>
                            <td class="lastname">@person.LastName</td>
                            <td><a href="#" data-id=@person.ID class="edit">Edit</a></td>
                        </tr>
                    }
                </tbody>
            </table>
            <a href="#" id="create">Add new person</a>
        </div>
            
            
        <div id="dialog-mask">
            <div id="dialog">
                <div class="col-md-6 col-md-offset-3">
    
                    <form id="form">
                        @Html.HiddenFor(m => m.ID)
                        <div class="form-group">
                            @Html.LabelFor(m => m.FirstName)
                            @Html.TextBoxFor(m => m.FirstName, new {@class="form-control"}) 
                            @Html.ValidationMessageFor(m => m.FirstName)
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.LastName)
                            @Html.TextBoxFor(m => m.LastName, new {@class="form-control"}) 
                            @Html.ValidationMessageFor(m => m.LastName)
                        </div>
                        <button type="button" id="save" class="btn btn-success submit">Save</button>
                        <button type="button" id="cancel" class="btn btn-success submit">Cancel</button>
                    </form>
                </div>
            </div>
        </div>
        <table id="template">
            <tr>
                <td class="firstname"></td>
                <td class="lastname"></td>
                <td><a href="#" class="edit">Edit</a></td>
            </tr>
        </table>
​
        <!-- 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">
        
            var currentRow = null;
            var url = '@Url.Action("Save")';
            var dialog = $('#dialog-mask');
            var form = $('#form');
            var table = $('#table');
            var template = $('#template');
                    
            $('#create').click(function() {
                currentRow = null;
                $('#ID').val('');
                $('#FirstName').val('');
                $('#LastName').val('');
                dialog.show();
            });
                    
            $('#table').on('click', '.edit', function() {
                currentRow = $(this).closest('tr');
                $('#ID').val($(this).data('id'));
                $('#FirstName').val(currentRow.find('.firstname').text());
                $('#LastName').val(currentRow.find('.lastname').text());
                dialog.show();
            });
                    
            $('#save').click(function() {
                if (!form.valid()) {
                    return;
                }
                $.post(url, form.serialize(), function(data) {
                    if (data) {
                        if (currentRow == null) {
                            var row = template.clone();
                            row.find('.firstname').text($('#FirstName').val());
                            row.find('.lastname').text($('#LastName').val());
                            row.find('.edit').data($('id', data.ID));
                            table.append(row.find('tr'));
                        } else {
                            currentRow.find('.firstname').text($('#FirstName').val());
                            currentRow.find('.lastname').text($('#LastName').val());
                        }
                    } else
                    {
                        console.log('error');
                        // oops
                    }
                    dialog.hide();
                }).fail(function() {
                    console.log('error');
                    // oops
                });
                
            });
            $('#cancel').click(function() {
                dialog.hide();
            });
​
        </script>
    </body>
</html>
​

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

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			PersonListVM model = new PersonListVM()
			{
				People = new List<PersonVM>()
				{
					new PersonVM(){ ID = 1, FirstName = "John", LastName = "Doe" },
					new PersonVM(){ ID = 1, FirstName = "Joe", LastName = "Bloggs" }
				}
			};
			return View(model);
		}


		[HttpPost]
		public JsonResult Save(PersonVM model)
		{
			if (model.ID.HasValue)
			{
				// Save existing
				
			}
			else
			{
				// Create new and get new ID
				
			}
			// Return the ID of the data model
			int ID = model.ID ?? 3; // fake it
			return Json(ID); // If error, then return Json(null);
		}

	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            PersonListVM model = new PersonListVM()
            {
                People = new List<PersonVM>()
                {
                    new PersonVM(){ ID = 1, FirstName = "John", LastName = "Doe" },
                    new PersonVM(){ ID = 1, FirstName = "Joe", LastName = "Bloggs" }
                }
            };
            return View(model);
        }
​
​
        [HttpPost]
        public JsonResult Save(PersonVM model)
        {
            if (model.ID.HasValue)
            {
                // Save existing
                
            }
            else
            {
                // Create new and get new ID
                
            }
            // Return the ID of the data model
            int ID = model.ID ?? 3; // fake it
            return Json(ID); // If error, then return Json(null);
        }
​
    }
}

View in Full Screen

View IL Code