Skip to content

Commit e130104

Browse files
markjpricemarkjprice
committed
Add two items for tag helpers
1 parent a6d2bd2 commit e130104

File tree

3 files changed

+149
-4
lines changed

3 files changed

+149
-4
lines changed

‎docs/errata/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22

33
If you find any mistakes in the first edition, *Real-World Web Development with .NET 9*, or if you have suggestions for improvements, then please [raise an issue in this repository](https://github.com/markjprice/web-dev-net9/issues) or email me at markjprice (at) gmail.com.
44

5-
[**Errata** (25 items)](errata.md): Typos, tool user interface and behavior changes, or mistakes in code that would cause a compilation error that prevents a successful build.
5+
[**Errata** (26 items)](errata.md): Typos, tool user interface and behavior changes, or mistakes in code that would cause a compilation error that prevents a successful build.
66

7-
[**Improvements** (11 items)](improvements.md): Changes to text or code that would improve the content. These are optional.
7+
[**Improvements** (12 items)](improvements.md): Changes to text or code that would improve the content. These are optional.
88

99
[**Common Mistakes** (7 items)](common-mistakes.md): These are some of the most common mistakes that a reader might encounter when trying to get code in book tasks to work, or when trying to write your own code.
1010

‎docs/errata/errata.md

+69-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
**Errata** (25 items)
1+
**Errata** (26 items)
22

33
If you find any mistakes, then please [raise an issue in this repository](https://github.com/markjprice/web-dev-net9/issues) or email me at markjprice (at) gmail.com.
44

@@ -12,6 +12,7 @@ If you find any mistakes, then please [raise an issue in this repository](https:
1212
- [Page 117 - Displaying Northwind suppliers](#page-117---displaying-northwind-suppliers)
1313
- [Page 118 - Inserting, updating, and deleting suppliers](#page-118---inserting-updating-and-deleting-suppliers)
1414
- [Page 143 - Comparing HTML Helpers and Tag Helpers](#page-143---comparing-html-helpers-and-tag-helpers)
15+
- [Page x - Exploring Forms-related Tag Helpers](#page-x---exploring-forms-related-tag-helpers)
1516
- [Page 158 - Localizing your user interface](#page-158---localizing-your-user-interface)
1617
- [Page 159 - If you are using Visual Studio](#page-159---if-you-are-using-visual-studio)
1718
- [Page 161 - If you are using VS Code](#page-161---if-you-are-using-vs-code)
@@ -174,6 +175,73 @@ But the controller name is `Home`, not `Index`, so the markup should be:
174175
action: "Privacy", controller: "Home")
175176
```
176177
178+
# Page x - Exploring Forms-related Tag Helpers
179+
180+
> Thanks to a reader who emailed a question about this issue to Packt.
181+
182+
In Step 1, I told the reader to enter markup for two forms. The second form uses the Label Tag Helper, but the `<label>` elements I used were self-closing, as shown in the following markup:
183+
```html
184+
<label asp-for="ShipperId" class="form-label" />
185+
```
186+
187+
Self-closing tagas are not supported by the Label Tag Helper. You must use full open and close tags, as shown in the following markup:
188+
```html
189+
<label asp-for="ShipperId" class="form-label"></label>
190+
```
191+
192+
The complete form is shown in the following markup:
193+
```html
194+
<h2>With Form Tag Helper</h2>
195+
<form asp-controller="Home" asp-action="ProcessShipper"
196+
class="form-horizontal" role="form">
197+
<div>
198+
<div class="mb-3">
199+
<label asp-for="ShipperId" class="form-label"></label>
200+
<input asp-for="ShipperId" class="form-control">
201+
</div>
202+
<div class="mb-3">
203+
<label asp-for="CompanyName" class="form-label"></label>
204+
<input asp-for="CompanyName" class="form-control">
205+
</div>
206+
<div class="mb-3">
207+
<label asp-for="Phone" class="form-label"></label>
208+
<input asp-for="Phone" class="form-control">
209+
</div>
210+
<div class="mb-3">
211+
<input type="submit" class="form-control">
212+
</div>
213+
</div>
214+
</form>
215+
```
216+
217+
Also, the Label Tag Helper will use the property names from the model as the labels in the form, so it will use **ShipperId** and **CompanyName** by default. To override these, in the `Northwind.EntityModels` project, in the `Shipper.cs` class, you can decorate the properties with the `[Display]` attribute, as shown in the following code:
218+
```cs
219+
using System;
220+
using System.Collections.Generic;
221+
using System.ComponentModel.DataAnnotations;
222+
using System.ComponentModel.DataAnnotations.Schema;
223+
using Microsoft.EntityFrameworkCore;
224+
225+
namespace Northwind.EntityModels;
226+
227+
public partial class Shipper
228+
{
229+
[Key]
230+
[Display(Name = "Shipper ID")] // Used by the Label Tag Helper.
231+
public int ShipperId { get; set; }
232+
233+
[StringLength(40)]
234+
[Display(Name = "Company Name")] // Used by the Label Tag Helper.
235+
public string CompanyName { get; set; } = null!;
236+
237+
[StringLength(24)]
238+
public string? Phone { get; set; }
239+
240+
[InverseProperty("ShipViaNavigation")]
241+
public virtual ICollection<Order> Orders { get; set; } = new List<Order>();
242+
}
243+
```
244+
177245
# Page 158 - Localizing your user interface
178246
179247
> Thanks to [P9avel](https://github.com/P9avel) for raising [this issue on January 5, 2025](https://github.com/markjprice/web-dev-net9/issues/15).

‎docs/errata/improvements.md

+78-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
**Improvements** (11 items)
1+
**Improvements** (12 items)
22

33
If you have suggestions for improvements, then please [raise an issue in this repository](https://github.com/markjprice/web-dev-net9/issues) or email me at markjprice (at) gmail.com.
44

@@ -7,6 +7,12 @@ If you have suggestions for improvements, then please [raise an issue in this re
77
- [Page 36 - Creating a class library for a database context](#page-36---creating-a-class-library-for-a-database-context)
88
- [Page 49 - Setting up an ASP.NET Core MVC website, Page 69 - Controllers and actions](#page-49---setting-up-an-aspnet-core-mvc-website-page-69---controllers-and-actions)
99
- [Page x - Using entity and view models](#page-x---using-entity-and-view-models)
10+
- [Page 153 - Exploring the Environment Tag Helper](#page-153---exploring-the-environment-tag-helper)
11+
- [Static Files Not Being Served in Production](#static-files-not-being-served-in-production)
12+
- [Bundling and Minification Issues](#bundling-and-minification-issues)
13+
- [Check If Your Static Files Are Published Correctly](#check-if-your-static-files-are-published-correctly)
14+
- [Confirm Environment Settings in `_ViewImports.cshtml`](#confirm-environment-settings-in-_viewimportscshtml)
15+
- [Enable Developer Exception Page for Debugging](#enable-developer-exception-page-for-debugging)
1016
- [Chapter 7 - Page navigation and title verification](#chapter-7---page-navigation-and-title-verification)
1117
- [Chapter 13 - Installing Umbraco CMS](#chapter-13---installing-umbraco-cms)
1218
- [Page 381 - Configuring the customer repository and Web API controller](#page-381---configuring-the-customer-repository-and-web-api-controller)
@@ -71,6 +77,77 @@ record Module(string ModuleName, [other serializable properties]);
7177
record User(string UserName, List<Module> UserModules, [other serializable properties])
7278
```
7379

80+
# Page 153 - Exploring the Environment Tag Helper
81+
82+
A reader emailed Packt, "In the `Properties` folder, in `launchSettings.json`, for the `https` profile, change the environment setting to `Production`, as shown highlighted in the following JSON: `"https": { ... "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Production" } },` When I do the above the bootstrap formatting goes away. How do I correct this?"
83+
84+
When you change the `ASPNETCORE_ENVIRONMENT` to `Production`, the behavior of your application changes in a few important ways that could affect Bootstrap formatting. Let's review them one-by-one to troubleshoot your issue.
85+
86+
## Static Files Not Being Served in Production
87+
88+
By default, in ASP.NET Core, static files (like CSS and JavaScript) are not automatically served in production unless explicitly enabled. You should make sure that you have static file middleware enabled in your `Program.cs`:
89+
```cs
90+
// .NET 9 or later.
91+
app.MapStaticAssets();
92+
93+
// .NET 8 or earlier.
94+
app.UseStaticFiles();
95+
```
96+
97+
If one of these is missing, Bootstrap and other front-end assets may not load in production mode.
98+
99+
## Bundling and Minification Issues
100+
101+
In development mode, ASP.NET Core may serve unminified CSS and JavaScript files. However, in production, it may try to serve minified versions (e.g., `bootstrap.min.css` instead of `bootstrap.css`). If those files are missing or not correctly referenced, formatting will break. Ensure your `_Layout.cshtml` (or equivalent view file) includes Bootstrap correctly, as shown in the following markup:
102+
```html
103+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-whatever" crossorigin="anonymous">
104+
```
105+
Or, if using a local version:
106+
```html
107+
<link rel="stylesheet" href="~/css/bootstrap.min.css" asp-append-version="true">
108+
```
109+
110+
If you're using ASP.NET Core’s built-in bundling/minification, check if Bootstrap’s CSS is included in the right bundle.
111+
112+
## Check If Your Static Files Are Published Correctly
113+
114+
When running in Production, ASP.NET Core expects files to be published before deployment. Run the following command in your terminal:
115+
```shell
116+
dotnet publish -c Release
117+
```
118+
This ensures all static files are included in the published output. Navigate to the `publish/wwwroot/` folder and confirm that Bootstrap’s CSS is there.
119+
120+
## Confirm Environment Settings in `_ViewImports.cshtml`
121+
122+
In some cases, Razor views have conditional rendering based on environment settings. Open `_ViewImports.cshtml` or `_Layout.cshtml` and check if there’s anything like:
123+
```csharp
124+
@if (Env.IsDevelopment())
125+
{
126+
<link rel="stylesheet" href="~/css/bootstrap.css" />
127+
}
128+
```
129+
This would prevent Bootstrap from loading in production. Instead, explicitly include the correct Bootstrap file.
130+
131+
## Enable Developer Exception Page for Debugging
132+
133+
Try running your app with detailed errors enabled to see if there are any errors preventing Bootstrap from loading. Modify `appsettings.Production.json`:
134+
```json
135+
{
136+
"Logging": {
137+
"LogLevel": {
138+
"Default": "Debug",
139+
"Microsoft.AspNetCore": "Debug"
140+
}
141+
}
142+
}
143+
```
144+
Then run:
145+
```shell
146+
dotnet run --environment Production
147+
```
148+
149+
Check the browser’s developer console (*F12*) for any 404 errors related to CSS files.
150+
74151
# Chapter 7 - Page navigation and title verification
75152

76153
A reader emailed Packt, "I’m having trouble with chapter 7. The command “pwsh” is not recognized. Have not had any luck googling solutions."

0 commit comments

Comments
 (0)