3/20/11

View Product - Online Catalog Example using ASP.NET MVC 3

View Product URL: http://mvc.expressionsoftware.com/products/1000

Route
routes.MapRoute("view product",
                "products/{id}",
                new { controller = "Product",
                      action = "ViewProduct" });

Controller: \controllers\productController.cs
[HttpGet]
public ActionResult ViewProduct(int id)
{
    var product = Cache.GetProduct(id);
    return View(product);
}

Product Model Class & Object
namespace ExpressionSoftware.Model
{
   public class Product
   {
     public int Id { get; set; }
     public string Name { get; set; }
     public string Description { get; set; }

     public decimal Price { get; set; }
     public string Status { get; set; }
     public bool InStock { get; set; }
     public int StockCount { get; set; }

     public Dictionary<string, string> Metadata { get; set; }
   }
}

new Product() {
                Id = 1000,
                Name = "Foo",
                Description = "Some Foo...",
  
                Price=999.99m,
                Status = "In Stock",
                InStock = true,
                StockCount = 10,
  
                Metadata = new Dictionary<string, string>()
                {
                  { "Color", "Blue"},
                  { "Size", "30 x 16"},
                  { "Manufacturer", "Foo Makers Inc, USA"},
                }

              },

View: \views\product\viewProduct.cshtml
@model ExpressionSoftware.Model.Product
@{Layout = null;}

<!doctype html>
<html>
<head>
  <title>@Model.Name - Products</title>
  <link href="../../ux/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1>@Model.Name</h1>
  Id: @Model.Id<br />
  Description: @Model.Description<br /><br />

  Status: @{  //************************************
              if (@Model.InStock) {
                <span class="instock">@Model.Status</span><br />
                @:Count Available: @Model.StockCount
              }
              else {
                @Model.Status
              }
          }<br />

   Price: $@Model.Price<br /><br />
   
   @{  //************************************
       //metadata
       if (Model.Metadata != null) {
         foreach (var kvp in Model.Metadata) {
           @string.Format("{0}: {1}", kvp.Key, kvp.Value);<br />
         }
       }
   }<br />

   @{  //************************************
       <!-- wip - add to cart form / post action -->
       if (@Model.InStock) {
         <input type="submit" value="Add to Cart" />
       }
   }
</body>
</html>

Output HTML
<!doctype html>
<html>
<head>
  <title>Foo - Products</title>
  <link href="../../ux/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1>Foo</h1>
  
  Id: 1000<br />
  Description: Some Foo...<br /><br />

  Status: <span class="instock">In Stock</span><br />
  Count Available: 10<br />
  Price: $999.99<br /><br />

  Color: Blue<br />
  Size: 30 x 16<br />
  Manufacturer: Foo Makers Inc, USA<br /><br />
  
  <!-- wip - add to cart form / post action -->
  <input type="submit" value="Add to Cart" />
</body>
</html>



No comments:

Post a Comment