majorimi / blazor-components

Components collection and extensions for Blazor applications.

Majorsoft Blazor Components

Majorsoft Blazor Components is a set of UI Components and other useful Extensions for Blazor applications. All components are free and available on NuGet.

You can try out all components and extensions by launching the demo app. Note: this app is hosted on Azure Static website feature. Which uses aggressive caching you might have to use HARD reload (CTRL + F5 or CMD + SHIFT + R), or clear browser cache.

About the project

Majorsoft Blazor Components is one of the newest but the most modern Blazor library. Using the fastest ever .NET 5 Framework leveraging CSS and JS isolation. The main goal of this project is to provide an easy to use, feature reach set of customizable components with other useful extensions. Which can boost Blazor App developments by:

• Providing reusable components which are the main building blocks of Blazor.
• Hiding CSS details but allowing component customizations as well (no dependency on CSS libraries).
• Hiding JS implementations but exposing many reusable JS functionality and events via new C# APIs (no dependency on JS libraries).
• All running on the fastest ever .NET framework: .NET 5. Fully leveraging CSS and JS isolation, JS object reference and modul exports, etc.
• Modular project each package has "single responsibility" install only what you need, reduce download size.
• As simple as possible setup (custom JS referencing not required) all documented with usage examples and demo app.
• All components work on Blazor Server and Clint side.
• Components are extensible, provided extensions and services can be used in other components.
• All components and extensions written in C# (with some required JS) and unit tested with bUnit.

Releases

⚠️ For the full release history with detailed change description and breaking change announcements please see: release notes.

Prerequisites

• .NET 5
• Visual Studio 2019/Visual Studio Code.

Majorsoft Blazor Components and Extensions

Detailed descriptions and usage code samples are available on separated docs files. Please follow the link provided on each bullet points. Also you can try out all components and extensions by launching the demo app.

Check out our planned components and extensions on the project Wiki page. If you have any prefered component to have priority or new component ideas please submit it.

Majorsoft Blazor Extensions

Majorsoft Blazor Extensions are providing useful features to develop Balazor applications:

• Majorsoft.Blazor.Server.Logging.Console: Enables Browser console logging for Blazor applications using Server Hosted model.
• Majorsoft.Blazor.WebAssembly.Logging.Console: Enables Browser console logging for Blazor applications using WebAssembly Hosting model.
• Majorsoft.Blazor.Extensions.BrowserStorage: Enables Browser Local and Session storages and Cookies store access for Blazor applications.
• Majorsoft.Blazor.Extensions.Analytics: Enables Analytics services usage for Blazor applications e.g. Google Analytics, etc.

Majorsoft Blazor Components

Majorsoft Blazor Components are providing custom UI components to develop Balazor applications:

