Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript Editing - How would you improve this?
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, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult Edit(Customer customer)
{
Repository.Save(customer);
return Json(customer, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult Delete(int id)
{
Repository.Delete(id);
return Json(true, JsonRequestBehavior.AllowGet);
}
}
<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="#" id="add_customer_link">Add</a>
<div style="display:none;" id="customer_details_dialog" title="Customer details">
<div>First name: <input type="text" id="customer_first_text" /></div>
<div>Last name: <input type="text" id="customer_last_text" /></div>
</div>
<script id="customer_template" type="text/x-jquery-tmpl">
<tr>
<td>${Id}</td>
<td>${FirstName}</td>
<td>${LastName}</td>
<td><a href="#" id="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>
<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>
(function($) {
var $firstName = $("#customer_first_text"),
$lastName = $("#customer_last_text"),
$dialog = $("#customer_details_dialog");
$(function () {
$("#add_customer_link").click(function (e) {
e.preventDefault(); //this will suppress the default operation of the anchor tag
showAddDialog();
});
$("#edit_customer").live('click', function (e) {
var id = $(this).data("id"); //use the data API call
e.preventDefault(); //this will suppress the default operation of the anchor tag
$.getJSON('/customer/get/' + id, function(data) {
showEditDialog(data);
}); //if you're only returning JSON then you can just use $.getJSON to handle the right data type in response
});
refresh();
});
function refresh() {
$.getJSON("/Customer/List", function (data) {
$("#customers_table_body").empty();
$("#customer_template").tmpl(data).appendTo("#customers_table_body");
}
});
}
function showAddDialog() {
$firstName.val("");
$lastName.val("");
$dialog.dialog({
modal: true,
buttons: {
"Add": function () {
var customer = {
FirstName: $firstName.val(),
LastName: $lastName.val()
};
$.ajax({
url: "/Customer/Add",
type: "POST",
data: customer,
success: function () {
$dialog.dialog("close");
refresh();
}
});
}
}
});
}
function showEditDialog(customer) {
$firstName.val(customer.FirstName);
$lastName.val(customer.LastName);
$dialog.dialog({
modal: true,
buttons: {
"Save": function () {
customer.FirstName = $firstName.val();
customer.LastName = $lastName.val();
$.ajax({
url: "/Customer/Edit",
type: "POST",
data: customer,
success: function () {
$dialog.dialog("close");
refresh();
}
});
}
}
});
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.