diff --git a/aspnetcore/blazor/components.md b/aspnetcore/blazor/components.md
index 0f26d4a7ea..7958ad03c4 100644
--- a/aspnetcore/blazor/components.md
+++ b/aspnetcore/blazor/components.md
@@ -31,9 +31,9 @@ The UI for a component is defined using HTML. Dynamic rendering logic (for examp
Members of the component class are defined in an `@code` block. In the `@code` block, component state (properties, fields) is specified with methods for event handling or for defining other component logic. More than one `@code` block is permissible.
> [!NOTE]
-> In previous versions of ASP.NET Core, `@functions` blocks were used for the same purpose as `@code` blocks. `@functions` blocks continue to work, but we recommend using the `@code` directive.
+> In prior previews of ASP.NET Core 3.0, `@functions` blocks were used for the same purpose as `@code` blocks in Razor components. `@functions` blocks continue to function in Razor components, but we recommend using the `@code` block in ASP.NET Core 3.0 Preview 6 or later.
-Component members can then be used as part of the component's rendering logic using C# expressions that start with `@`. For example, a C# field is rendered by prefixing `@` to the field name. The following example evaluates and renders:
+Component members can be used as part of the component's rendering logic using C# expressions that start with `@`. For example, a C# field is rendered by prefixing `@` to the field name. The following example evaluates and renders:
* `_headingFontStyle` to the CSS property value for `font-style`.
* `_headingText` to the content of the `
` element.
@@ -118,7 +118,7 @@ The following `ParentComponent` can provide content for rendering the `ChildComp
## Attribute splatting and arbitrary parameters
-Components can capture and render additional attributes in addition to the component's declared parameters. Additional attributes can be captured in a dictionary and then *splatted* onto an element when the component is rendered using the `@attributes` Razor directive. This scenario is useful when defining a component that produces a markup element that supports a variety of customizations. For example, it can be tedious to define attributes separately for an `` that supports many parameters.
+Components can capture and render additional attributes in addition to the component's declared parameters. Additional attributes can be captured in a dictionary and then *splatted* onto an element when the component is rendered using the [@attributes](xref:mvc/views/razor#attributes) Razor directive. This scenario is useful when defining a component that produces a markup element that supports a variety of customizations. For example, it can be tedious to define attributes separately for an `` that supports many parameters.
In the following example, the first `` element (`id="useIndividualParams"`) uses individual component parameters, while the second `` element (`id="useAttributesDict"`) uses attribute splatting:
@@ -149,9 +149,9 @@ In the following example, the first `` element (`id="useIndividualParams"
private Dictionary InputAttributes { get; set; } =
new Dictionary()
{
- { "maxlength", "10" },
- { "placeholder", "Input placeholder text" },
- { "required", "true" },
+ { "maxlength", "10" },
+ { "placeholder", "Input placeholder text" },
+ { "required", "true" },
{ "size", "50" }
};
}
@@ -188,7 +188,7 @@ The `CaptureUnmatchedValues` property on `[Parameter]` allows the parameter to m
## Data binding
-Data binding to both components and DOM elements is accomplished with the `@bind` attribute. The following example binds the `_italicsCheck` field to the check box's checked state:
+Data binding to both components and DOM elements is accomplished with the [@bind](xref:mvc/views/razor#bind) attribute. The following example binds the `_italicsCheck` field to the check box's checked state:
```cshtml
`) is essentially equivalent to the following:
```cshtml
- CurrentValue = __e.Value)" />
```
When the component is rendered, the `value` of the input element comes from the `CurrentValue` property. When the user types in the text box, the `onchange` event is fired and the `CurrentValue` property is set to the changed value. In reality, the code generation is a little more complex because `@bind` handles a few cases where type conversions are performed. In principle, `@bind` associates the current value of an expression with a `value` attribute and handles changes using the registered handler.
-In addition to handling `onchange` events with `@bind` syntax, a property or field can be bound using other events by specifying an `@bind-value` attribute with an `event` parameter. The following example binds the `CurrentValue` property for the `oninput` event:
+In addition to handling `onchange` events with `@bind` syntax, a property or field can be bound using other events by specifying an [@bind-value](xref:mvc/views/razor#bind) attribute with an `event` parameter ([@bind-value:event](xref:mvc/views/razor#bind)). The following example binds the `CurrentValue` property for the `oninput` event:
```cshtml
@@ -218,7 +218,7 @@ Unlike `onchange`, which fires when the element loses focus, `oninput` fires whe
**Format strings**
-Data binding works with format strings. Other format expressions, such as currency or number formats, aren't available at this time.
+Data binding works with format strings using [@bind:format](xref:mvc/views/razor#bind). Other format expressions, such as currency or number formats, aren't available at this time.
```cshtml
@@ -233,7 +233,7 @@ The `@bind:format` attribute specifies the date format to apply to the `value` o
**Component parameters**
-Binding also recognizes component parameters, where `@bind-{property}` can bind a property value across components.
+Binding recognizes component parameters, where `@bind-{property}` can bind a property value across components.
The following child component (`ChildComponent`) has a `Year` component parameter and `YearChanged` callback:
@@ -319,7 +319,7 @@ In general, a property can be bound to a corresponding event handler using `@bin
## Event handling
-Razor components provide event handling features. For an HTML element attribute named `on` (for example, `onclick` and `onsubmit`) with a delegate-typed value, Razor components treats the attribute's value as an event handler. The attribute's name always starts with `@on`.
+Razor components provide event handling features. For an HTML element attribute named `on{event}` (for example, `onclick` and `onsubmit`) with a delegate-typed value, Razor components treats the attribute's value as an event handler. The attribute's name is always formatted [@on{event}](xref:mvc/views/razor#onevent).
The following code calls the `UpdateHeading` method when the button is selected in the UI:
@@ -366,7 +366,9 @@ In the following example, `UpdateHeading` is called asynchronously when the butt
}
```
-For some events, event-specific event argument types are permitted. If access to one of these event types isn't necessary, it isn't required in the method call.
+### Event argument types
+
+For some events, event argument types are permitted. If access to one of these event types isn't necessary, it isn't required in the method call.
Supported [UIEventArgs](https://github.com/aspnet/AspNetCore/blob/release/3.0-preview8/src/Components/Components/src/UIEventArgs.cs) are shown in the following table.
@@ -385,7 +387,9 @@ Supported [UIEventArgs](https://github.com/aspnet/AspNetCore/blob/release/3.0-pr
| Touch | `UITouchEventArgs` – `UITouchPoint` represents a single contact point on a touch-sensitive device. |
For information on the properties and event handling behavior of the events in the preceding table, see [EventArgs classes in the reference source](https://github.com/aspnet/AspNetCore/tree/release/3.0-preview8/src/Components/Web/src).
-
+
+### Lambda expressions
+
Lambda expressions can also be used:
```cshtml
@@ -465,7 +469,7 @@ Prefer the strongly typed `EventCallback` over `EventCallback`. `EventCallbac
## Capture references to components
-Component references provide a way to reference a component instance so that you can issue commands to that instance, such as `Show` or `Reset`. To capture a component reference, add a `@ref` attribute to the child component and then define a field with the same name and the same type as the child component.
+Component references provide a way to reference a component instance so that you can issue commands to that instance, such as `Show` or `Reset`. To capture a component reference, add a [@ref](xref:mvc/views/razor#ref) attribute to the child component and then define a field with the same name and the same type as the child component.
```cshtml
@@ -490,7 +494,7 @@ While capturing component references use a similar syntax to [capturing element
> [!NOTE]
> Do **not** use component references to mutate the state of child components. Instead, use normal declarative parameters to pass data to child components. Use of normal declarative parameters result in child components that rerender at the correct times automatically.
-## Use @key to control the preservation of elements and components
+## Use \@key to control the preservation of elements and components
When rendering a list of elements or components and the elements or components subsequently change, Blazor's diffing algorithm must decide which of the previous elements or components can be retained and how model objects should map to them. Normally, this process is automatic and can be ignored, but there are cases where you may want to control the process.
@@ -535,7 +539,7 @@ In some scenarios, use of `@key` minimizes the complexity of rerendering and avo
> [!IMPORTANT]
> Keys are local to each container element or component. Keys aren't compared globally across the document.
-### When to use @key
+### When to use \@key
Typically, it makes sense to use `@key` whenever a list is rendered (for example, in a `@foreach` block) and a suitable value exists to define the `@key`.
@@ -549,13 +553,13 @@ You can also use `@key` to prevent Blazor from preserving an element or componen
If `@currentPerson` changes, the `@key` attribute directive forces Blazor to discard the entire `
` and its descendants and rebuild the subtree within the UI with new elements and components. This can be useful if you need to guarantee that no UI state is preserved when `@currentPerson` changes.
-### When not to use @key
+### When not to use \@key
There's a performance cost when diffing with `@key`. The performance cost isn't large, but only specify `@key` if controlling the element or component preservation rules benefit the app.
Even if `@key` isn't used, Blazor preserves child element and component instances as much as possible. The only advantage to using `@key` is control over *how* model instances are mapped to the preserved component instances, instead of the diffing algorithm selecting the mapping.
-### What values to use for @key
+### What values to use for \@key
Generally, it makes sense to supply one of the following kinds of value for `@key`:
@@ -742,26 +746,7 @@ This is the Index page.
>
> Partially qualified names aren't supported. For example, adding `@using ComponentsSample` and referencing `NavMenu.razor` with `` isn't supported.
-## Razor support
-
-**Razor directives**
-
-Razor directives are shown in the following table.
-
-| Directive | Description |
-| --------- | ----------- |
-| [\@code](xref:mvc/views/razor#section-5) | Adds a C# code block to a component. `@code` is an alias of `@functions`. `@code` is recommended over `@functions`. More than one `@code` block is permissible. |
-| [\@functions](xref:mvc/views/razor#section-5) | Adds a C# code block to a component. Choose `@code` over `@functions` for C# code blocks. |
-| `@implements` | Implements an interface for the generated component class. |
-| [\@inherits](xref:mvc/views/razor#section-3) | Provides full control of the class that the component inherits. |
-| [\@inject](xref:mvc/views/razor#section-4) | Enables service injection from the [service container](xref:fundamentals/dependency-injection). For more information, see [Dependency injection into views](xref:mvc/views/dependency-injection). |
-| `@layout` | Specifies a layout component. Layout components are used to avoid code duplication and inconsistency. |
-| [\@page](xref:razor-pages/index#razor-pages) | Specifies that the component should handle requests directly. The `@page` directive can be specified with a route and optional parameters. Unlike Razor Pages, the `@page` directive doesn't need to be the first directive at the top of the file. For more information, see [Routing](xref:blazor/routing). |
-| [\@using](xref:mvc/views/razor#using) | Adds the C# `using` directive to the generated component class. This also brings all the components defined in that namespace into scope. |
-| [\@namespace](xref:mvc/views/razor#section-6) | Sets the namespace of the generated component class. |
-| [\@attribute](xref:mvc/views/razor#section-7) | Adds an attribute to the generated component class. |
-
-**Conditional HTML element attributes**
+## Conditional HTML element attributes
HTML element attributes are conditionally rendered based on the .NET value. If the value is `false` or `null`, the attribute isn't rendered. If the value is `true`, the attribute is rendered minimized.
@@ -788,9 +773,7 @@ If `IsCompleted` is `false`, the check box is rendered as:
```
-**Additional information on Razor**
-
-For more information on Razor, see the [Razor syntax reference](xref:mvc/views/razor).
+For more information, see .
## Raw HTML
diff --git a/aspnetcore/blazor/dependency-injection.md b/aspnetcore/blazor/dependency-injection.md
index 761b51318a..27ba6fe159 100644
--- a/aspnetcore/blazor/dependency-injection.md
+++ b/aspnetcore/blazor/dependency-injection.md
@@ -63,7 +63,7 @@ The DI system is based on the DI system in ASP.NET Core. For more information, s
## Request a service in a component
-After services are added to the service collection, inject the services into the components using the [\@inject](xref:mvc/views/razor#section-4) Razor directive. `@inject` has two parameters:
+After services are added to the service collection, inject the services into the components using the [\@inject](xref:mvc/views/razor#inject) Razor directive. `@inject` has two parameters:
* Type – The type of the service to inject.
* Property – The name of the property receiving the injected app service. The property doesn't require manual creation. The compiler creates the property.
diff --git a/aspnetcore/data/ef-mvc/read-related-data.md b/aspnetcore/data/ef-mvc/read-related-data.md
index 2bfe8446ed..5f91e0a645 100644
--- a/aspnetcore/data/ef-mvc/read-related-data.md
+++ b/aspnetcore/data/ef-mvc/read-related-data.md
@@ -183,7 +183,7 @@ You've made the following changes to the existing code:
}
```
-* Added a **Courses** column that displays courses taught by each instructor. See [Explicit Line Transition with `@:`](xref:mvc/views/razor#explicit-line-transition-with-) for more about this razor syntax.
+* Added a **Courses** column that displays courses taught by each instructor. For more information, see the [Explicit line transition with @:](xref:mvc/views/razor#explicit-line-transition-with-) section of the Razor syntax article.
* Added code that dynamically adds `class="success"` to the `tr` element of the selected instructor. This sets a background color for the selected row using a Bootstrap class.
diff --git a/aspnetcore/data/ef-rp/read-related-data.md b/aspnetcore/data/ef-rp/read-related-data.md
index a426bf8a35..e37b7ff958 100644
--- a/aspnetcore/data/ef-rp/read-related-data.md
+++ b/aspnetcore/data/ef-rp/read-related-data.md
@@ -211,7 +211,7 @@ The preceding markup makes the following changes:
}
```
-* Added a **Courses** column that displays courses taught by each instructor. See [Explicit Line Transition with `@:`](xref:mvc/views/razor#explicit-line-transition-with-) for more about this razor syntax.
+* Added a **Courses** column that displays courses taught by each instructor. See [Explicit line transition with `@:`](xref:mvc/views/razor#explicit-line-transition-with-) for more about this razor syntax.
* Added code that dynamically adds `class="success"` to the `tr` element of the selected instructor. This sets a background color for the selected row using a Bootstrap class.
diff --git a/aspnetcore/mvc/views/razor.md b/aspnetcore/mvc/views/razor.md
index 5890e86c3d..3ca32c42f9 100644
--- a/aspnetcore/mvc/views/razor.md
+++ b/aspnetcore/mvc/views/razor.md
@@ -3,14 +3,14 @@ title: Razor syntax reference for ASP.NET Core
author: rick-anderson
description: Learn about Razor markup syntax for embedding server-based code into webpages.
ms.author: riande
-ms.date: 06/12/2019
+ms.date: 08/05/2019
uid: mvc/views/razor
---
# Razor syntax reference for ASP.NET Core
By [Rick Anderson](https://twitter.com/RickAndMSFT), [Luke Latham](https://github.com/guardrex), [Taylor Mullen](https://twitter.com/ntaylormullen), and [Dan Vicarel](https://github.com/Rabadash8820)
-Razor is a markup syntax for embedding server-based code into webpages. The Razor syntax consists of Razor markup, C#, and HTML. Files containing Razor generally have a *.cshtml* file extension.
+Razor is a markup syntax for embedding server-based code into webpages. The Razor syntax consists of Razor markup, C#, and HTML. Files containing Razor generally have a *.cshtml* file extension. Razor is also found in [Razor components](xref:blazor/components) files (*.razor*).
## Rendering HTML
@@ -204,7 +204,7 @@ The default language in a code block is C#, but the Razor Page can transition ba
### Explicit delimited transition
-To define a subsection of a code block that should render HTML, surround the characters for rendering with the Razor **\** tag:
+To define a subsection of a code block that should render HTML, surround the characters for rendering with the Razor `` tag:
```cshtml
@for (var i = 0; i < people.Length; i++)
@@ -216,12 +216,12 @@ To define a subsection of a code block that should render HTML, surround the cha
Use this approach to render HTML that isn't surrounded by an HTML tag. Without an HTML or Razor tag, a Razor runtime error occurs.
-The **\** tag is useful to control whitespace when rendering content:
+The `` tag is useful to control whitespace when rendering content:
-* Only the content between the **\** tag is rendered.
-* No whitespace before or after the **\** tag appears in the HTML output.
+* Only the content between the `` tag is rendered.
+* No whitespace before or after the `` tag appears in the HTML output.
-### Explicit Line Transition with @:
+### Explicit line transition with \@:
To render the rest of an entire line as HTML inside a code block, use the `@:` syntax:
@@ -235,13 +235,13 @@ To render the rest of an entire line as HTML inside a code block, use the `@:` s
Without the `@:` in the code, a Razor runtime error is generated.
-Warning: Extra `@` characters in a Razor file can cause compiler errors at statements later in the block. These compiler errors can be difficult to understand because the actual error occurs before the reported error. This error is common after combining multiple implicit/explicit expressions into a single code block.
+Extra `@` characters in a Razor file can cause compiler errors at statements later in the block. These compiler errors can be difficult to understand because the actual error occurs before the reported error. This error is common after combining multiple implicit/explicit expressions into a single code block.
## Control structures
Control structures are an extension of code blocks. All aspects of code blocks (transitioning to markup, inline C#) also apply to the following structures:
-### Conditionals @if, else if, else, and @switch
+### Conditionals \@if, else if, else, and \@switch
`@if` controls when code runs:
@@ -286,7 +286,7 @@ The following markup shows how to use a switch statement:
}
```
-### Looping @for, @foreach, @while, and @do while
+### Looping \@for, \@foreach, \@while, and \@do while
Templated HTML can be rendered with looping control statements. To render a list of people:
@@ -352,30 +352,27 @@ The following looping statements are supported:
} while (i < people.Length);
```
-### Compound @using
+### Compound \@using
-In C#, a `using` statement is used to ensure an object is disposed. In Razor, the same mechanism is used to create HTML Helpers that contain additional content. In the following code, HTML Helpers render a form tag with the `@using` statement:
+In C#, a `using` statement is used to ensure an object is disposed. In Razor, the same mechanism is used to create HTML Helpers that contain additional content. In the following code, HTML Helpers render a `