• Majorsoft.Blazor.Components.Common.JsInterop: Js Interop components, injectable services and extensions that provides useful functionality and event notifications which can be achieved only with JS Interop e.g. scroll, clipboard, focus, resize, language detection, Geolocation, HTML Head (title, meta, SEO), etc..
• Majorsoft.Blazor.Components.Debounce: Debounce components that renders an Input, InputText, Textarea or InputTextarea, etc. element with debounced onChange event.
• Majorsoft.Blazor.Components.Typeahead: Typeahead components that renders an HTML Input or InputText with Typeahead panel.
• Majorsoft.Blazor.Components.Inputs: Inputs components renders an Input, InputText, Textarea or InputTextarea, etc. element with maxlength set and counter to show remaining characters.
• Majorsoft.Blazor.Components.Loading: Loading and Overlay components that renders Overlays for the whole page on load or for specific element on custom event. Also HTML button with customizable content for showing async operation in progress/loading state.
• Majorsoft.Blazor.Components.Timer: Timer component that can be used for scheduled and periodically repeated tasks to call custom code.
• Majorsoft.Blazor.Components.CssEvents: CSS Transition and Animation events injectable Services and wrapper Components to notify on CSS Transition and Animation events.
• Majorsoft.Blazor.Components.Modal: Modal dialog component that can be used to render Modal dialog window with customizable content and parameterized Overlay, etc.
• Majorsoft.Blazor.Components.PermaLink: PermaLink component and extension that can be used to create navigation element inside Blazor pages (#permalink).
• Majorsoft.Blazor.Components.Toggle: Toggle components that can be used to render customizable Toggle switch and Toggle button components.
• Majorsoft.Blazor.Components.Tabs: Tabs components that renders customizable Tabs panel with many tabs and custom content.
• Majorsoft.Blazor.Components.Collapse: Collapse components that renders customizable Collapsible/Expandable panel and Accordion with many but only one active panel also custom content and header.
• Majorsoft.Blazor.Components.Maps: Google/Bing Maps components that renders Google/Bing maps wrapped into Blazor components allowing to control and mange maps with .Net code.
• Majorsoft.Blazor.Components.GdprConsent: GDPR Consent components injectable service and components that renders a customizable GDPR consent Banner or Popup witch Accept/Reject for cookie settings chosen value is persisted to Browser storage.
• Majorsoft.Blazor.Components.Notifications: Notification components injectable INotificationService service to handle HTML5 Notifications and ServiceWorker Notifications and components that renders customizable Alert and Toast notification message elements.

Community

• Contributing
• Report an issue or ask new features
• ⭐Thanks for Star ⭐ giving users You can Give a Star ⭐
• Support project 🙏👍 🍕☕

Other info

• Docs
• Wiki page
• License

blazor-components's Issues

CssEvents TransitionEventService tries to dynamically inject transitionEvents.min.js with relative path which produces invalid links

I have a blazor server app.

When I try to use Modal dialog component, which requires CssEvents component on my pages TransitionEventService produces transitionEvents.min.js with invalid path.

Microsoft.JSInterop.JSException: Failed to fetch dynamically imported module: http://localhost:5258/#registration-form_content/Majorsoft.Blazor.Components.CssEvents/transitionEvents.min.js

This happens because TransitionEventService tries to inject it with relative path and not absolute.

private async Task CheckJsObjectAsync()
    {
      if (this._transitionJs != null)
        return;
      this._transitionJs = await this._jsRuntime.InvokeAsync<IJSObjectReference>("import", (object) "./_content/Majorsoft.Blazor.Components.CssEvents/transitionEvents.min.js");
    }

To solve this issue I created my own TransitionEventService and couple of internal classes to simply inject NavigationManager in it

    private async Task CheckJsObjectAsync()
    {
      if (this._transitionJs != null)
        return;
      this._transitionJs = await this._jsRuntime.InvokeAsync<IJSObjectReference>("import", (object) _navigationManager.ToAbsoluteUri("./_content/Majorsoft.Blazor.Components.CssEvents/transitionEvents.min.js"));
    }

The problem is that I need to recreate each service file for each js and css services. It is easier to write my own component.
Can you please fix it or maybe you have a better solution for that

It seems to work, but I am not sure this is the best way to do it.

Question Event Resize

Hello,

Is there an effective way to get the event when the browser window is resized or a control is resized ?
With no real lag ? Often I have found solutions with a listener with a frequency for the check.
Maybe with Resize Observer https://drafts.csswg.org/resize-observer-1/ or resize event https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event ? Could be nice to have this feature in your 'blazor-components' project.

Thanks for any answer. 😄

spinner not visible

I add only package Majorsoft.Blazor.Components.Loading and insert this sample code for testing:

<LoadingPage OnLoading="@SendRequest" OverlayOpacity="0" IsLoading="@loading"> <LoadingContent> <i class="fa fa-spinner fa-3x fa-spin"></i> <h2 class="m-3">Loading...</h2> </LoadingContent> </LoadingPage>

I don't see "spinner".

VS 2022 with .Net Core 6

OpenStreetMap support for map component

It will be great if an open source map provider like OpenStreetMap added to map control

How to Update Mapbound when adding more markers

Currently i start with some location and center the map for that location.
But then, i add some more markers which are far away, i want the map to resize(zoom) so that this newly added markers are visible in the map.

How can i do that ?

usually in javascript it would be something like

 bounds = new google.maps.LatLngBounds();
                    bounds.extend(marker.getPosition());
                     mapNew.fitBounds(bounds); //auto-zoom
                    mapNew.panToBounds(bounds); //auto-center

Setting collapse panel height to 0 disables animation

When I set ContentHeight for a CollapsePanel component to 0, it disables the open and close animation for it. Is there a way to retain the animations when I set the height to auto?

Google maps marker clustering

Are there plans to support marker clustering in Google Maps?

Required cookies

On the GDPR page, if you start by clicking the 'Disagree' button, it switches all cookies off including required cookies.
If you then attempt to turn cookies back on, you cannot change the status of required cookies, so you can end up with the interesting situation of tracking and session cookies enabled, with required cookies off.

Image attached

can't access property "map" r is undefined @/_content/Majorsoft.Blazor.Components.Maps

Please how can we solve the below

[2022-08-21T10:53:57.163Z] Error: Microsoft.JSInterop.JSException: can't access property "map", r is undefined
dispose@https://localhost:4090/_content/Majorsoft.Blazor.Components.Maps/googleMaps.min.js:1:3990
beginInvokeJSFromDotNet/s<@https://localhost:4090/_framework/blazor.server.js:1:3501
beginInvokeJSFromDotNet@https://localhost:4090/_framework/blazor.server.js:1:3475
_invokeClientMethod/<@https://localhost:4090/_framework/blazor.server.js:1:72001
_invokeClientMethod@https://localhost:4090/_framework/blazor.server.js:1:71987
_processIncomingData@https://localhost:4090/_framework/blazor.server.js:1:70029
kt/this.connection.onreceive@https://localhost:4090/_framework/blazor.server.js:1:64432
connect/</o.onmessage@https://localhost:4090/_framework/blazor.server.js:1:48766

How to display control to show current Display

how to display the CrossHair(as highlighted in the image) to recenter the map to show users' current location?

GoogleMap not re-rendering on navigation

Google Maps is not rendering when navigating from the component and back.

Steps:

1. Open the demo app
2. Click any link in the left side
3. Click 'Maps'
4. The 'Rendered Google JavaScript Maps:' is empty.

Typeahead: Is there a way to unselect current item on focus?

Prerequisite: Have some item selected on TypeaheadInput.

When clicking on TypeaheadInput to focus it, TypeaheadInput leaves current item selected and places cursor at the end of item label.

Is there a way to change this behaviour, so that focus on TypeaheadInput would 1) unselect current item 2) clear search text 3) open dropdown?

