Created
May 17, 2011 03:33
-
-
Save PaulStovell/975889 to your computer and use it in GitHub Desktop.
JavaScript Editing - How would you improve this?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public class CustomerController : Controller | |
{ | |
public CustomerRepository Repository = new CustomerRepository(); | |
public ActionResult Index() | |
{ | |
return View(); | |
} | |
public JsonResult List() | |
{ | |
return Json(Repository.All(), JsonRequestBehavior.AllowGet); | |
} | |
public JsonResult Get(int id) | |
{ | |
return Json(Repository.Get(id), JsonRequestBehavior.AllowGet); | |
} | |
[HttpPost] | |
public JsonResult Add(Customer customer) | |
{ | |
Repository.Save(customer); | |
return Json(customer); | |
} | |
[HttpPost] | |
public JsonResult Edit(Customer customer) | |
{ | |
Repository.Save(customer); | |
return Json(customer); | |
} | |
[HttpPost] | |
public JsonResult Delete(int id) | |
{ | |
Repository.Delete(id); | |
return Json(true); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h2>Customer editor</h2> | |
<table> | |
<thead> | |
<tr> | |
<td>Id</td> | |
<td>First</td> | |
<td>Last</td> | |
<td>Actions</td> | |
</tr> | |
</thead> | |
<tbody id="customers_table_body" /> | |
</table> | |
<a href="#" class="add-customer">Add</a> | |
<script id="edit_dialog_template" type="text/x-jquery-tmpl"> | |
<div title="Customer details"> | |
<div style="color: red;" id="error_details" /> | |
<div>First name: <input type="text" id="customer_first_text" value="${FirstName}" /></div> | |
<div>Last name: <input type="text" id="customer_last_text" value="${LastName}" /></div> | |
</div> | |
</script> | |
<script id="customer_template" type="text/x-jquery-tmpl"> | |
<tr> | |
<td>${Id}</td> | |
<td>${FirstName}</td> | |
<td>${LastName}</td> | |
<td><a href="#" class="edit-customer" data-id="${Id}">Edit</a> <a href="#" id="delete_customer">Delete</a></td> | |
</tr> | |
</script> | |
<script type="text/javascript" src="/Views/Customer/Index.js"></script> | |
<!-- Will be set via CSS someday --> | |
<div id="loading" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #f00; opacity:0.4"> | |
<div style="text-align: center; vertical-align: middle; height: 100%"> | |
Please wait... | |
</div> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function ($) { | |
var customersTableBody = $("#customers_table_body"); | |
$(function () { | |
loadCustomers(); | |
$("a.add-customer").click(function (e) { | |
e.preventDefault(); | |
addCustomer(); | |
}); | |
$("#customers_table_body a.edit-customer").live('click', function (e) { | |
var id = $(this).data("id"); | |
e.preventDefault(); | |
$.getJSON("/Customer/Get/" + id, null, function (json) { | |
editCustomer(json); | |
}); | |
}); | |
}); | |
function loadCustomers() { | |
$.getJSON("/Customer/List", null, function (data) { | |
customersTableBody.empty(); | |
$("#customer_template") | |
.tmpl(data) | |
.appendTo(customersTableBody); | |
}); | |
}; | |
function addCustomer() { | |
var customer = {}; | |
showDetailsDialog(customer, function (result) { | |
$.post("/Customer/Add", customer, function (json) { | |
if (json.ErrorMessage !== undefined) { | |
result.error(json.ErrorMessage); | |
return; | |
} | |
result.success(); | |
}); | |
}); | |
}; | |
function editCustomer(customer) { | |
showDetailsDialog(customer, function (result) { | |
$.post("/Customer/Edit", customer, function (json) { | |
if (json.ErrorMessage !== undefined) { | |
result.error(json.ErrorMessage); | |
return; | |
} | |
result.success(); | |
}); | |
}); | |
}; | |
function showDetailsDialog(customer, onSave) { | |
var dialog = $("#edit_dialog_template").tmpl(customer); | |
dialog.dialog({ | |
modal: true, | |
buttons: { | |
"Save": function () { | |
customer.FirstName = $("#customer_first_text", dialog).val(); | |
customer.LastName = $("#customer_last_text", dialog).val(); | |
onSave({ | |
success: function () { | |
dialog.dialog("close"); | |
loadCustomers(); | |
}, | |
error: function (details) { | |
$("#error_details", dialog).html(details); | |
} | |
}); | |
} | |
} | |
}); | |
}; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment