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); |