Accordion UI lag

Hi, I noticed when I add around 10+ collapse panels to the Accordion component it starts to lag the UI. Is there any workaround for this issue? I noticed playing around with the parameters (ex: changing cascading parameter Accordion parent to normal public parameter it removes the lag) but haven't found a fully working fix yet.

Error trying to read local storage when browser has it turned off.

When trying to read LocalStorage from Window. Access is denied.

Error:

Failed to read the 'localStorage' property from 'Window': Access is denied for this document. Error: Failed to read the 'localStorage' property from 'Window': Access is denied for this document. at /_framework/blazor.server.js:1:563 at Array.forEach () at i.findFunction (/_framework/blazor.server.js:1:465) at E (/_framework/blazor.server.js:1:2606) at /_framework/blazor.server.js:1:3494 at new Promise () at kt.beginInvokeJSFromDotNet (/_framework/blazor.server.js:1:3475) at /_framework/blazor.server.js:1:72001 at Array.forEach () at kt._invokeClientMethod (/_framework/blazor.server.js:1:71987) Microsoft.JSInterop.JSException Void Throw() at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Majorsoft.Blazor.Extensions.BrowserStorage.StorageServiceBase.GetItemAsync[T](String key)
at Majorsoft.Blazor.Components.GdprConsent.GdprConsentService.GetGdprConsentDataAsync()

Possible fix?:

var storageSupported = false;

try
{ 
    storageSupported = (window.localStorage && true);
}
catch (e) {}

if (storageSupported) 
{ 
    // your code
}

Markers not showing up

Following along in the samples
Markers="@_jsMarkers"/>
From the component declaration

and
private ObservableRangeCollection<GoogleMapMarker> _jsMarkers = new ObservableRangeCollection<GoogleMapMarker>();
From the properties in the @code block

