ASP.NET Core and Razor Quiz

Murach's ASP.NET Core MVC (2nd Ed.) Chapter 2

• Objectives (part 1): Given specifications for a one-page MVC web app, students will write C# code for the model and controller, and HTML for the Razor view. Students will also run an ASP.NET Core MVC web app on their computer. Knowledge objectives include using Visual Studio to create an ASP.NET Core project and adding necessary folders/files for an MVC web app, listing six folders included in an MVC web app by convention, and describing how a controller and its action methods work.

Objectives (part 2)

• Data Transfer: Students will describe using the ViewBag property to transfer data from a controller to a view.
• Razor Elements: Students will differentiate between a Razor code block and a Razor expression.
• HTTP Pipeline: Students will describe how to configure the HTTP request and response pipeline for a simple ASP.NET Core MVC web app.
• Model/Controller Distinction: Students will differentiate between a model class and a controller class.
• Razor View Imports: Students will describe the purpose of a Razor view imports page.
• Strongly-Typed Views: Students will describe how to use the @model directive and asp-for tag helpers to create strongly-typed views.
• Form/Link helpers: Students will describe using asp-controller and asp-action tag helpers.

Objectives (part 3)

• HTTP GET/POST: Students will describe how the HttpGet and HttpPost attributes allow action methods to handle HTTP GET or POST requests.
• CSS Style Sheets: Students will describe the purpose of a CSS style sheet in an application.
• Razor Layout/View: Students will describe the differences between a Razor layout and a Razor view.
• Razor View Start: Students will describe the purpose of a Razor view start.
• Data Validation: Students will describe how ASP.NET Core MVC validates user-entered data.

Creating a New Project

• Steps: Select File → New → Project in Visual Studio, choose the appropriate template (e.g., Web App MVC), and click Next.

Configuring a New Project

• Steps: Provide a project name and location; edit solution name if needed. Use the resulting dialog to provide additional information and click Create.

Visual Studio Project Structure

• Folders: Visual Studio displays folders for the project, including wwwroot, Controllers, Models, and Views, among others.

Deleting Files from Template

• Steps: Delete files in the Controllers and Models folders and their contents; expand the Views folder, delete its content files but not the folder.

Adding Folders to the Empty Template

• Steps: Add the Controllers, Models, and Views folders; create Home and Shared folders within the Views folder.

Adding a Controller

• Steps: Right-click on Controllers folder, select Add → Controller. Choose "MVC Controller - Empty" from the New Scaffolded Item dialog. Provide name and click Add.

HomeController.cs File

• Content: Contains the controller with the Index() action method.

Adding a Razor View

• Steps: Right-click the Views/Home folder and select Add → View. Select “Razor View – Empty” and click Add. Name the view index and click Add.

The Home/Index.cshtml View

• Content: This file contains the markup for the view.

Program.cs File (Part 1)

• Content: Contains the code for configuring the container and HTTP pipeline.

Program.cs File (Part 2)

• Content: Specifies the routing and other configuration for the application.

Starting Button Drop-Down in Visual Studio

• Functionality: This button provides options such as selecting an appropriate web browser for testing.

Future Value App in Chrome

• Functionality: A demonstration of the Future Value web application running in the Chrome browser.

Error List Window in Visual Studio

• Purpose: This window lists any errors during development.

Adding a Class (Model)

• Steps: In Visual Studio, right-click the Models folder, select Add → Class. Provide a name and click Add.

FutureValueModel class

• Content: Contains properties (MonthlyInvestment, YearlyInterestRate, Years) and a CalculateFutureValue() method.

Adding a Razor View Imports Page

• Steps: In Visual Studio, right-click the Views folder and select Add → New Item. From the Installed/ASP.NET Core/Web category, choose Razor View Imports and click Add

The Views/_ViewImports.cshtml File

• Content: imports page for models and tag helpers.

Common Tag Helpers for Forms

• Explanation/Examples Tables display common HTML tags for forms.

Strongly-Typed Index View with Tag Helpers

• Explanation: Describes how these helpers work to generate strongly-typed templates.

Action Method (checks for invalid data)

• Explanation: This method checks the data validity using ModelState.IsValid

View with Validation Messages

• Functionality: Displays summary of validation messages

The Future Value App with Invalid Data

• Purpose: Example of an application with invalid user input data.

How to add a CSS stylesheet

• Steps: Right-click the wwwroot/css folder and choose. Add → New Item from the ASP.NET Core→Web category; then select “Style Sheet” and enter a name.

The site.css file

• Purpose/Content: The stylesheet file in the wwwroot/css folder stores CSS. This file contains CSS rules for the HTML elements in the Future Value application.

Add a Razor Layout

• Steps: Right-click Views/Shared folder, select Add → New Item in Visual Studio; from the ASP.NET Core→WEB category, choose Razor Layout item, and click Add.

Add a Razor View Start

• Steps: Right-click Views folder, choose Add → New Item in Visual Studio. Select Razor View Start in the ASP.NET Core → Web category and click Add.

The Views/Shared/_Layout.cshtml File

• Content: Specifies the layout for the views in the application. It includes elements like meta tags, page titles.

How to add a Razor view

• Steps: In Visual Studio, right-click Views/{subfolder} folder, select Add → View. Select a Razor View and provide desired details.

The Views/Home/Index.cshtml File (Part 2)

• Content: Contains the ASP.NET Core markup supporting form fields for the user’s inputs.

How to import the DataAnnotations namespace

• Instructions: Import this namespace.

A model property with a validation attribute (with sample)

• Description: Attributes like [Required] and [Range] in Model classes.

A model property with user-friendly error messages (with sample)

• Description: Custom error messages in validation attributes.

The Model Class with Data Validation Attributes

• Description: The structure of the future value model with attributes for data validation