Chapter 2 - Working with Razor

 

A view engine processes the view content and insert dynamic content into the output sent to a browser, and razor is the name of the MVC Framework view engine. 

1. Working with modal

@model PartyInvites.Models.Product

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Product</title>
</head>
<body>
    <div>
        @Model.Name 
    </div>
</body>
</html>

Razor statements start with @ character. @model statement declares the type of the model object that I will pass to the view from the action method. This allows my to refer to the methods, fields, and properties of the view model object throught @Model. 

 

2. Working with layout

@{layout = null;} is an example of a razor code block, which allows me to include C# statement in a view. The code block is opened with @{ and closed with }, the statements it contains are evaluated when the view is rendered.

The effect of setting layout to null is to tell the MVC framework that the view is self-contained. 

Layouts are effectively templates that contain markup that you use to create consistency across your app - this could be to ensure that the right javascript libraries are included in the result or that a common look and feel is used throughout. 

 

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

Files in the views folder whose names begin with an underscore are not returned to the user. In the layout file, @Rendybody() method inserts the contents of the view specified by the action method into the layout markup. And the elements in the layout will be applied to any view that uses the layout and this is why layouts are essentially templates. 

 

2.1 applying a layout

To apply the layout to the view, I just need to set the value of the Layout property.

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

 

2.2 using a view start file

The process of setting layout in every view is error-prone process and difficult to maintain. This can be resolved by using a view start file. When it renders a view, the MVC framework will look for a file called ViewStart.cshtml. The content of this file will be treated as through they were contained in the view file itself and I can use this feature to automatically set a value for the layout property. 

The content of _ViewStart.cshtml file. 

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

I do not have to specify that I want to use the view start file. The MVC framework will locate the file and use its contents automatically. The value defined in the view file take precedence, which makes it easy to override the view start file. 

It is important to understand the difference between  setting layout to null and omitting layout statement. 

 

3. Using Razor expression

Even though you can do quite a lot with Razor, including c# statement, but you should not use Razor to perform business logic or manipulate your domain model objects in any way. 

And you should not format the data that your action method passed to the view. let the view engine figure out data it needs to display. 

 

3.1 Inserting data values

The simplest thing you can do with Razor expression it to insert a data value into the markup. You can do this using the @Model expression to refer to the properties and methods defined by the view model. (@Model.Name, @Model.Price etc)

 

3.2 Settign attribute values

<div data-discount="@ViewBag.ApplyDiscount" data-express="@ViewBag.ExpressShip"></div>

 

3.3 Using conditional statements

Razor is able to process conditional statements, which means that I can tailor the output from a view based on values in the view data. 

<table>
    <tr>
        <td>
            @switch ((int) ViewBag.ProductCount)
            {
                case 0:
                    @: out of stock
                    break;
                case 1:
                    <b>low stock</b>
                    break;
                default:
                    break;
            }
        </td>
    </tr>
</table>

To start a conditional statement, you place an @ character in front of the C# conditioanl keyword. The @: characters prevent Razor from interpreting this as a C# statement. 

 

3.4 Enumerating arrays and collections

        public ActionResult Products()
        {
            Product[] array =
            {
                new Product(){ProductID = 1,Name="product1", Price = 20, Description = "des 1", Category = "cat1"},
                new Product(){ProductID = 2,Name="product2", Price = 21, Description = "des 2", Category = "cat2"},
                new Product(){ProductID = 3,Name="product3", Price = 22, Description = "des 3", Category = "cat3"},
            };
            return View(array);
        }
@using PartyInvites.Models
@model PartyInvites.Models.Product[]

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

@if (Model.Length > 0)
{
    <table>
        <thead><tr><th>Product</th><th>Price</th></tr></thead>
        <tbody>
            @foreach (Product p in Model)
            {
                <tr>
                    <td>@p.Name</td>
                    <td>@p.Price</td>
                </tr>
            }
        </tbody>
    </table>    
}

 

3.5 Dealing with namespace

You can apply @using expression to bring a namespace into the context for a view, just like in a regular C# class. 

@using Models

And you can apply multiple using statement. 

posted @ 2015-05-24 12:18  tim_bo  阅读(153)  评论(0)  编辑  收藏  举报