and
_jsMarkers.Add(new GoogleMapMarker(new GeolocationCoordinate(36.05257747885196, 14.188007522784417)) { Draggable = false, Clickable = true, InfoWindow = new GoogleMapInfoWindow() { Content = $"<h4>Azure Window</h4> <div><a href=\"https://www.flickr.com/photos/135037635@N03/33200850951/in/album-72157655977338469/\" target=\"_blank\"><img src=\"https://live.staticflickr.com/3884/33200850951_079a7fd7e4_b.jpg\" width=\"200\" height=\"150\"></a></div>", MaxWidth = 400 }, });
From the OnAfterRenderAsync

But nothing is rending on the map. What else is required for a marker to show up?

Google Map Bounds Coordinates

The google map api we can get the bounds via these methods:

const bounds = map.getBounds();
const ne = bounds.getNorthEast();
const sw = bounds.getSouthWest();

Does this library support anything like this?

Update: I'm trying to use jsinterop to call these methods:

private async Task OnMapBoundsChanged()
{
        var _mapsJs = await _js.InvokeAsync<IJSObjectReference>("import", "./_content/Majorsoft.Blazor.Components.Maps/googleMaps.min.js");
        await _mapsJs.InvokeVoidAsync("getBounds", _map.MapId);
}

But its not working, (I'm new to js interop), its throwing:

Error: Microsoft.JSInterop.JSException: Could not find 'getBounds' ('getBounds' was undefined).

Namespace conflicts

I have a namespace conflict issue when using your library. My namespace for my project has a ".Blazor." in it and yours starts with Blazor.Components.
When this issue is closed it shouldn't be an issue dotnet/razor#7670
I was expecting your library to be Majorsoft.Blazor.Components which would also resolve the issue.
Any suggestions for a workaround?

Thanks, your library is providing some very key components that are missing from even some of the larger commercial component libraries!

Notification Timestamp options not work propery

Bug

Windows notification timestamp is always January 1. (probably 1970-01-01)

Environment

Windows 11 22H2 Microsoft Edge 108.0.1462.54

Bug reason

HTML5 Notification.timestamp is number format.

From Spec

A notification has an associated timestamp which is an EpochTimeStamp representing the time.

From MDN

A number representing a timestamp, given as Unix time in milliseconds.

But this library pass timestamp as string format. ISO 8601

blazor-components/src/Majorsoft.Blazor.Components.Notifications/HTML5/HtmlNotificationData.cs

Line 74 in 879e425

public DateTime Timestamp { get; set; } = DateTime.UtcNow;

blazor-components/src/Majorsoft.Blazor.Components.Notifications/HTML5/HtmlNotificationService.cs

Lines 61 to 77 in 879e425

	public async ValueTask<Guid> ShowsAsync(HtmlNotificationOptions notificationOptions)
	{
	var module = await _moduleTask.Value;
	var id = Guid.NewGuid();
	var info = new HtmlNotificationEventInfo(id,
	notificationOptions.OnOpenCallback,
	notificationOptions.OnClickCallback,
	notificationOptions.OnCloseCallback,
	notificationOptions.OnErrorCallback);
	var dotnetRef = DotNetObjectReference.Create<HtmlNotificationEventInfo>(info);
	_dotNetObjectReferences.Add(dotnetRef);
	await module.InvokeVoidAsync("showSimple", id.ToString(), notificationOptions, dotnetRef);
	return id;
	}

blazor-components/src/Majorsoft.Blazor.Components.Notifications/wwwroot/notification.js

Lines 37 to 53 in 879e425

	//Instance methods
	export function showSimple(id, options, dotnetRef) {
	if (!id || !options) {
	return;
	}
	let notification = new Notification(options.title, options);
	if (dotnetRef) {
	notification.onshow = (event) => { dotnetRef.invokeMethodAsync("OnOpen"); };
	notification.onclose = (event) => { dotnetRef.invokeMethodAsync("OnClose"); };
	notification.onerror = (event) => { dotnetRef.invokeMethodAsync("OnError"); };
	notification.onclick = (event) => { dotnetRef.invokeMethodAsync("OnClick"); };
	}
	return notification;
	}

Target .NET 6

Remove net5.0 target and replace with net6.0 target.

Bootstrap 5

Does this work with Bootstrap 5?

After closing the Modal and trying to open again we get this error and the map isn't visible

Hello
I have a bit of similar issue
When using the map inside a Modal
After closing the Modal and trying to open again
we get this error and the map isn't visible
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Cannot access a disposed object.
Object name: 'JSObjectReference'.
System.ObjectDisposedException: Cannot access a disposed object.
Object name: 'JSObjectReference'.

I Also have the same issue even when used in pages and after navigating out of the page that has the map and then back in, i get the same exception

BTW: I'm using v1.4.0
Thank you.

Originally posted by @NO1225 in #73 (comment)

There is no tracked object with id '5'. Perhaps the DotNetObjectReference instance was already disposed

Please see the following issue

Uncaught (in promise) Error: System.ArgumentException: There is no tracked object with id '5'. Perhaps the DotNetObjectReference instance was already disposed. (Parameter 'dotNetObjectId')
at Microsoft.JSInterop.JSRuntime.GetObjectReference(Int64 dotNetObjectId)
at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.BeginInvokeDotNet(JSRuntime jsRuntime, DotNetInvocationInfo invocationInfo, String argsJson)
at Object.endInvokeDotNetFromJS (blazor.webassembly.js:1:3531)
at Object.Rt [as endInvokeDotNetFromJS] (blazor.webassembly.js:1:60566)
at Object.St [as invokeJSFromDotNet] (blazor.webassembly.js:1:60049)
at _mono_wasm_invoke_js_blazor (dotnet.6.0.10.ab6o20rtby.js:1:195300)
at 00971d2a:0x1a492
at 00971d2a:0xce60
at 00971d2a:0xbd73
at 00971d2a:0xabebf
at 00971d2a:0x6fc80
at 00971d2a:0x702ed

When using IClickBoundariesHandler and calling the following

await _clickHandler.RegisterClickBoundariesAsync(_clickDiv,
async (args) => await PageClick(args, false),
async (args) => await PageClick(args, true));
_clickSubscribed = true;

I then have the following code on IAsyncDisposable.DisposeAsync()

if (_clickSubscribed)
await _clickHandler.RemoveClickBoundariesAsync(_clickDiv);
await _clickHandler.DisposeAsync();

But when the page navigates away the error above is returned. Going back to the first page now doubles the error to 2 elements registered by the click event causing a memory leak

Uncaught (in promise) Error: System.ArgumentException: There is no tracked object with id '10'. Perhaps the DotNetObjectReference instance was already disposed. (Parameter 'dotNetObjectId')
at Microsoft.JSInterop.JSRuntime.GetObjectReference(Int64 dotNetObjectId)
at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.BeginInvokeDotNet(JSRuntime jsRuntime, DotNetInvocationInfo invocationInfo, String argsJson)
at Object.endInvokeDotNetFromJS (blazor.webassembly.js:1:3531)
at Object.Rt [as endInvokeDotNetFromJS] (blazor.webassembly.js:1:60566)
at Object.St [as invokeJSFromDotNet] (blazor.webassembly.js:1:60049)
at _mono_wasm_invoke_js_blazor (dotnet.6.0.10.ab6o20rtby.js:1:195300)
at 00971d2a:0x1a492
at 00971d2a:0xce60
at 00971d2a:0xbd73
at 00971d2a:0xabebf
at 00971d2a:0x6fc80
at 00971d2a:0x702ed

Can you please assit me in solving the issue

Console error as soon as I use Majorsoft.Blazor.Components.Modal

Adding Majorsoft.Blazor.Components.Modal NuGet package to my project and launching it gives the following (unclear) error in Console.

BTW, modals doesn't work either.

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'href')
    at tt (browserLink:77:10494)
    at nt (browserLink:77:10275)
    at tt (browserLink:77:10522)
    at nt (browserLink:77:10275)
    at tt (browserLink:77:10522)
    at it (browserLink:77:10854)
    at ct.ensureCssUpToDateAsync (browserLink:77:6622)
    at browserLink:71:3753
    at i (browserLink:71:785)
    at l (browserLink:71:862)
