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

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中添加

<script type="text/javascript">

        $(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 />