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，看到列表，然後點擊產品名稱，就會以模式彈出詳細資料