Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
168 lines (99 sloc) 6.37 KB
title author description monikerRange ms.author ms.custom ms.date uid
Get started with Razor Components
guardrex
Learn how to get started with Razor Components by creating and modifying a Razor Components project.
>= aspnetcore-3.0
riande
mvc
02/03/2019
razor-components/get-started

Get started with Razor Components

By Daniel Roth and Luke Latham

Visual Studio

Prerequisites:

[!INCLUDE]

To create your first Razor Components project in Visual Studio:

  1. Select File > New Project > Web > ASP.NET Core Web Application.

  2. Make sure .NET Core and ASP.NET Core 3.0 are selected at the top.

  3. Choose the Razor Components template and select OK.

    New app dialog

  4. Press F5 to run the app.

Congratulations! You just ran your first Razor Components app!

.NET Core CLI

Prerequisites:

  1. To create your first Razor Components project from a command shell:

    dotnet new razorcomponents -o WebApplication1
    cd WebApplication1
    dotnet run
  2. In a browser, navigate to https://localhost:5001.

Congratulations! You just ran your first Razor Components app!


Razor Components project

The solution created by the Razor Components template contains two projects:

  • WebApplication1.Server – The server project is an ASP.NET Core project set up to host the Razor Components app.
  • WebApplication1.App – The client-side web UI project that uses Razor Components.

The UI logic in the WebApplication1.App project is separated from the rest of the app due to a technical limitation in ASP.NET Core 3.0 Preview 2. The Razor file extension (.cshtml) used for Razor Components is also used for Razor Pages and MVC views. Currently, Razor Components and Razor Pages/MVC have different compilation models, so the Razor Components Razor files are kept separate. In a future preview, we plan to introduce a new file extension for Razor Components (.razor). Components, pages, and views will be hosted in the same project.

When the app is run, multiple pages are available from tabs in the sidebar:

  • Home
  • Counter
  • Fetch data

On the Counter page, select the Click me button to increment the counter without a page refresh. Incrementing a counter in a webpage normally requires writing JavaScript, but Razor Components provides a better approach using C#.

WebApplication1.App/Pages/Counter.cshtml:

[!code-cshtml]

A request for /counter in the browser, as specified by the @page directive at the top, causes the Counter component to render its content. Components render into an in-memory representation of the render tree that can then be used to update the UI in a flexible and efficient way.

Each time the Click me button is selected:

  • The onclick event is fired.
  • The IncrementCount method is called.
  • The currentCount is incremented.
  • The component is rendered again.

The runtime compares the new content to the previous content and only applies the changed content to the Document Object Model (DOM).

Add a component to another component using an HTML-like syntax. Component parameters are specified using attributes or child content. For example, a Counter component can be added to the app's homepage by adding a <Counter /> element to the Index component.

WebApplication1.App/Pages/Index.cshtml:

[!code-cshtml]

Run the app. The homepage has its own counter.

To add a parameter to the Counter component, update the component's @functions block:

  • Add a property for IncrementAmount decorated with the [Parameter] attribute.
  • Change the IncrementCount method to use the IncrementAmount when increasing the value of currentCount.

WebApplication1.App/Pages/Counter.cshtml:

[!code-cshtml]

Specify an IncrementAmount parameter in the Home component's <Counter> element using an attribute.

WebApplication1.App/Pages/Index.cshtml:

[!code-cshtml]

Run the app. The homepage has its own counter that increments by ten each time the Click me button is selected.

Next steps

xref:tutorials/first-razor-components-app