Asp.net MVC学习日记九（JQuer利用模式弹出详细）

准备工作：

http://nyromodal.googlecode.com/files/nyroModal-1.6.2.zip，在这个地址下载JQuery插件

1、将jquery.nyroModal-1.6.2.min.js和Content/nyroModal.full.css导入

<script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.nyroModal-1.6.2.min.js" type="text/javascript"></script>
<link href="../../Content/nyroModal.full.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

2、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 string Sku { get; set; }
public DateTime CreateDate { get; set; }
public bool InStock { get; set; }
}

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

return products;
}

public Product GetProductByID(int productId)
{
Product product = Builder<Product>
.CreateNew()
.With(x => x.ProductId = productId)
.And(x => x.Description = @"Hello World.")
.Build();

return product;
}
}

3、HomeController中添加Action：

public ActionResult Product()
{
ViewData["Products"] = new ProductRepository().GetProducts();
return View();
}

[HttpPost]
public JsonResult _GetProductDetail(int id)
{
Product p = new ProductRepository().GetProductByID(id);
return Json(p);
}

4、Product.aspx中添加

<script type="text/javascript">

$(function () {

$("#detail").css('visibility', 'hidden');
$("#detail").css('position', 'absolute');

$('a.list-item').click(function () {
$("#detail").html('');
$.post('_GetProductDetail', { id: this.id },
function (data) {
showProduct(data);
$.nyroModalManual({ url: '#detail', minHeight: 150,
minWidth: 300, width: 300, height: 150
});
});

return false;
});
});

function showProduct(data) {
$("#detail").html(
formatLine('Id', data.ProductId) +
formatLine('Name', data.Name) +
formatLine('Price', data.Price) +
formatLine('SKU', data.Sku) +
formatLine('Created', data.CreateDate) +
formatLine('In Stock', data.InStock) +
formatLine('Desc', data.Description)
);
}
function formatLine(label, value) {
return '<div class="display-label">' + label + ':</div><div>' + value + '</div>';
}
</script>
<style type="text/css">
.list-item { cursor: pointer; color:Blue;}
</style>

<div id="detail"></div>
<% List<Product> products = ViewData["Products"] as List<Product>;
foreach (Product product in products)
{ %>
<div class="display-field">
<%: String.Format("{0:c}", product.Price)%>-
<a id = "<%= product.ProductId %>" class="list-item"><%= product.Name%></a>

</div>
<% } %>

访问http://localhost:13811/home/Product，看到列表，然后点击产品名称，就会以模式弹出详细信息