daohualiuxiang
/
AspNetCore.Docs
mirror of https://github.com/dotnet/AspNetCore.Docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
AspNetCore.Docs/aspnetcore/blazor/get-started.md

6.9 KiB
Raw Blame History

title author description monikerRange ms.author ms.custom ms.date uid
Get started with Blazor guardrex Get started with Blazor by building a Blazor app with the tooling of your choice. >= aspnetcore-3.0 riande mvc 06/05/2019 blazor/get-started

Get started with Blazor

By Daniel Roth and Luke Latham

Get started with Blazor:

  1. Install the latest .NET Core 3.0 Preview SDK release.

  2. Install the Blazor templates by running the following command in a command shell:

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview5-19227-01

  3. Follow the guidance for your choice of tooling:

    Visual Studio

    1. Install the latest Visual Studio preview with the ASP.NET and web development workload.

    2. Install the latest Blazor extension from the Visual Studio Marketplace. This step makes Blazor templates available to Visual Studio.

    3. Create a new project.

    4. Select ASP.NET Core Web Application. Select Next.

    5. Provide a project name in the Project name field or accept the default project name. Confirm the Location entry is correct or provide a location for the project. Select Create.

    6. In the Create a new ASP.NET Core Web Application dialog, confirm that .NET Core and ASP.NET Core 3.0 are selected.

    7. For a Blazor client-side experience, choose the Blazor (client-side) template. For a Blazor server-side experience, choose the Blazor (server-side) template. Select Create. For information on the two Blazor hosting models, server-side and client-side, see xref:blazor/hosting-models.

    8. Press F5 to run the app.

    Visual Studio Code

    1. Install Visual Studio Code.

    2. Install the latest C# for Visual Studio Code extension.

    3. For a Blazor client-side experience, execute the following command from a command shell:

    dotnet new blazor -o WebApplication1

    For a Blazor server-side experience, execute the following command from a command shell:

    dotnet new blazorserverside -o WebApplication1

    For information on the two Blazor hosting models, server-side and client-side, see xref:blazor/hosting-models.

    4. Open the WebApplication1 folder in Visual Studio Code.

    5. For a Blazor server-side project, the IDE requests that you add assets to build and debug the project. Select Yes.

    6. If using a Blazor server-side app, run the app using the Visual Studio Code debugger. If using a Blazor client-side app, execute dotnet run from the app's project folder.

    .NET Core CLI

    For a Blazor client-side experience, execute the following commands from a command shell:

    dotnet new blazor -o WebApplication1
cd WebApplication1
dotnet run

    For a Blazor server-side experience, execute the following commands from a command shell:

    dotnet new blazorserverside -o WebApplication1
cd WebApplication1
dotnet run

    For information on the two Blazor hosting models, server-side and client-side, see xref:blazor/hosting-models.

In a browser, navigate to https://localhost:5001.

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 provide a better approach using C#.

Pages/Counter.razor:

[!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 HTML syntax. For example, a Counter component can be added to the app's homepage by adding a <Counter /> element to the Index component.

Pages/Index.razor:

[!code-cshtml]

Run the app. The homepage has its own counter provided by the Counter component.

Component parameters are specified using attributes or child content, which allow you to set properties on the child component. To add a parameter to the Counter component, update the component's @functions block:

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

Pages/Counter.razor:

[!code-cshtml]

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

Pages/Index.razor:

[!code-cshtml]

Run the app. The Index component has its own counter that increments by ten each time the Click me button is selected. The Counter component (Counter.razor) at /counter continues to increment by one.

Next steps

xref:tutorials/first-blazor-app

Additional resources