Skip to content

Commit 2cdb687

Browse files
csharpfritzcsharpfritz
authored
Session 0302 (#75)
* First demos * Added library demo * After stream
1 parent 8d04e79 commit 2cdb687

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+1765
-0
lines changed

‎sessions/Season-03/0302-Components/README.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Session 0302 - Blazor Components
2+
3+
Blazor components are simply razor templates that you can reference by name as a tag inside of another component.
4+
5+
## Agenda
6+
7+
- Review the template
8+
- Survey component
9+
- Add the counter to the home page
10+
11+
## Question: How do I create sub-folders for my Pages in Razor?
12+
13+
You can create and organize folders however you would like in your application's source files. The `@page` directive controls the route ___location.
14+
15+
Check the `/Pages/Test/Page.razor` file in the demo.
16+
17+
## Convention
18+
19+
All .razor files can be referenced as components in other templates. Use the `/Components` folder to place those template files that do not include a `@page` directive and cannot be navigated to.
20+
21+
Add the `Components` folder's namspace to your `_Imports.razor` file to allow these components to be referenced elsewhere in your application:
22+
23+
```
24+
@using demo.Components
25+
```
26+
27+
## Parameters
28+
29+
The Parameter attribute allows us to add parameters to our components. Let's start with a simple `Hat` component to present data about Fritz's hats.
30+
31+
## Child Content
32+
33+
## CSS Isolation
34+
35+
## Templates
36+
37+
## Libraries

‎sessions/Season-03/0302-Components/src/0302.sln

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 16
4+
VisualStudioVersion = 16.6.30114.105
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "demo", "demo\demo.csproj", "{6EA31973-CA8A-4AF2-ADF7-103B730ECCE1}"
7+
EndProject
8+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Fritz.Components", "Fritz.Components\Fritz.Components.csproj", "{417B880F-9B52-409C-AD4E-2EE52AAB6E99}"
9+
EndProject
10+
Global
11+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
12+
Debug|Any CPU = Debug|Any CPU
13+
Debug|x64 = Debug|x64
14+
Debug|x86 = Debug|x86
15+
Release|Any CPU = Release|Any CPU
16+
Release|x64 = Release|x64
17+
Release|x86 = Release|x86
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
23+
{6EA31973-CA8A-4AF2-ADF7-103B730ECCE1}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
24+
{6EA31973-CA8A-4AF2-ADF7-103B730ECCE1}.Debug|Any CPU.Build.0 = Debug|Any CPU
25+
{6EA31973-CA8A-4AF2-ADF7-103B730ECCE1}.Debug|x64.ActiveCfg = Debug|Any CPU
26+
{6EA31973-CA8A-4AF2-ADF7-103B730ECCE1}.Debug|x64.Build.0 = Debug|Any CPU
27+
{6EA31973-CA8A-4AF2-ADF7-103B730ECCE1}.Debug|x86.ActiveCfg = Debug|Any CPU
28+
{6EA31973-CA8A-4AF2-ADF7-103B730ECCE1}.Debug|x86.Build.0 = Debug|Any CPU
29+
{6EA31973-CA8A-4AF2-ADF7-103B730ECCE1}.Release|Any CPU.ActiveCfg = Release|Any CPU
30+
{6EA31973-CA8A-4AF2-ADF7-103B730ECCE1}.Release|Any CPU.Build.0 = Release|Any CPU
31+
{6EA31973-CA8A-4AF2-ADF7-103B730ECCE1}.Release|x64.ActiveCfg = Release|Any CPU
32+
{6EA31973-CA8A-4AF2-ADF7-103B730ECCE1}.Release|x64.Build.0 = Release|Any CPU
33+
{6EA31973-CA8A-4AF2-ADF7-103B730ECCE1}.Release|x86.ActiveCfg = Release|Any CPU
34+
{6EA31973-CA8A-4AF2-ADF7-103B730ECCE1}.Release|x86.Build.0 = Release|Any CPU
35+
{417B880F-9B52-409C-AD4E-2EE52AAB6E99}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
36+
{417B880F-9B52-409C-AD4E-2EE52AAB6E99}.Debug|Any CPU.Build.0 = Debug|Any CPU
37+
{417B880F-9B52-409C-AD4E-2EE52AAB6E99}.Debug|x64.ActiveCfg = Debug|Any CPU
38+
{417B880F-9B52-409C-AD4E-2EE52AAB6E99}.Debug|x64.Build.0 = Debug|Any CPU
39+
{417B880F-9B52-409C-AD4E-2EE52AAB6E99}.Debug|x86.ActiveCfg = Debug|Any CPU
40+
{417B880F-9B52-409C-AD4E-2EE52AAB6E99}.Debug|x86.Build.0 = Debug|Any CPU
41+
{417B880F-9B52-409C-AD4E-2EE52AAB6E99}.Release|Any CPU.ActiveCfg = Release|Any CPU
42+
{417B880F-9B52-409C-AD4E-2EE52AAB6E99}.Release|Any CPU.Build.0 = Release|Any CPU
43+
{417B880F-9B52-409C-AD4E-2EE52AAB6E99}.Release|x64.ActiveCfg = Release|Any CPU
44+
{417B880F-9B52-409C-AD4E-2EE52AAB6E99}.Release|x64.Build.0 = Release|Any CPU
45+
{417B880F-9B52-409C-AD4E-2EE52AAB6E99}.Release|x86.ActiveCfg = Release|Any CPU
46+
{417B880F-9B52-409C-AD4E-2EE52AAB6E99}.Release|x86.Build.0 = Release|Any CPU
47+
EndGlobalSection
48+
EndGlobal

‎sessions/Season-03/0302-Components/src/Fritz.Components/Component1.razor

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="my-component">
2+
This Blazor component is defined in the <strong>Fritz.Components</strong> package.
3+
</div>

‎sessions/Season-03/0302-Components/src/Fritz.Components/Component1.razor.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.my-component {
2+
border: 2px dashed red;
3+
padding: 1em;
4+
margin: 1em 0;
5+
background-image: url('background.png');
6+
}

‎sessions/Season-03/0302-Components/src/Fritz.Components/ExampleJsInterop.cs

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
using System;
2+
using System.Threading.Tasks;
3+
using Microsoft.JSInterop;
4+
5+
namespace Fritz.Components
6+
{
7+
// This class provides an example of how JavaScript functionality can be wrapped
8+
// in a .NET class for easy consumption. The associated JavaScript module is
9+
// loaded on demand when first needed.
10+
//
11+
// This class can be registered as scoped DI service and then injected into Blazor
12+
// components for use.
13+
14+
public class ExampleJsInterop : IAsyncDisposable
15+
{
16+
private readonly Lazy<Task<IJSObjectReference>> moduleTask;
17+
18+
public ExampleJsInterop(IJSRuntime jsRuntime)
19+
{
20+
moduleTask = new (() => jsRuntime.InvokeAsync<IJSObjectReference>(
21+
"import", "./_content/Fritz.Components/exampleJsInterop.js").AsTask());
22+
}
23+
24+
public async ValueTask<string> Prompt(string message)
25+
{
26+
var module = await moduleTask.Value;
27+
return await module.InvokeAsync<string>("showPrompt", message);
28+
}
29+
30+
public async ValueTask DisposeAsync()
31+
{
32+
if (moduleTask.IsValueCreated)
33+
{
34+
var module = await moduleTask.Value;
35+
await module.DisposeAsync();
36+
}
37+
}
38+
}
39+
}

‎sessions/Season-03/0302-Components/src/Fritz.Components/Fritz.Components.csproj

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Razor">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net5.0</TargetFramework>
5+
</PropertyGroup>
6+
7+
8+
<ItemGroup>
9+
<SupportedPlatform Include="browser" />
10+
</ItemGroup>
11+
12+
<ItemGroup>
13+
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="5.0.4" />
14+
</ItemGroup>
15+
16+
</Project>

‎sessions/Season-03/0302-Components/src/Fritz.Components/_Imports.razor

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@using Microsoft.AspNetCore.Components.Web

‎sessions/Season-03/0302-Components/src/Fritz.Components/wwwroot/background.png

378 Bytes
Loading

‎sessions/Season-03/0302-Components/src/Fritz.Components/wwwroot/exampleJsInterop.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// This is a JavaScript module that is loaded on demand. It can export any number of
2+
// functions, and may import other JavaScript modules if required.
3+
4+
export function showPrompt(message) {
5+
return prompt(message, 'Type anything here');
6+
}

‎sessions/Season-03/0302-Components/src/demo/App.razor

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
2+
<Found Context="routeData">
3+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
4+
</Found>
5+
<NotFound>
6+
<LayoutView Layout="@typeof(MainLayout)">
7+
<p>Sorry, there's nothing at this address.</p>
8+
</LayoutView>
9+
</NotFound>
10+
</Router>

0 commit comments

Comments
 (0)