Aspnetcore.docs: Create MS Learn module: Razor Pages Get Started

[wadepickett]

10 unit Microsoft Learn module with full app download and live app editing and hosting on Azure all from within a browser. No download of tools or anything else required.

Shows how to create a UI app using Razor Pages that consumes a web API as part of a larger MS Learn ASP.NET learning path.

Steps to completion:

• [x] Module planning and scoping
• [x] Create a proof-of-concept
• [x] Create module proposal
• [x] Gather feedback on module proposal and adjust as necessary, stakeholder sign off
• [x] Request module badge
• [x] Write the environment setup script (Cam & Scott)
• [x] Write the module + Code
• [x] Write knowledge check
• [x] Obtain stakeholder review/tests, approvals and publish

The proposal, currently in review:

Title: Create a web UI with ASP.NET Core Razor Pages
Abstract: Learn how to use ASP.NET Core Razor Pages to display and update data.
Target Audience: C# experience, no prior ASP.NET/ASP.NET Core experience.

Learning Objectives: By the end of this course, you will be able to:

• Quickly understand when to use Razor and what it is at an introductory level.
• Build environment (this is scripted to save the student time on irrelevant tasks) and give quick tour of existing API with curl.
  
  
  
  • git clone web API code (including DTO project using .NET Standard) (scripted)
  
  
  • Build & deploy API to Azure (scripted)
  
  
• Create a new Razor Pages project
  
  
  
  • Use dotnet new webapp -o RetailUi
  
  
• Add reference to DTO project
• Connect to a web API
  
  
  
  • Call RetailApi from the Get method in Pages/Index.cshtml.cs using IHttpClientFactory to render collection (e.g. All Products)
  
  
• Add UI support for CRUD operations
  
  
  
  • Render individual items (e.g., individual Product)
  
  
  • Update an existing Product
  
  
  • Create a new Product
  
  
  • Delete a Product
  
  
• Deploy & Test
  
  
  
  • "Deploy": git push to Azure, no setup needed (already taken care of when the environment is scripted)
  
  
  • Summary and knowledge check
  
  

Justification:
This beginner-level course focuses on building a data-driven web UI using ASP.NET Core. This is a critical component of a larger ASP.NET Core learning path using modules that link into existing Azure Developer modules.

Product(s):

• ASP.NET Core
• .NET Core

Prerequisites:

• A basic understanding of C#
• A basic understanding of HTML and HTTP verbs

Related Modules:

• Build a web API with ASP.NET Core
• Persisting and Retrieving Relational Data with Entity Framework Core (proposed, awaiting approval)

Technology Requirements:
We plan to build everything in the browser sandbox with Azure Cloud Shell. The following Azure services are needed:

• Azure App Service

SEO Terms:

• ASP.NET Core, Razor, web app, UI

[wadepickett]

This has been completed, reviewed by Scott and Cam thoroughly (thanks guys), and then handed off to the MS Learn PM for signoff. She is on vacation until 8/19 so may not have final word until then.

[wadepickett]

Published and closed:

Thanks for the great help Cam Soper and Scott Addie, thorough reviews and coding!
Thanks Tom Dykstra for your thorough review and help!
Thanks to Scott Hanselman, Dan Roth, Maria Naggaga Nakanwagi, Rowan Miller and Shayne Boyer for early outline and goal reviews for the .NET learning path.

Title: Create a web UI with ASP.NET Core
Link to published module: https://docs.microsoft.com/en-us/learn/modules/create-razor-pages-aspnet-core/

10 units.

Allows for live coding on the project and deployment all from within the browser. Version of project you updated live is downloadable in last unit. Provides an Azure experience and counts towards the PU goal for activation once the customer launches the app sample in the Azure sandbox.

This module app example consumes the web API created in the previous module in the MS Learn series for .NET: https://docs.microsoft.com/en-us/learn/modules/build-web-api-net-core/ that was created by Scott Addie and Cam Soper.

Covers:

• Understand when and why to use Razor Pages for your ASP.NET Core application.
• Use the .NET Core CLI to create a new Razor page and its paired C# PageModel class file.
• Complete the projects Create, Read Update and Delete (CRUD) operations by adding a Create form using Razor syntax.
• Add built-in client-side form input validation using Razor's Input Tag Helper.
• Add built-in server-side model validation using Data Annotations.
• Add a reference to a Data Transfer Object (DTO).
• Consume a RESTful service from your PageModel.
• Walk through the life cycle of an example HTTP request.
• Deploy & Test.