@Model.ProductName
``` ```htmlNorthwoods Cranberry Sauce
``` Razor reads the C# up to the first character that can't be part of a name, such as a space or `<`. So a calculation needs parentheses, **`@( )`**, or Razor stops too soon: ```cshtml@Model.UnitPrice * 2
@(Model.UnitPrice * 2)
``` ```html40.0000 * 2
80.0000
``` The first line showed the price, then the text ` * 2`. And `40.0000`? Northwind's prices are SQL Server `money`, which keeps four decimal places. Format it as money with `ToString("C")`, as the product views do. ## @{ } runs code A **code block**, `@{ ... }`, runs C# without showing anything: declare variables, work things out, set `ViewData`. Every view you've seen starts with one: ```cshtml @{ ViewData["Title"] = Model.ProductName; decimal priceWithTax = Model.UnitPrice!.Value * 1.08m; }With tax: @priceWithTax.ToString("C")
``` ```htmlWith tax: $43.20
``` ## @if and @foreach C#'s `if`, `foreach`, `for` and `switch` work with an `@` in front. Inside their braces, you're back in HTML: ```cshtml @if (Model.UnitsInStock < 20) {Only @Model.UnitsInStock left!
} @for (int i = 1; i <= 3; i++) { @i } ``` ```htmlOnly 6 left!
1 2 3 ``` `@foreach` is the one you'll use most: one table row, list item or card per item in the model, as in the products table in *Passing a Model to a View*. ## Razor encodes what it shows Text shown with `@` is **HTML-encoded**: characters that mean something in HTML, such as `<`, `>` and `'`, are turned into codes the browser shows as plain characters. ```cshtml @{ string warning = "Low stock"; }@warning
``` ```html<b>Low stock</b>
``` The browser shows `Low stock` as text, not bold. That's a safety feature: if a user types HTML or JavaScript into a form, your pages show it as text instead of running it. (It's also why the page for product 7 has `Uncle Bob's` in its source: `'` is the code for `'`.) ## A few more | You write | You get | |---|---| | `@* a note *@` | A Razor comment: it never reaches the browser | | `sales@northwind.com` | An email address stays text: Razor sees the letters before the `@` | | `@@northwind` | A literal `@`, as in `@northwind` | ## Tag helpers write your links You could type links by hand: ``. But if a route ever changes, every hand-written address breaks. **Tag helpers** are `asp-` attributes that ASP.NET Core turns into the right HTML when the page is built: ```cshtml Details All products Home Sauces ``` ```html Details All products Home Sauces ``` | Attribute | Means | |---|---| | `asp-controller` | Which controller. Leave it out for the current view's controller. | | `asp-action` | Which action | | `asp-route-id` | The route's `id` part | | `asp-route-`*anything else* | A query-string value: `asp-route-name="sauce"` adds `?name=sauce` | Notice the tag helpers know the route: they leave out `Index` and `Home` where the defaults cover them. Tag helpers work because of one line in `Views/_ViewImports.cshtml`: ```cshtml @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers ``` Now link the products list to the details pages. In `Views/Products/Index.cshtml`, change the name cell to: ```cshtml