JavaScript Editing - How would you improve this?

CustomerController.cs

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

Index.html

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

Index.js

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