tt @ browserLink:77
nt @ browserLink:77
tt @ browserLink:77
nt @ browserLink:77
tt @ browserLink:77
it @ browserLink:77
ensureCssUpToDateAsync @ browserLink:77
(anonymes) @ browserLink:71
i @ browserLink:71
l @ browserLink:71
g @ browserLink:71
onConnected @ browserLink:71
(anonymes) @ browserLink:2845
Promise.then (asynchrone)
n.continueWith @ browserLink:67
u @ browserLink:2845
k @ browserLink:38
fireWith @ browserLink:38
fire @ browserLink:38
(anonymes) @ browserLink:64
dispatch @ browserLink:38
h @ browserLink:38
trigger @ browserLink:38
triggerHandler @ browserLink:38
(anonymes) @ browserLink:64
tryInitialize @ browserLink:64
processMessages @ browserLink:64
e.socket.e.socket.onmessage @ browserLink:64
browserLink:77 
        
       Uncaught (in promise) TypeError: Cannot read properties of null (reading 'href')
    at tt (browserLink:77:10494)
    at nt (browserLink:77:10275)
    at tt (browserLink:77:10522)
    at nt (browserLink:77:10275)
    at tt (browserLink:77:10522)
    at it (browserLink:77:10854)
    at ct.ensureCssUpToDateAsync (browserLink:77:6622)
    at browserLink:77:10693

