Skip to content

Commit 6de638c

Browse files
SQL-MisterMagooSQL-MisterMagoo
committed
Swapped to a new method of detecting pre-rendering and included a service so you don't have to use the cascading value if you don't want to.
Updated to aspnetcore 3.1.0
1 parent c2c84bb commit 6de638c

24 files changed

+221
-193
lines changed

‎Directory.Build.props‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<Project>
22
<PropertyGroup>
3-
<BlazorVersion>0.9.0-preview3-19154-02</BlazorVersion>
4-
<ReleaseVersion>0.1.0-beta-1</ReleaseVersion>
3+
<ReleaseVersion>0.2.0-beta-1</ReleaseVersion>
54
</PropertyGroup>
65
</Project>

‎README.md‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,49 @@
11
# PreRenderComponent
22

3-
Provides a CascadingValue exposing whether the app is in PreRendering or not.
3+
Provides a DI Service and/or a CascadingValue exposing whether the app is in PreRendering or not.
44

55
## Usage
66

77
Install the nuget https://nuget.org/packages/PreRenderComponent
88

9-
Add references to Components/_ViewImports.cshtml
9+
### Add the service (Required)
10+
Add the service to your startup Configure method
11+
This component has a dependency on HttpContextAccessor, so also add that.
1012

11-
```
12-
@using PreRenderComponent
13-
@addTagHelper *, PreRenderComponent
13+
``` CSharp
14+
services.AddHttpContextAccessor();
15+
services.AddScoped<IPreRenderFlag,PreRenderFlag>();
1416
```
1517

18+
Consume the service wherever you need it (unless you want to use the Cascading Value component)
19+
``` HTML
20+
@inject PreRenderComponent.IPreRenderFlag PreRenderFlag
21+
@if (PreRenderFlag.IsPreRendering)
22+
{
23+
<h1>Pre-Rendering</h1>
24+
}
25+
```
26+
### Cascading Value (Optional)
1627
Wrap the Router component in PreRenderCascade in the App.razor file
1728

18-
```
19-
<PreRenderCascade>
20-
<Router AppAssembly="typeof(Startup).Assembly" />
21-
</PreRenderCascade>
29+
``` HTML
30+
<PreRenderComponent.PreRenderCascade>
31+
<Router AppAssembly="typeof(App).Assembly">
32+
<Found Context="routeData">
33+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
34+
</Found>
35+
<NotFound>
36+
<LayoutView Layout="@typeof(MainLayout)">
37+
<p>Sorry, there's nothing at this address.</p>
38+
</LayoutView>
39+
</NotFound>
40+
</Router>
41+
</PreRenderComponent.PreRenderCascade>
2242
```
2343

2444
Consume the CascadingValue in your own pages/components
2545

26-
```
46+
``` CSharp
2747
@if (IsPreRendering)
2848
{
2949
<button class="btn btn-dark" onclick="@IncrementCount" disabled>Don't Click me</button>
@@ -34,7 +54,7 @@ else
3454
}
3555

3656

