Listing 5-1. Creating a Simple Domain Model Class
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Razor.Models { public class Product { public int ProductId { get; set; } public string Name { get; set; } public string Description { get; set; } public decimal Price { get; set; } public string Category { set; get; } } }
Listing 5-2. A Simple Controller
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Razor.Models; namespace Razor.Controllers { public class HomeController : Controller { Product prod = new Product { ProductId = 1, Name = "Kayak", Description = "A boat for one person", Category = "Watersports", Price = 275M }; public ActionResult Index() { return View(prod); } } }
Listing 5-3. A Simple Razor View
@model Razor.Models.Product @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> </div> </body> </html>
Listing 5-4. Referring to a View Model Object Property in a Razor View
@model Razor.Models.Product @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> @Model.Name </div> </body> </html>
Listing 5-5. The Initial Contents of a Layout
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <div> @RenderBody() </div> </body> </html>
Listing 5-6. Adding Elements to a Layout
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <h1>Product Information</h1> <div style="padding:20px;border:solid medium black;font-size:20pt"> @RenderBody() </div> <h2>Visit <a href="http://apress.com">Appress</a></h2> </body> </html>
Listing 5-7. Using the Layout Property to Specify a View File
@model Razor.Models.Product @{ ViewBag.Title = "Product Name"; Layout = "~/Views/_BasicLayout.cshtml"; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> @Model.Name </div> </body> </html>
Listing 5-8. Creating a View Start File
@{
Layout = "~/Views/_BasicLayout.cshtml";
}
Listing 5-9. Updating the View to Reflect the Use of a View Start File
@model Razor.Models.Product @{ ViewBag.Title = "Product Name"; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> @Model.Name </div> </body> </html>
Listing 5-10. Adding a New Action Method to the Home Controller
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Razor.Models; namespace Razor.Controllers { public class HomeController : Controller { Product prod = new Product { ProductId = 1, Name = "Kayak", Description = "A boat for one person", Category = "Watersports", Price = 275M }; public ActionResult Index() { return View(prod); } public ActionResult NameAndPrice() { return View(prod); } } }
Listing 5-11. The Contents of the NameAndPrice View
@model Razor.Models.Product @{ ViewBag.Title = "NameAndPrice"; Layout = "~/Views/_BasicLayout.cshtml"; } <h2>NameAndPrice</h2>
Listing 5-12. Adding to the NameAndPrice Layout
@model Razor.Models.Product @{ ViewBag.Title = "NameAndPrice"; Layout = "~/Views/_BasicLayout.cshtml"; } <h2>NameAndPrice</h2> The product is @Model.Name and it costs $@Model.Price
Listing 5-13. The DemoExpression Action Method
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Razor.Models; namespace Razor.Controllers { public class HomeController : Controller { Product prod = new Product { ProductId = 1, Name = "Kayak", Description = "A boat for one person", Category = "Watersports", Price = 275M }; public ActionResult Index() { return View(prod); } public ActionResult NameAndPrice() { return View(prod); } public ActionResult DemoExpression() { ViewBag.ProductCount = 1; ViewBag.ExpressShip = true; ViewBag.ApplyDiscount = false; ViewBag.Supplier = null; return View(prod); } } }
Listing 5-14. The Contents of the DemoExpression View File
@model Razor.Models.Product @{ ViewBag.Title = "DemoExpression"; } <table> <thead> <tr> <th>Property</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>Name</td> <td>@Model.Name</td> </tr> <tr> <td>Price</td> <td>@Model.Price</td> </tr> <tr> <td>Stock Level</td> <td>@ViewBag.ProductCount</td> </tr> </tbody> </table>
Listing 5-15. Using a Razor Expression to Set an Attribute Value
@model Razor.Models.Product @{ ViewBag.Title = "DemoExpression"; Layout = "~/Views/_BasicLayout.cshtml"; } <table> <thead> <tr> <th>Property</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>Name</td> <td>@Model.Name</td> </tr> <tr> <td>Price</td> <td>@Model.Price</td> </tr> <tr> <td>Stock Level</td> <td>@ViewBag.ProductCount</td> </tr> </tbody> </table> <div data-discount="@ViewBag.ApplyDiscount" data-express="@ViewBag.ExpressShip" data-supplier="@ViewBag.Supplier"> The Containing element has data attributes </div> Discount:<input type="checkbox" checked="@ViewBag.ApplyDiscount" /> Express: <input type="checkbox" checked="@ViewBag.ExpressShip" /> Supplier:<input type="checkbox" checked="@ViewBag.Supplier" />
Listing 5-16. Using a Conditional Razor Statement
@model Razor.Models.Product @{ ViewBag.Title = "DemoExpression"; Layout = "~/Views/_BasicLayout.cshtml"; } <table> <thead> <tr> <th>Property</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>Name</td> <td>@Model.Name</td> </tr> <tr> <td>Price</td> <td>@Model.Price</td> </tr> <tr> <td>Stock Level</td> <td> @switch ((int)ViewBag.ProductCount) { case 0: @: Out of Stock break; case 1: <b>Low Stock(@ViewBag.ProductCount)</b> break; default: @ViewBag.ProductCount break; } </td> </tr> </tbody> </table>
Listing 5-17. Using an if Statement in a Razor View
@model Razor.Models.Product @{ ViewBag.Title = "DemoExpression"; Layout = "~/Views/_BasicLayout.cshtml"; } <table> <thead> <tr> <th>Property</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>Name</td> <td>@Model.Name</td> </tr> <tr> <td>Price</td> <td>@Model.Price</td> </tr> <tr> <td>Stock Level</td> <td> @if (ViewBag.ProductCount == 0) { @: Out of Stock } else if (ViewBag.ProductCount == 1) { <b>Low Stock(@ViewBag.ProductCount)</b> } else { @ViewBag.ProductCount } </td> </tr> </tbody> </table>
Listing 5-18. The DemoArray Action Method
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Razor.Models; namespace Razor.Controllers { public class HomeController : Controller { Product prod = new Product { ProductId = 1, Name = "Kayak", Description = "A boat for one person", Category = "Watersports", Price = 275M }; // Other action methods omitted for brevity public ActionResult DemoArray() { Product[] array = { new Product {Name = "Kayak", Price = 275M}, new Product {Name = "Lifejacket", Price = 48.95M}, new Product {Name = "Soccer ball", Price = 19.50M}, new Product {Name = "Corner flag", Price = 34.95M} }; return View(array); } } }
Listing 5-19. The Contents of the DemoArray.html File
@model Razor.Models.Product[] @{ ViewBag.Title = "DemoArray"; Layout = "~/Views/_BasicLayout.cshtml"; } @if (Model.Length > 0) { <table> <thead> <tr> <th>Product</th> <th>Price</th> </tr> </thead> <tbody> @foreach (Razor.Models.Product prod in Model) { <tr> <td>@prod.Name</td> <td>$@prod.Price</td> </tr> } </tbody> </table> } else { <h2>No product data</h2> }
Listing 5-20. Applying the @using Expression
@using Razor.Models @model Product[] @{ ViewBag.Title = "DemoArray"; Layout = "~/Views/_BasicLayout.cshtml"; } @if (Model.Length > 0) { <table> <thead> <tr> <th>Product</th> <th>Price</th> </tr> </thead> <tbody> @foreach (Razor.Models.Product prod in Model) { <tr> <td>@prod.Name</td> <td>$@prod.Price</td> </tr> } </tbody> </table> } else { <h2>No product data</h2> }