Pro Aspnet MVC 4读书笔记(4) - Working with Razor

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

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);
        }
    }
}
View Code

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>
View Code

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>
View Code

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>
View Code

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>
View Code

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>
View Code

Listing 5-8. Creating a View Start File

@{
    Layout = "~/Views/_BasicLayout.cshtml";
}
View Code

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>
View Code

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);
        }
    }
}
View Code

Listing 5-11. The Contents of the NameAndPrice View

@model Razor.Models.Product

@{
    ViewBag.Title = "NameAndPrice";
    Layout = "~/Views/_BasicLayout.cshtml";
}

<h2>NameAndPrice</h2>
View Code

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
View Code

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);
        }
    }
}
View Code

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>
View Code

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" />
View Code

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>
View Code

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>
View Code

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);
        }
    }
}
View Code

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>
}
View Code

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>
}
View Code

 

 

 

 

posted on 2014-01-22 10:26  逝者如斯(乎)  阅读(192)  评论(0)  编辑  收藏  举报