Asp.net MVC学习日记八（JQuery和分部视图，查看详细）

最新推荐文章于 2019-09-10 18:31:58 发布

最新推荐文章于 2019-09-10 18:31:58 发布 · 192 阅读

文章标签：

#测试 #javascript #ViewUI

本文详细介绍了如何构建一个产品管理系统，包括创建产品类、实现产品存储与检索功能，以及通过动态加载产品详情来优化用户体验。具体步骤涉及类定义、控制器方法、视图模板以及交互式脚本的实现，旨在提供一个全面的产品信息展示解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 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 = @"HelloWorld")
.Build();

return product;
}
}

2、在HomeController中添加

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

public ActionResult ProductDetail(int id)
{
ViewData["Product"] = new ProductRepository().GetProductByID(id);
return View();
}

public ActionResult GetProductDetail(int id)
{
ViewData["Product"] = new ProductRepository().GetProductByID(id);
return View();
}

3、实现Product和ProductDetail类，同时实现GetProductDetail分部类

4、Product.aspx中添加

$(function () {
$('a.list-item').click(function () {
$("#detail").html('');
$('#detail').load('<%: Url.Action("GetProductDetail") %>', { id: this.id });
return false;
});
});
</script>
<style type="text/css">
.list-item { cursor: pointer; }
</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)%>
<%= Html.ActionLink(product.Name, "ProductDetail", new { @id = product.ProductId }, new { @id = product.ProductId, @class = "list-item" })%>
</div>
<% } %>

5、ProductDetail.aspx中添加

<% Html.RenderPartial("GetProductDetail"); %>

6、GetProductDetail.ascx中添加

<%
Product p = ViewData["Product"] as Product;
%>
<div class="display-label">Id: </div>
<div class="display-field"><%: p.ProductId %></div>
<div class="display-label">Name: </div>
<div class="display-field"><%: p.Name %></div>
<div class="display-label">Price: </div>
<div class="display-field"><%: String.Format("{0:c}", p.Price) %></div>
<div class="display-label">SKU: </div>
<div class="display-field"><%: p.Sku %></div>
<div class="display-label">Created: </div>
<div class="display-field"><%: p.CreateDate %></div>
<div class="display-label">In Stock: </div>
<div class="display-field"><%: p.InStock %></div>
<div class="display-label">Desc: </div>
<div class="display-field"><%: p.Description %></div>
<hr />