Asp.net MVC学习日记十（JQuery删除）

1、Product和ProductRepository是必须的

public class Product
{
public int ProductId { get; set; }
public string Name { get; set; }
public double Price { get; set; }
public string Description { get; set; }
public DateTime CreateDate { get; set; }
}

public class ProductRepository
{
public List<Product> GetProducts()
{
List<Product> result = Builder<Product>
.CreateListOfSize(20).WhereAll()
.Build()
.ToList();

//do the paging
return result;
}

public Product GetProduct(int productId)
{
Product product =
Builder<Product>.CreateNew().With(x => x.ProductId =
productId).Build();
return product;
}
}

2、HomeController的Index修改

public ActionResult Index()
{
ViewData["Message"] = "欢迎使用 ASP.NET MVC!";
ViewData["Products"] = new ProductRepository().GetProducts();
return View();
}

3、HomeController添加Delete

[HttpPost]
public ActionResult Delete(int id)
{
//perform delete logic on your data
return View();
}

4、Index.aspx中

<script type="text/javascript">
$(document).ready(function () {
$('a.delete').click(function () {
var doDelete = confirm('Are you sure you want to delete this record?');
if (doDelete) {
var url = this.href.replace('Confirm', '');
var arr = url.split('/');
var id = arr[arr.length - 1];
$('div.busy' + id).html("Deleting...");
$.post(url, '',
function () {
$('div.container' + id).animate({
opacity: 0.25,
left: 'toggle',
height: 'toggle'
}, 1000, function () {
$('div.' + id).hide();
});
});
return false;
}
else { return false; }
});
});
</script>
<fieldset>
<legend>Products</legend>
<% List<Product> products = ViewData["Products"] as List<Product>; %>
<% foreach (Product p in products)
{ %>
<div class="container<%= p.ProductId %>">
<div class="busy<%= p.ProductId %>">
<%= Html.ActionLink("Delete", "ConfirmDelete", new {@id=p.ProductId}, new {@class="delete"}) %></div>
<div class="display-label">
ProductId</div>
<div class="display-field">
<%= Html.Encode(p.ProductId) %></div>
<div class="display-label">
Name</div>
<div class="display-field">
<%= Html.Encode(p.Name) %></div>
<div class="display-label">
Price</div>
<div class="display-field">
<%= Html.Encode(String.Format("{0:c}", p.Price)) %></div>
<div class="display-label">
Description</div>
<div class="display-field">
<%= Html.Encode(p.Description) %></div>
<div class="display-label">
CreateDate</div>
<div class="display-field">
<%= Html.Encode(String.Format("{0:g}", p.CreateDate)) %></div>
<hr />
</div>
<% } %>
</fieldset> <script type="text/javascript">
$(document).ready(function () {
$('a.delete').click(function () {
var doDelete = confirm('Are you sure you want to delete this record?');
if (doDelete) {
var url = this.href.replace('Confirm', '');
var arr = url.split('/');
var id = arr[arr.length - 1];
$('div.busy' + id).html("Deleting...");
$.post(url, '',
function () {
$('div.container' + id).animate({
opacity: 0.25,
left: 'toggle',
height: 'toggle'
}, 1000, function () {
$('div.' + id).hide();
});
});
return false;
}
else { return false; }
});
});
</script>
<fieldset>
<legend>Products</legend>
<% List<Product> products = ViewData["Products"] as List<Product>; %>
<% foreach (Product p in products)
{ %>
<div class="container<%= p.ProductId %>">
<div class="busy<%= p.ProductId %>">
<%= Html.ActionLink("Delete", "ConfirmDelete", new {@id=p.ProductId}, new {@class="delete"}) %></div>
<div class="display-label">
ProductId</div>
<div class="display-field">
<%= Html.Encode(p.ProductId) %></div>
<div class="display-label">
Name</div>
<div class="display-field">
<%= Html.Encode(p.Name) %></div>
<div class="display-label">
Price</div>
<div class="display-field">
<%= Html.Encode(String.Format("{0:c}", p.Price)) %></div>
<div class="display-label">
Description</div>
<div class="display-field">
<%= Html.Encode(p.Description) %></div>
<div class="display-label">
CreateDate</div>
<div class="display-field">
<%= Html.Encode(String.Format("{0:g}", p.CreateDate)) %></div>
<hr />
</div>
<% } %>
</fieldset>