Commit abd6d5f0 authored by Patrick Robin's avatar Patrick Robin

Created Razor component to display connection status

parent 9e3d7ead
......@@ -5,3 +5,13 @@
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<Connection>
<Online>
<h1 style="color: green">Online</h1>
</Online>
<Offline>
<h1 style="color: red">Offline</h1>
</Offline>
</Connection>
\ No newline at end of file
@implements IDisposable
@inject IJSRuntime JsRuntime;
@if (IsOnline)
{
@Online
}
else
{
@Offline
}
@code {
[Parameter]
public RenderFragment Online { get; set; }
[Parameter]
public RenderFragment Offline { get; set; }
public bool IsOnline { get; set; }
[JSInvokable("Connection.StatusChanged")]
public void OnConnectionStatusChanged(bool isOnline)
{
if (IsOnline != isOnline)
{
IsOnline = isOnline;
}
StateHasChanged();
}
protected override void OnInitialized()
{
base.OnInitialized();
JsRuntime.InvokeVoidAsync("Connection.Initialize", DotNetObjectReference.Create(this));
}
public void Dispose()
{
JsRuntime.InvokeVoidAsync("Connection.Dispose");
}
}
\ No newline at end of file
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
......@@ -19,6 +19,13 @@
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script src="site.js"></script>
<script type="text\javascript">
console.log(window.navigator.onLine);
</script>
</body>
</html>
let handler;
window.Connection = {
Initialize: function (interop) {
handler = function () {
interop.invokeMethodAsync("Connection.StatusChanged", navigator.onLine);
}
window.addEventListener("online", handler);
window.addEventListener("offline", handler);
handler(navigator.onLine);
},
Dispose: function () {
if (handler != null) {
window.removeEventListener("online", handler);
window.removeEventListener("offline", handler);
}
}
};
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment