Asp.net MVC学习日记八(JQuery和分部视图,查看详细)
来源:互联网 发布:淘宝刻章会被钓鱼 编辑:程序博客网 时间:2024/04/27 20:34
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 />
- Asp.net MVC学习日记八(JQuery和分部视图,查看详细)
- asp.net mvc 3.0详细笔记__11__创建分部视图
- ASP.NET MVC 3的分部视图
- ASP.NET MVC异步加载分部视图
- ASP.NET MVC 的分部视图
- ASP.Net MVC开发基础学习笔记(10):分部视图PartialView
- Asp.net MVC学习日记十(JQuery删除)
- ASP.NET MVC公共模板、节、分部视图等
- Asp.Net MVC使用分部视图实现二级级联
- Asp.net MVC学习日记九(JQuer利用模式弹出详细)
- Asp.net MVC学习日记十一(JQuery异步提交表单)
- asp.net MVC 中呈现指定区域下的分部视图
- ASP.NET MVC 分部页 PartialViewResult
- ASP.NET MVC 分部页 PartialViewResult
- ASP.NET MVC 入门(六)——查看Edit方法和Edit视图
- MVC中的分部视图
- MVC分部视图
- MVC |分部视图 PartialView()
- Android 的消息队列模型
- 关于写CSDN博客时图片上传的解决方法
- peoplesoft后台登陆地址
- WPF的重要新概念
- javascript高级程序设计学习(一)-----js基础
- Asp.net MVC学习日记八(JQuery和分部视图,查看详细)
- 上班族的时间管理验测表
- 在delphi ocx控件的安装
- alarm,sigsetjmp,siglongjmp 注意事项
- Castle.ActiveRecord 使用 存储过程 返回实体类
- c# DataTable之增、删、查、改
- 学好Java框架
- Twaver
- Android的线程使用来更新UI----Thread、Handler、Looper、TimerTask等