Download asp net components

The CaptureUnmatchedValues property on [Parameter] allows the parameter to match all attributes that don't match any other parameter.

A component can only define a single parameter with CaptureUnmatchedValues. The position of attributes relative to the position of element attributes is important. When attributes are splatted on the element, the attributes are processed from right to left last to first. Consider the following example of a parent component that consumes a child component:.

The AttributeOrderChild1 component's extra attribute is set to the right of attributes. Component references provide a way to reference a component instance for issuing commands. To capture a component reference:. When the component is rendered, the field is populated with the component instance. You can then invoke. NET methods on the instance. Consider the following ReferenceChild component that logs a message when its ChildMethod is called.

A component reference is only populated after the component is rendered and its output includes ReferenceChild 's element. Until the component is rendered, there's nothing to reference. To use a reference variable with an event handler, use a lambda expression or assign the event handler delegate in the OnAfterRender or OnAfterRenderAsync methods. This ensures that the reference variable is assigned before the event handler is assigned.

While capturing component references use a similar syntax to capturing element references , capturing component references isn't a JavaScript interop feature.

Component references aren't passed to JavaScript code. Component references are only used in. NET code. Do not use component references to mutate the state of child components. Instead, use normal declarative component parameters to pass data to child components. Use of component parameters result in child components that rerender at the correct times automatically.

For more information, see the component parameters section and the ASP. NET Core Blazor data binding article. Blazor uses a synchronization context SynchronizationContext to enforce a single logical thread of execution. A component's lifecycle methods and event callbacks raised by Blazor are executed on the synchronization context.

Blazor Server's synchronization context attempts to emulate a single-threaded environment so that it closely matches the WebAssembly model in the browser, which is single threaded. At any given point in time, work is performed on exactly one thread, which yields the impression of a single logical thread. No two operations execute concurrently. Generally, don't call the following methods in components. The following methods block the execution thread and thus block the app from resuming work until the underlying Task is complete:.

Blazor documentation examples that use the thread-blocking methods mentioned in this section are only using the methods for demonstration purposes, not as recommended coding guidance. For example, a few component code demonstrations simulate a long-running process by calling Thread. In the event a component must be updated based on an external event, such as a timer or other notification, use the InvokeAsync method, which dispatches code execution to Blazor's synchronization context.

For example, consider the following notifier service that can notify any listening component about updated state. The Update method can be called from anywhere in the app. When rendering a list of elements or components and the elements or components subsequently change, Blazor 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. In the following People component, each iteration of adding a person in OnTimerCallback results in Blazor rebuilding the entire collection. Shifting the focus away from what the user selected isn't desirable behavior. After demonstrating the poor behavior with the following component, the key directive attribute is used to improve the user's experience.

The contents of the people collection changes with inserted, deleted, or re-ordered entries. Rerendering can lead to visible behavior differences.

Each time a person is inserted into the people collection, the preceding element of the currently focused element receives the focus. The user's focus is lost. The mapping process of elements or components to a collection can be controlled with the key directive attribute.

Use of key guarantees the preservation of elements or components based on the key's value. If the Details component in the preceding example is keyed on the person item, Blazor ignores rerendering Details components that haven't changed. When the people collection changes, the association between Details instances and person instances is retained.

When a Person is inserted at the beginning of the collection, one new Details instance is inserted at that corresponding position. Other instances are left unchanged. Therefore, the user's focus isn't lost as people are added to the collection. Other collection updates exhibit the same behavior when the key directive attribute is used:.

Keys are local to each container element or component. Keys aren't compared globally across the document. 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.

You can also use key to preserve an element or component subtree when an object doesn't change, as the following examples show. If an person instance changes, the key attribute directive forces Blazor to:.

This is useful to guarantee that no UI state is preserved when the collection changes within a subtree. The key attribute directive is scoped to its own siblings within its parent.

Consider the following example. The following example demonstrates first and second keys in their own scopes, unrelated to each other and without influence on each other.

For the Details component shown earlier, the following examples render person data within the same key scope and demonstrate typical use cases for key :.