GoogleMap API also offers restrictions on the map bounds it should be supported

Regarding this, the API also offers restrictions on the map bounds, so you can limit the map to a certain country for example. This is documented here.

I think this is might be quite easy to implement as it only requires changes in the window.initGoogleMaps function, specifically the map initializer.

It would be nice if the InnerElementReference would actually contain the map object so we can work with it....

Originally posted by @Grizzlly in #105 (comment)

InvalidOperationException: No JavaScript runtime found.

While everything works fine locally using both Debug and Release configuration, after using published app error InvalidOperationException: No JavaScript runtime found. appeares.

I am using .NET 6 and Typeahead component.

I suspect this is caused by .NET 6 trimming. Default settings are that "removes unused members from types". Since GetJSRuntime uses reflection to get JSRuntime trimmer can not see that JSRuntime property is used and removed it.

Disabled trimming solved this issue for me, but is not suitable as long term solution.

Question regarding IResizeHandler usage

Greetings,

First, let me say thank you so much for putting this library together.

I have a question regarding IResizeHandler, In the demo, the following code confuses me (ignoring the Page related event wiring)

protected override async Task OnAfterRenderAsync(bool firstRender)
{
	if (!firstRender)
		return;

	await ResizeEventHandler();
	_pageSize = await _resizeHandler.GetPageSizeAsync();
}

private async Task ResizeEventHandler()
{
	if (_resizeSubscribed)
	{
		await _resizeHandler.RemovePageResizeAsync(_resizeEventId);
		await _resizeHandler.RemoveResizeAsync(_resizeElement);
	}
	else
	{
		_resizeEventId = await _resizeHandler.RegisterPageResizeAsync(arg => Resized(arg, "Window resized"));
		await _resizeHandler.RegisterResizeAsync(_resizeElement, arg => Resized(arg, "Textarea resized"));
	}

	_resizeSubscribed = !_resizeSubscribed;
}

Comparing this code to:

protected override async Task OnAfterRenderAsync(bool isFirstRender)
{
    if (isFirstRender) return;

    await _resizeHandler.RegisterResizeAsync(_standardGraphContainer, arg => OnGraphResized(arg));

}

What are the side effects of simply wiring the event handler multiple times? I reviewed the library .js for that particular code, and it's already tossing out extraneous registration.

Just confused, and forgive me if I'm missing something obvious.

-joel

Typeahead: OnSelectedItemChanged gets triggered twice

OnSelectedItemChanged get's triggered twice when clicking an item with the mouse or using the Enter button:

    <TypeaheadInput id="in1" class="form-control bg-dark" placeholder="@("Add Item ...")"
                @ref="refAddItemInput"
                Data="DataProvider.Items"
                LabelPropertySelector="x => x.Name"
                @bind-Value="@AddItemInput"
                SelectOnBlur="false"
                OnInput="@(text => {SelectedItemToAdd = null; typeaheadInputValue = text;})"
                TItem="Item"
                OnSelectedItemChanged="OnAddItem">
        <ItemTemplate>
            <div>
                <label>@context.Name</label>
            </div>
        </ItemTemplate>
    </TypeaheadInput>
  ...
    private void OnAddItem(Item item)
    {
        Model.AddItemToActiveStash(item);
    }

