Skip to content

Commit cfe8778

Browse files
guardrexguardrex
authored
Blazor glob/loc aritcle updates (#34338)
1 parent d7ce18b commit cfe8778

File tree

1 file changed

+92
-81
lines changed

1 file changed

+92
-81
lines changed

‎aspnetcore/blazor/globalization-localization.md‎

Lines changed: 92 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1075,9 +1075,23 @@ The component adopts the following approaches to work for either SSR or CSR comp
10751075
}
10761076
```
10771077

1078+
In the `.Client` project's `_Imports` file (`_Imports.razor`), add the namespace for the components in the `Pages` folder, updating the namespace to match your `.Client` project's namespace:
1079+
1080+
```razor
1081+
@using BlazorSample.Client.Pages
1082+
```
1083+
10781084
> [!NOTE]
10791085
> For more information on <xref:Microsoft.JSInterop.IJSInProcessRuntime>, see <xref:blazor/js-interop/call-javascript-from-dotnet#invoke-javascript-functions-without-reading-a-returned-value-invokevoidasync>.
10801086
1087+
In the `.Client` project, add the `CultureSelector` component to the `MainLayout` component. Place the following markup inside the closing `</main>` tag in the `Layout/MainLayout.razor` file:
1088+
1089+
```razor
1090+
<article class="bottom-row px-4">
1091+
<CultureSelector @rendermode="InteractiveAuto" />
1092+
</article>
1093+
```
1094+
10811095
In the `.Client` project, place the following `CultureClient` component to study how globalization works for CSR components.
10821096

10831097
`Pages/CultureClient.razor`:
@@ -1133,6 +1147,83 @@ In the `.Client` project, place the following `CultureClient` component to study
11331147
}
11341148
```
11351149

