-
Notifications
You must be signed in to change notification settings - Fork 25.1k
Get started tutorial updates #35786
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Get started tutorial updates #35786
Changes from 9 commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
c711a8d
Get started tutorial updates
guardrex b830d4c
Updates
guardrex 8be99a7
Updates
guardrex f08a2d1
Update .openpublishing.redirection.json
guardrex d312838
Updates
guardrex e42c294
Merge branch 'guardrex/get-started-tutorial' of https://github.com/do…
guardrex d21f9f6
Updates
guardrex 058a1d0
Updates
guardrex fea6f73
Updates
guardrex 1f8a432
Updates
guardrex 120559e
Updates
guardrex 274c3b6
Updates
guardrex 489ef20
Update aspnetcore/get-started.md
guardrex File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,262 @@ | ||
| --- | ||
| title: Get started with ASP.NET Core | ||
| author: tdykstra | ||
| description: A short tutorial using the .NET CLI to create and run a basic Hello World app using ASP.NET Core Blazor. | ||
| monikerRange: ">= aspnetcore-3.1" | ||
| ms.author: tdykstra | ||
| ms.custom: mvc | ||
| ms.date: 07/22/2025 | ||
guardrex marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
guardrex marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| uid: get-started | ||
| --- | ||
| # Get started with ASP.NET Core | ||
|
|
||
| [!INCLUDE[](~/includes/not-latest-version.md)] | ||
|
|
||
| :::moniker range=">= aspnetcore-8.0" | ||
|
|
||
| This tutorial shows how to create, run, and modify an ASP.NET Core Blazor Web App using the .NET CLI. | ||
tdykstra marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| You'll learn how to: | ||
|
|
||
| > [!div class="checklist"] | ||
| > * Create a Blazor Web App. | ||
| > * Run the app. | ||
| > * Change the app. | ||
| > * Shut the app down. | ||
|
|
||
| ## Prerequisites | ||
guardrex marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| Obtain and install the latest .NET SDK at [Download .NET](https://dotnet.microsoft.com/download/dotnet). | ||
|
|
||
| ## Create a Blazor Web App | ||
|
|
||
| Open a command shell to a suitable location for the sample app and use the following command to create a Blazor Web App. The `-o|--output` option creates a folder for the project and names the project `BlazorSample`: | ||
|
|
||
| ```dotnetcli | ||
| dotnet new blazor -o BlazorSample | ||
| ``` | ||
|
|
||
| ## Run the app | ||
|
|
||
| Change the directory to the `BlazorSample` folder with the following command: | ||
|
|
||
| ```dotnetcli | ||
| cd BlazorSample | ||
| ``` | ||
|
|
||
| The `dotnet watch` command runs the app and opens your default browser to the app's landing page: | ||
|
|
||
| ```dotnetcli | ||
| dotnet watch | ||
| ``` | ||
|
|
||
| :::image source="get-started/static/blazor-web-app-running.png" alt-text="Blazor Web App running in Microsoft Edge with the homepage rendered in the UI."::: | ||
|
|
||
| Using the app's sidebar navigation, visit the Counter page, where you can select the **:::no-loc text="Click me":::** button to increment the counter. | ||
|
|
||
| :::image source="get-started/static/blazor-web-app-counter-page-incremented-to-one.png" alt-text="Counter page rendered after the 'Click me' button is selected once, showing the counter incremented to a value of one."::: | ||
|
|
||
| ## Change the app | ||
|
|
||
| Leave the browser open with the Counter page loaded. By using the `dotnet watch` command to run the app, you can make changes to the app's markup and code without having to rebuild the app to reflect the changes in the browser. | ||
|
|
||
| The `Counter` Razor component that renders the Counter web page is located at `Components/Pages/Counter.razor` in the project. | ||
|
|
||
| Open the `Counter.razor` file in a text editor and note a few interesting lines that render content and make the component's counter feature work. | ||
tdykstra marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| `Components/Pages/Counter.razor`: | ||
|
|
||
| ```razor | ||
| @page "/counter" | ||
|
|
||
| <PageTitle>Counter</PageTitle> | ||
|
|
||
| <h1>Counter</h1> | ||
|
|
||
| <p role="status">Current count: @currentCount</p> | ||
|
|
||
| <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> | ||
|
|
||
| @code { | ||
| private int currentCount = 0; | ||
|
|
||
| private void IncrementCount() | ||
| { | ||
| currentCount++; | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| The file starts with a line that indicates the component's relative path (`/counter`): | ||
|
|
||
| ```razor | ||
| @page "/counter" | ||
| ``` | ||
|
|
||
| The title of the page is set by `<PageTitle>` tags: | ||
|
|
||
| ```razor | ||
| <PageTitle>Counter</PageTitle> | ||
| ``` | ||
|
|
||
| An H1 heading is displayed to the user: | ||
guardrex marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| ```razor | ||
| <h1>Counter</h1> | ||
| ``` | ||
|
|
||
| A paragraph element (`<p>`) displays the current count, which is stored in a variable named `currentCount`: | ||
|
|
||
| ```razor | ||
| <p role="status">Current count: @currentCount</p> | ||
| ``` | ||
|
|
||
| A button (`<button>`) allows the user to increment the counter, which occurs when a button click executes a C# method named `IncrementCount`: | ||
|
|
||
| ```razor | ||
| <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> | ||
| ``` | ||
|
|
||
| C# code is present in the `@code` block: | ||
|
|
||
| ```razor | ||
| @code { | ||
| ... | ||
| } | ||
| ``` | ||
|
|
||
| Within the `@code` block: | ||
guardrex marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| * The counter variable `currentCount` is established with an initial value of zero. | ||
| * The `IncrementCount` method is defined. The code within the method increments the `currentCount` variable by one each time the method is invoked. | ||
|
|
||
| ```csharp | ||
| private int currentCount = 0; | ||
|
|
||
| private void IncrementCount() | ||
| { | ||
| currentCount++; | ||
| } | ||
| ``` | ||
|
|
||
| Let's change the increment of the counter in the `IncrementCount` method. | ||
|
|
||
| Change the line so that `currentCount` is incremented by a value of ten each time `IncrementCount` is called: | ||
|
|
||
| ```diff | ||
| - currentCount++; | ||
| + currentCount += 10; | ||
| ``` | ||
|
|
||
| Save the file. | ||
|
|
||
| As soon as you save the file, the running app is updated automatically because you used the `dotnet watch` command. Go back to the app in the browser and select the **:::no-loc text="Click me":::** button in the Counter page. Witness how the counter now increments from its existing value of one to a value of eleven. Each time the button is selected the value increments by ten. | ||
|
|
||
| :::image source="get-started/static/blazor-web-app-counter-page-incremented-to-eleven.png" alt-text="Counter page rendered after the 'Click me' button is selected once, showing the counter incremented to a value of eleven."::: | ||
|
|
||
| ## Shut the app down | ||
|
|
||
| To shut down the app: | ||
|
|
||
| * Close the browser window. | ||
| * Press <kbd>Ctrl</kbd>+<kbd>C</kbd> in the command shell. | ||
guardrex marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| *Congratulations!* You've successfully completed this tutorial. | ||
|
|
||
| ## Next steps | ||
|
|
||
| In this tutorial, you learned how to: | ||
|
|
||
| > [!div class="checklist"] | ||
| > * Create a Blazor Web App. | ||
| > * Run the app. | ||
| > * Change the app. | ||
| > * Shut the app down. | ||
|
|
||
| :::moniker-end | ||
|
|
||
| :::moniker range="< aspnetcore-8.0" | ||
|
|
||
| This tutorial shows how to create and run an ASP.NET Core web app using the .NET CLI. | ||
|
|
||
| For Blazor tutorials, see <xref:blazor/tutorials/index>. | ||
|
|
||
| You'll learn how to: | ||
|
|
||
| > [!div class="checklist"] | ||
| > * Create a Razor Pages app. | ||
| > * Run the app. | ||
| > * Change the app. | ||
| > * Shut the app down. | ||
|
|
||
| ## Prerequisites | ||
|
|
||
| Obtain and install the latest .NET SDK at [Download .NET](https://dotnet.microsoft.com/download/dotnet). | ||
|
|
||
| ## Create Razor Pages app | ||
|
|
||
| Open a command shell to a suitable location for the sample app and use the following command to create a Razor Pages app. The `-o|--output` option creates a folder for the project and names the project `RazorPagesSample`: | ||
|
|
||
| ```dotnetcli | ||
| dotnet new webapp -o RazorPagesSample | ||
| ``` | ||
|
|
||
| ## Run the app | ||
|
|
||
| Change the directory to the `RazorPagesSample` folder with the following command: | ||
|
|
||
| ```dotnetcli | ||
| cd RazorPagesSample | ||
| ``` | ||
|
|
||
| The `dotnet watch` command runs the app and opens your default browser to the app's landing page: | ||
|
|
||
| ```dotnetcli | ||
| dotnet watch | ||
| ``` | ||
|
|
||
| :::image source="get-started/static/razor-pages-app-running.png" alt-text="Web app home page"::: | ||
|
|
||
| ## Change the app | ||
|
|
||
| Open the `Pages/Index.cshtml` file in a text editor. | ||
|
|
||
| After the line with the ":::no-loc text="Welcome":::" greeting, add the following line to display the local system date and time: | ||
|
|
||
| ```cshtml | ||
| <p>The time on the server is @DateTime.Now</p> | ||
| ``` | ||
|
|
||
| Save the changes. | ||
|
|
||
| As soon as you save the file, the running app is updated automatically because you used the `dotnet watch` command. | ||
|
|
||
| Refresh the page in the browser to see the result: | ||
|
|
||
| :::image source="get-started/static/razor-pages-app-date-time-display.png" alt-text="Web app home page showing the change that was made."::: | ||
|
|
||
| ## Shut the app down | ||
|
|
||
| To shut down the app: | ||
|
|
||
| * Close the browser window. | ||
| * Press <kbd>Ctrl</kbd>+<kbd>C</kbd> in the command shell. | ||
|
|
||
| *Congratulations!* You've successfully completed this tutorial. | ||
|
|
||
| ## Next steps | ||
|
|
||
| In this tutorial, you learned how to: | ||
|
|
||
| > [!div class="checklist"] | ||
| > * Create a Razor Pages app. | ||
| > * Run the app. | ||
| > * Change the app. | ||
| > * Shut the app down. | ||
|
|
||
| :::moniker-end | ||
|
|
||
| To learn more about ASP.NET Core, see the following: | ||
|
|
||
| > [!div class="nextstepaction"] | ||
| > <xref:index#recommended-learning-path> | ||
Binary file added
BIN
+41.4 KB
...etcore/get-started/static/blazor-web-app-counter-page-incremented-to-eleven.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+41.3 KB
aspnetcore/get-started/static/blazor-web-app-counter-page-incremented-to-one.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.