Therefore, person data for each member of the people collection is not keyed on each person instance across the rendered Details components. Avoid the following patterns when using key :. There's a performance cost when rendering with key. The performance cost isn't large, but only specify key if preserving the element or component benefits 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 Blazor selecting the mapping. Generally, it makes sense to supply one of the following values for key :. Ensure that values used for key don't clash. If clashing values are detected within the same parent element, Blazor throws an exception because it can't deterministically map old elements or components to new elements or components.

Only use distinct values, such as object instances or primary key values. Attributes can be applied to components with the attribute directive. The following example applies the [Authorize] attribute to the component's class:. HTML element attribute properties are conditionally set based on the.

NET value. If the value is false or null , the property isn't set. If the value is true , the property is set. Some HTML attributes, such as aria-pressed , don't function properly when the.

NET type is a bool. In those cases, use a string type instead of a bool. Strings are normally rendered using DOM text nodes, which means that any markup they may contain is ignored and treated as literal text. Rendering raw HTML constructed from any untrusted source is a security risk and should always be avoided.

The following example shows using the MarkupString type to add a block of static HTML content to the rendered output of a component. Render fragments can be defined using Razor template syntax to define a UI snippet. Razor templates use the following format:. Render fragments can also be passed as arguments to templated components. Blazor follows the convention of ASP. NET Core apps for static assets. Static assets are located in the project's web root wwwroot folder or folders under the wwwroot folder.

In the following example, logo. For information on setting an app's base path, see Host and deploy ASP. NET Core Blazor. Tag Helpers aren't supported in components. To provide Tag Helper-like functionality in Blazor, create a component with the same functionality as the Tag Helper and use the component instead. Unless the preservewhitespace directive is used with a value of true , extra whitespace is removed by default if:.

Whitespace removal might affect the rendered output when using a CSS rule, such as white-space: pre. To disable this performance optimization and preserve the whitespace, take one of the following actions:.

Release notes Latest release date October 12, Full version 6. Release notes Latest release date September 14, These releases are generally not supported for production use. Release notes Latest release date August 10, Release notes Latest release date July 14, Release notes Latest release date June 17, Release notes Latest release date May 25, Release notes Latest release date April 8, Release notes Latest release date March 11, Release notes Latest release date February 17, Follow us.

Package manager instructions. Arm64 x Arm64 x64 x Hosting Bundle x64 x You can specify a different view name when creating the view component result or when calling the View method. We recommend you name the view file Default. To customize the view search path, modify Razor's ViewLocationFormats collection. The parameters will be passed to the InvokeAsync method.

In the following, the InvokeAsync method is called with two parameters:. For ASP. NET Core 1. Pascal-cased class and method parameters for Tag Helpers are translated into their kebab case. The view component is specified as follows:. To use a view component as a Tag Helper, register the assembly containing the view component using the addTagHelper directive.

You can register a view component as a Tag Helper to any file that references the view component. In the sample above, the PriorityList view component becomes priority-list. The parameters to the view component are passed as attributes in kebab case. View components are typically invoked from a view, but you can invoke them directly from a controller method.

While view components don't define endpoints like controllers, you can easily implement a controller action that returns the content of a ViewComponentResult. Download , build and test the starter code. It's a simple project with a ToDo controller that displays a list of ToDo items.

Because the class name PriorityList ViewComponent ends with the suffix ViewComponent , the runtime will use the string "PriorityList" when referencing the class component from a view. I'll explain that in more detail later.

The [ViewComponent] attribute can change the name used to reference a view component. The [ViewComponent] attribute above tells the view component selector to use the name PriorityList when looking for the views associated with the component, and to use the string "PriorityList" when referencing the class component from a view.

The component uses dependency injection to make the data context available. InvokeAsync exposes a method which can be called from a view, and it can take an arbitrary number of arguments. This folder must be named Components. This folder name must match the name of the view component class, or the name of the class minus the suffix if we followed convention and used the ViewComponent suffix in the class name. If you used the ViewComponent attribute, the class name would need to match the attribute designation.

The Razor view takes a list of TodoItem and displays them. If the view component InvokeAsync method doesn't pass the name of the view as in our sample , Default is used for the view name by convention. Later in the tutorial, I'll show you how to pass the name of the view. The markup await Component. InvokeAsync shows the syntax for calling view components.