1150+
In the `.Client` project, place the following `CultureServer` component to study how globalization works for SSR components.
1151+
1152+
`Pages/CultureServer.razor`:
1153+
1154+
```razor
1155+
@page "/culture-server"
1156+
@rendermode InteractiveServer
1157+
@using System.Globalization
1158+
1159+
<PageTitle>Culture Server</PageTitle>
1160+
1161+
<h1>Culture Server</h1>
1162+
1163+
<ul>
1164+
<li><b>CurrentCulture</b>: @CultureInfo.CurrentCulture</li>
1165+
<li><b>CurrentUICulture</b>: @CultureInfo.CurrentUICulture</li>
1166+
</ul>
1167+
1168+
<h2>Rendered values</h2>
1169+
1170+
<ul>
1171+
<li><b>Date</b>: @dt</li>
1172+
<li><b>Number</b>: @number.ToString("N2")</li>
1173+
</ul>
1174+
1175+
<h2><code>&lt;input&gt;</code> elements that don't set a <code>type</code></h2>
1176+
1177+
<p>
1178+
The following <code>&lt;input&gt;</code> elements use
1179+
<code>CultureInfo.CurrentCulture</code>.
1180+
</p>
1181+
1182+
<ul>
1183+
<li><label><b>Date:</b> <input @bind="dt" /></label></li>
1184+
<li><label><b>Number:</b> <input @bind="number" /></label></li>
1185+
</ul>
1186+
1187+
<h2><code>&lt;input&gt;</code> elements that set a <code>type</code></h2>
1188+
1189+
<p>
1190+
The following <code>&lt;input&gt;</code> elements use
1191+
<code>CultureInfo.InvariantCulture</code>.
1192+
</p>
1193+
1194+
<ul>
1195+
<li><label><b>Date:</b> <input type="date" @bind="dt" /></label></li>
1196+
<li><label><b>Number:</b> <input type="number" @bind="number" /></label></li>
1197+
</ul>
1198+
1199+
@code {
1200+
private DateTime dt = DateTime.Now;
1201+
private double number = 1999.69;
1202+
}
1203+
```
1204+
1205+
Use the `CultureExample1` component shown in the [Demonstration component](#demonstration-component) section to study how globalization works for a component that inherits the global Auto render mode. Add the `CultureExample1` component to the `.Client` project's `Pages` folder.
1206+
1207+
Add the `CultureClient`, `CultureServer`, and `CultureExample1` components to the sidebar navigation in `Layout/NavMenu.razor`:
1208+
1209+
```razor
1210+
<div class="nav-item px-3">
1211+
<NavLink class="nav-link" href="culture-server">
1212+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Culture (Server)
1213+
</NavLink>
1214+
</div>
1215+
<div class="nav-item px-3">
1216+
<NavLink class="nav-link" href="culture-client">
1217+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Culture (Client)
1218+
</NavLink>
1219+
</div>
1220+
<div class="nav-item px-3">
1221+
<NavLink class="nav-link" href="culture-example-1">
1222+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Culture (Auto)
1223+
</NavLink>
1224+
</div>
1225+
```
1226+
11361227
### Server project updates
11371228

11381229
Add the [`Microsoft.Extensions.Localization`](https://www.nuget.org/packages/Microsoft.Extensions.Localization) package to the server project.
@@ -1253,89 +1344,9 @@ public class CultureController : Controller
12531344
> [!WARNING]
12541345
> Use the <xref:Microsoft.AspNetCore.Mvc.ControllerBase.LocalRedirect%2A> action result, as shown in the preceding example, to prevent open redirect attacks. For more information, see <xref:security/preventing-open-redirects>.
12551346
1256-
Add the `CultureSelector` component to the `MainLayout` component. Place the following markup inside the closing `</main>` tag in the `Components/Layout/MainLayout.razor` file:
1257-
1258-
```razor
1259-
<article class="bottom-row px-4">
1260-
<CultureSelector @rendermode="InteractiveAuto" />
1261-
</article>
1262-
```
1263-
1264-
Use the `CultureExample1` component shown in the [Demonstration component](#demonstration-component) section to study how the preceding example works.
1265-
1266-
In the server project, place the following `CultureServer` component to study how globalization works for SSR components.
1267-
1268-
`Components/Pages/CultureServer.razor`:
1269-
1270-
```razor
1271-
@page "/culture-server"
1272-
@rendermode InteractiveServer
1273-
@using System.Globalization
1274-
1275-
<PageTitle>Culture Server</PageTitle>
1276-
1277-
<h1>Culture Server</h1>
1278-
1279-
<ul>
1280-
<li><b>CurrentCulture</b>: @CultureInfo.CurrentCulture</li>
1281-
<li><b>CurrentUICulture</b>: @CultureInfo.CurrentUICulture</li>
1282-
</ul>
1283-
1284-
<h2>Rendered values</h2>
1285-
1286-
<ul>
1287-
<li><b>Date</b>: @dt</li>
1288-
<li><b>Number</b>: @number.ToString("N2")</li>
1289-
</ul>
1290-
1291-
<h2><code>&lt;input&gt;</code> elements that don't set a <code>type</code></h2>
1292-
1293-
<p>
1294-
The following <code>&lt;input&gt;</code> elements use
1295-
<code>CultureInfo.CurrentCulture</code>.
1296-
</p>
1297-
1298-
<ul>
1299-
<li><label><b>Date:</b> <input @bind="dt" /></label></li>
1300-
<li><label><b>Number:</b> <input @bind="number" /></label></li>
1301-
</ul>
1302-
1303-
<h2><code>&lt;input&gt;</code> elements that set a <code>type</code></h2>
1304-
1305-
<p>
1306-
The following <code>&lt;input&gt;</code> elements use
1307-
<code>CultureInfo.InvariantCulture</code>.
1308-
</p>
1309-
1310-
<ul>
1311-
<li><label><b>Date:</b> <input type="date" @bind="dt" /></label></li>
1312-
<li><label><b>Number:</b> <input type="number" @bind="number" /></label></li>
1313-
</ul>
1314-
1315-
@code {
1316-
private DateTime dt = DateTime.Now;
1317-
private double number = 1999.69;
1318-
}
1319-
```
1320-
1321-
Add both the `CultureClient` and `CultureServer` components to the sidebar navigation in `Components/Layout/NavMenu.razor`:
1322-
1323-
```razor
1324-
<div class="nav-item px-3">
1325-
<NavLink class="nav-link" href="culture-server">
1326-
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Culture (Server)
1327-
</NavLink>
1328-
</div>
1329-
<div class="nav-item px-3">
1330-
<NavLink class="nav-link" href="culture-client">
1331-
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Culture (Client)
1332-
</NavLink>
1333-
</div>
1334-
```
1335-
13361347
### Interactive Auto components
13371348

1338-
The guidance in this section also works for components that adopt the Interactive Auto render mode:
1349+
The guidance in this section also works for components in apps that adopt per-page/component rendering and specify the Interactive Auto render mode:
13391350

13401351
```razor
13411352
@rendermode InteractiveAuto

0 commit comments

Comments
 (0)