37-
@functions {
57+
@code {
3858
[CascadingParameter(Name = "PreRendering")]
3959
protected bool IsPreRendering { get; set; }
4060
}

‎samples/PreRenderSample/Components/App.razor‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
@*
2-
The Router component displays whichever component has a @page
3-
directive matching the current URI.
4-
*@
5-
<PreRenderCascade>
6-
<Router AppAssembly="typeof(Startup).Assembly" />
7-
</PreRenderCascade>
1+
<PreRenderComponent.PreRenderCascade>
2+
<Router AppAssembly="typeof(App).Assembly">
3+
<Found Context="routeData">
4+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
5+
</Found>
6+
<NotFound>
7+
<LayoutView Layout="@typeof(MainLayout)">
8+
<p>Sorry, there's nothing at this address.</p>
9+
</LayoutView>
10+
</NotFound>
11+
</Router>
12+
</PreRenderComponent.PreRenderCascade>

‎samples/PreRenderSample/Components/Pages/Counter.razor‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
@page "/counter"
2-
To see the Pre-Rendering in effect, open the browser dev tools,
3-
set the network speed to slow, then refresh.
2+
<mark>
3+
To see the Pre-Rendering in effect, open the browser dev tools,
4+
set the network speed to slow, then refresh.
5+
</mark>
6+
@if (IsPreRendering)
7+
{
8+
<h1>Pre-Rendering</h1>
9+
}
410

511
<h1>Counter</h1>
612

713
<p>Current count: @currentCount</p>
814

915
@if (IsPreRendering)
1016
{
11-
<button class="btn btn-dark" onclick="@IncrementCount" disabled>Don't Click me</button>
17+
<button class="btn btn-dark" @onclick="IncrementCount" disabled>Don't Click me</button>
1218
}
1319
else
1420
{
15-
<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
21+
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
1622
}
1723

1824
@functions {

‎samples/PreRenderSample/Components/Pages/FetchData.razor‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
@page "/fetchdata"
22
@using PreRenderSample.Services
3-
@inject WeatherForecastService ForecastService
3+
@inject PreRenderComponent.IPreRenderFlag PreRenderFlag
4+
@inject IWeatherForecastService ForecastService
5+
<mark>
6+
To see the Pre-Rendering in effect, open the browser dev tools,
7+
set the network speed to slow, then refresh.
8+
</mark>
9+
@if (PreRenderFlag.IsPreRendering)
10+
{
11+
<h1>Pre-Rendering</h1>
12+
}
413

514
<h1>Weather forecast</h1>
615

@@ -34,11 +43,11 @@ else
3443
</tbody>
3544
</table>
3645
}
37-
38-
@functions {
46+
@code
47+
{
3948
WeatherForecast[] forecasts;
4049

41-
protected override async Task OnInitAsync()
50+
protected override async Task OnInitializedAsync()
4251
{
4352
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
4453
}

‎samples/PreRenderSample/Components/Pages/Index.razor‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
11
@page "/"
2+
<mark>
3+
To see the Pre-Rendering in effect, open the browser dev tools,
4+
set the network speed to slow, then refresh.
5+
Also check out the Counter page and Weather forecast for other examples.
6+
</mark>
7+
@if (IsPreRendering)
8+
{
9+
<h1>Pre-Rendering</h1>
10+
}
211

312
<h1>Hello, world!</h1>
413

514
Welcome to your new app.
615

7-
To see the Pre-Rendering in effect, open the browser dev tools and set the network speed to slow, then refresh.
816

9-
Also check out the Counter page for another example.
1017

1118
@if (IsPreRendering)
1219
{
13-
<h2>Warming up the engine...</h2>
20+
<h2>Warming up the engine...</h2>
1421
}
1522
@functions {
16-
[CascadingParameter(Name = "PreRendering")] protected bool IsPreRendering { get; set; }
23+
[CascadingParameter(Name = "PreRendering")] protected bool IsPreRendering { get; set; }
1724
}

‎samples/PreRenderSample/Components/Pages/_ViewImports.cshtml‎ renamed to ‎samples/PreRenderSample/Components/Pages/_Imports.razor‎

File renamed without changes.

‎samples/PreRenderSample/Components/Shared/NavMenu.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<div class="top-row pl-4 navbar navbar-dark">
22
<a class="navbar-brand" href="">PreRenderSample</a>
3-
<button class="navbar-toggler" onclick="@ToggleNavMenu">
3+
<button class="navbar-toggler" @onclick="ToggleNavMenu">
44
<span class="navbar-toggler-icon"></span>
55
</button>
66
</div>
77

8-
<div class="@NavMenuCssClass" onclick="@ToggleNavMenu">
8+
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
99
<ul class="nav flex-column">
1010
<li class="nav-item px-3">
1111
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">

‎samples/PreRenderSample/Components/_ViewImports.cshtml‎ renamed to ‎samples/PreRenderSample/Components/_Imports.razor‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
@using System.Net.Http
22
@using Microsoft.AspNetCore.Components.Forms
3-
@using Microsoft.AspNetCore.Components.Layouts
3+
@using Microsoft.AspNetCore.Components.Web
44
@using Microsoft.AspNetCore.Components.Routing
55
@using Microsoft.JSInterop
66
@using PreRenderSample.Components.Shared
7-
@using PreRenderComponent
8-
@addTagHelper *, PreRenderComponent

‎samples/PreRenderSample/Pages/Index.cshtml‎ renamed to ‎samples/PreRenderSample/Pages/_Host.cshtml‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
@page "{*clientPath}"
1+
@page "/"
2+
@namespace PreRenderSample.Pages
3+
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
4+
25
<!DOCTYPE html>
3-
<html>
6+
<html lang="en">
47
<head>
58
<meta charset="utf-8" />
69
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -14,13 +17,26 @@
1417
asp-fallback-href="css/bootstrap/bootstrap.min.css"
1518
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
1619
crossorigin="anonymous"
17-
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
20+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
1821
</environment>
1922
<link href="css/site.css" rel="stylesheet" />
2023
</head>
2124
<body>
22-
<app>@(await Html.RenderComponentAsync<App>())</app>
25+
<app>
26+
<component type="typeof(PreRenderSample.Components.App)" render-mode="ServerPrerendered" />
27+
</app>
28+
29+
<div id="blazor-error-ui">
30+
<environment include="Staging,Production">
31+
An error has occurred. This application may no longer respond until reloaded.
32+
</environment>
33+
<environment include="Development">
34+
An unhandled exception has occurred. See browser dev tools for details.
35+
</environment>
36+
<a href class="reload">Reload</a>
37+
<a class="dismiss">🗙</a>
38+
</div>
2339

24-
<script src="_framework/components.server.js"></script>
40+
<script src="_framework/blazor.server.js"></script>
2541
</body>
2642
</html>

0 commit comments

Comments
 (0)