|
1 | | -@implements IAsyncDisposable |
2 | | -@inject IJSRuntime JSRuntime |
3 | | -@page "/" |
| 1 | +@page "/" |
4 | 2 |
|
5 | | -<PageTitle>My index</PageTitle> |
| 3 | +<PageTitle>Index</PageTitle> |
6 | 4 |
|
7 | 5 | <h1>Hello, world!</h1> |
8 | 6 |
|
9 | 7 | Welcome to your new app. |
10 | | - |
11 | | -<div style="margin-top: 2em"> |
12 | | - <button class="btn btn-primary" onclick="console.log('log default clicked')">Log default</button> |
13 | | -</div> |
14 | | - |
15 | | -<div style="margin-top: 2em"> |
16 | | - Message: <input type="text" @bind="Message" /> |
17 | | - <button class="btn btn-primary" @onclick="() => LogMessage(Message)">Log message</button> |
18 | | - <button class="btn btn-primary" @onclick="() => LogFromModule(Message)">Log from module</button> |
19 | | -</div> |
20 | | - |
21 | | -<div style="margin-top: 2em"> |
22 | | - Title: <input type="text" @bind="NewTitle" /> |
23 | | - <button class="btn btn-primary" @onclick="() => SetDocumentTitle(NewTitle)">Change title</button> |
24 | | - <button class="btn btn-primary" @onclick="() => SetDocumentTitleDirectly(NewTitle)">Change title directly</button> |
25 | | -</div> |
26 | | - |
27 | | -<div style="margin-top: 2em"> |
28 | | - <button class="btn btn-primary" @onclick="GetDocumentTitle">Get title</button> |
29 | | - <span>@CurrentTitle</span> |
30 | | -</div> |
31 | | - |
32 | | -<div style="margin-top: 2em"> |
33 | | - <span>@TestObjectDisplay</span> <br /> |
34 | | - <button class="btn btn-primary" @onclick="GetTestObjectState">Get object state directly</button> |
35 | | - <button class="btn btn-primary" @onclick="GetTestObjectStateViaReference">Get object state via reference</button> |
36 | | - <button class="btn btn-primary" @onclick="GetTestObjectStateViaReferenceFromFunction">Get object state via reference from function</button> |
37 | | - <button class="btn btn-primary" @onclick="GetTestObjectStateViaReferenceFromProperty">Get object state via reference from property</button> |
38 | | -</div> |
39 | | - |
40 | | -<div style="margin-top: 2em"> |
41 | | - <button class="btn btn-primary" @onclick="CreateDog">Create a dog</button> |
42 | | - <button class="btn btn-primary" @onclick="CreateCat">Create a cat</button> |
43 | | - <span>@AnimalMessage</span> |
44 | | -</div> |
45 | | - |
46 | | -<div style="margin-top: 2em"> |
47 | | - <button class="btn btn-primary" @onclick="GetInvalid">Try get a set-only property</button> |
48 | | - <button class="btn btn-primary" @onclick="SetInvalid">Try set a get-only property</button> |
49 | | - <button class="btn btn-primary" @onclick="SetInvalidViaFunction">Try set a get-only property via function</button> |
50 | | - <span>@ErrorMessage</span> |
51 | | -</div> |
52 | | - |
53 | | -@code { |
54 | | - private string? Message { get; set; } |
55 | | - private string? CurrentTitle { get; set; } |
56 | | - private string? NewTitle { get; set; } |
57 | | - private string? TestObjectDisplay { get; set; } |
58 | | - private string? AnimalMessage { get; set; } |
59 | | - private string? ErrorMessage { get; set; } |
60 | | - |
61 | | - private IJSObjectReference? module; |
62 | | - |
63 | | - protected override async Task OnAfterRenderAsync(bool firstRender) |
64 | | - { |
65 | | - if (firstRender) |
66 | | - { |
67 | | - module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "../custom-module.js"); |
68 | | - } |
69 | | - } |
70 | | - |
71 | | - |
72 | | - private async Task LogDefault() |
73 | | - { |
74 | | - await JSRuntime.InvokeVoidAsync("logDefault"); |
75 | | - } |
76 | | - |
77 | | - private async Task LogMessage(string message) |
78 | | - { |
79 | | - await JSRuntime.InvokeVoidAsync("logMessage", message); |
80 | | - await JSRuntime.InvokeVoidAsync("console.log", $"Console: {message}"); |
81 | | - } |
82 | | - |
83 | | - |
84 | | - private async Task LogFromModule(string message) |
85 | | - { |
86 | | - if (module != null) |
87 | | - { |
88 | | - await module.InvokeVoidAsync("logFromModule", message); |
89 | | - } |
90 | | - } |
91 | | - |
92 | | - |
93 | | - private async Task SetDocumentTitle(string title) |
94 | | - { |
95 | | - await JSRuntime.InvokeVoidAsync("setDocumentTitle", title); |
96 | | - } |
97 | | - |
98 | | - private async Task SetDocumentTitleDirectly(string title) |
99 | | - { |
100 | | - await JSRuntime.SetValueAsync("document.title", title); |
101 | | - } |
102 | | - |
103 | | - private async Task GetDocumentTitle() |
104 | | - { |
105 | | - CurrentTitle = await JSRuntime.GetValueAsync<string>("document.title"); |
106 | | - } |
107 | | - |
108 | | - private async Task GetTestObjectState() |
109 | | - { |
110 | | - var model = await JSRuntime.InvokeAsync<TestObjectModel>("getTestObject"); |
111 | | - TestObjectDisplay = $"Serialized state: {model.Num} | {model.Text} | {model.GetOnlyProperty}"; |
112 | | - } |
113 | | - |
114 | | - private async Task GetTestObjectStateViaReference() |
115 | | - { |
116 | | - var objectRef = await JSRuntime.GetValueAsync<IJSObjectReference>("testObject"); |
117 | | - var model = await objectRef.GetValueAsync<TestObjectModel>(); |
118 | | - TestObjectDisplay = $"Serialized state via reference: {model.Num} | {model.Text} | {model.GetOnlyProperty}"; |
119 | | - } |
120 | | - |
121 | | - private async Task GetTestObjectStateViaReferenceFromFunction() |
122 | | - { |
123 | | - var objectRef = await JSRuntime.InvokeAsync<IJSObjectReference>("getTestObject"); |
124 | | - var numValue = await objectRef.GetValueAsync<int>("num"); |
125 | | - var textValue = await objectRef.GetValueAsync<string>("text"); |
126 | | - var getOnlyProperty = await objectRef.GetValueAsync<int>("getOnlyProperty"); |
127 | | - TestObjectDisplay = $"State via reference from function: {numValue} | {textValue} | {getOnlyProperty}"; |
128 | | - } |
129 | | - |
130 | | - private async Task GetTestObjectStateViaReferenceFromProperty() |
131 | | - { |
132 | | - var objectRef = await JSRuntime.GetValueAsync<IJSObjectReference>("testObject"); |
133 | | - var numValue = await objectRef.GetValueAsync<int>("num"); |
134 | | - var textValue = await objectRef.GetValueAsync<string>("text"); |
135 | | - var getOnlyProperty = await objectRef.GetValueAsync<int>("getOnlyProperty"); |
136 | | - TestObjectDisplay = $"State via reference from property: {numValue} | {textValue} | {getOnlyProperty}"; |
137 | | - } |
138 | | - |
139 | | - private async Task CreateDog() |
140 | | - { |
141 | | - var dogRef = await JSRuntime.InvokeNewAsync("Dog", ["Igor"]); |
142 | | - AnimalMessage = await dogRef.InvokeAsync<string>("bark"); |
143 | | - } |
144 | | - |
145 | | - private async Task CreateCat() |
146 | | - { |
147 | | - var catRef = await JSRuntime.InvokeNewAsync("Cat", ["Mikeš"]); |
148 | | - AnimalMessage = await catRef.InvokeAsync<string>("meow"); |
149 | | - } |
150 | | - |
151 | | - private async Task GetInvalid(MouseEventArgs args) |
152 | | - { |
153 | | - var objectRef = await JSRuntime.GetValueAsync<IJSObjectReference>("testObject"); |
154 | | - var value = await objectRef.GetValueAsync<int>("setOnlyProperty"); |
155 | | - } |
156 | | - |
157 | | - private async Task SetInvalid(MouseEventArgs args) |
158 | | - { |
159 | | - var objectRef = await JSRuntime.GetValueAsync<IJSObjectReference>("testObject"); |
160 | | - await objectRef.SetValueAsync<int>("getOnlyProperty", 123); |
161 | | - } |
162 | | - |
163 | | - private async Task SetInvalidViaFunction(MouseEventArgs args) |
164 | | - { |
165 | | - await JSRuntime.InvokeVoidAsync("invalidAccess"); |
166 | | - } |
167 | | - |
168 | | - async ValueTask IAsyncDisposable.DisposeAsync() |
169 | | - { |
170 | | - if (module is not null) |
171 | | - { |
172 | | - try |
173 | | - { |
174 | | - await module.DisposeAsync(); |
175 | | - } |
176 | | - catch (JSDisconnectedException) |
177 | | - { |
178 | | - } |
179 | | - } |
180 | | - } |
181 | | - |
182 | | - class TestObjectModel |
183 | | - { |
184 | | - public int Num { get; set; } |
185 | | - public string? Text { get; set; } |
186 | | - public int GetOnlyProperty { get; set; } |
187 | | - } |
188 | | -} |
0 commit comments