_htmlNotificationPermission in mobile chrome is Denied

when request permission alwys denied how i solve

How to create a visible circle

Hello,

I would like to create a circle around coordinates to display the bounds of geofencing. How would I go about that? Also looking for Poly Line eventually.

GDPR Component (Blazor Server) - Unhandled exception on page reload

Using Blazor SERVER, reloading the page while using the GdprBanner component triggers an unhandled exception (below). This occurs even when the component is defined only once in MainLayout.razor. I think it may have to do with use of a static bool for the Initialized variable in GdprBanner.razor.

See: Blazor server-side and static fields

"Since the server is a single process, static field values are shared between all sessions. There are no app-domains in .NET core to isolate values between sessions. This behavior is inconsistent with client-side Blazor, where static fields behave like one might assume, one value per client application/session."

In other words, reloading the page is likely not disposing/resetting the static Initialized variable to false, yet it should not trigger an exception. Users reloading a page is a relatively common scenario.

Error:
ApplicationException: Component: 'GdprBanner' is not allowed to have multiple instances. Please define it one your e.g.: 'MainLayout.razor' or some common place.
Majorsoft.Blazor.Components.GdprConsent.GdprBanner.OnInitialized()
Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)
Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(ref DiffContext diffContext, int frameIndex)
Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(ref DiffContext diffContext, int frameIndex)
Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(ref DiffContext diffContext, int newFrameIndex)

guide me to Get action in serviceworker plz!

hi majorimi
in your blazor-component notification, i can make notification appearing with 2 actions( copy paste your code!). but when clicking on notification buttons nothing happened. i know i must get that actions(action1,action2) in service worker.but can you explain or reference me to document for understanding how to do things such as go to a page or etc when user clicked on action buttons in notification popup.
thanks alot

OnMarkerClicked

Hi,

Is there a possibility to add an EventCallback OnMarkerClicked?
With this, it would be possible to draw the GoogleMapInfoWindow after creating the marker only by the click, which would bring a significant improvement in performance when drawing several markers that need a more elaborate InfoWindow.

.NET 6 compability seems to be broken or I'm doing something wrong

Hello,

So I followed the tutorial on how to implement a modal/banner,

My Startup.cs:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Majorsoft.Blazor.Components.GdprConsent;

namespace _34digital.ruhr
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            //Register dependencies
            services.AddGdprConsent();
            services.AddRazorPages();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
            });
        }
    }
}

No errors appeared here. But as soon as I add the code for the banner/modal into _Layout.cshtml or any new shared razor page I get a lot of errors. The most common error type is Name X is not available in current context. Here's a screenshot of the errors marked.

I am using .NET Core 6 (Blazor) on Visual Studio 2022 Preview 3.1

P.S. yes I'm a beginner at .NET Core and C# in general

Support relative sizes for maps

Width and Height are defined in pixels, and there is no way to set a map to a relative value such as a percentage. This makes dynamically filling part of the screen with the map very difficult.

Typeahead styles missing?

Maybe I am doing something wrong, but my search results look like this:

    <div class="container pt-4">
        <div class="row justify-content-center">
            <div class="col-6 ">
                <div class="input-group">
                    <TypeaheadInput id="in1" class="form-control bg-dark" placeholder="@("Add Item ...")"
                                @ref="refAddItemInput"
                                Data="DataProvider.Items"
                                LabelPropertySelector="x => x.Name"
                                @bind-Value="@AddItemInput"
                                SelectOnBlur="false"
                                OnInput="@(text => {SelectedItemToAdd = null; typeaheadInputValue = text;})"
                                TItem="Item">
                        <ItemTemplate>
                            <div>
                                <label>@context.Name</label>
                            </div>
                        </ItemTemplate>
                    </TypeaheadInput>
                </div>
            </div>
        </div>
    </div>

Using V 1.50 with Visual Studio 2021 .NET 6.0 and Bootstrap 5

The razor css seems to get loaded:

Not using <div class="input-group"> changes the result to this:

Do I have to add my own styles to
a) Make it the same width as the input and
b) Make it dark style?
c) Make it work with input-group because I want to add a button to the control