majorimi / blazor-components Goto Github PK
View Code? Open in Web Editor NEWComponents collection and extensions for Blazor applications.
License: MIT License
Components collection and extensions for Blazor applications.
License: MIT License
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
}
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
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!
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
Are there plans to support marker clustering in Google Maps?
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.
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
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
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
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
when request permission alwys denied how i solve
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.
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)
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.
Does this work with Bootstrap 5?
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?
Windows notification timestamp is always January 1. (probably 1970-01-01)
Windows 11 22H2 Microsoft Edge 108.0.1462.54
HTML5 Notification.timestamp is number format.
A notification has an associated timestamp which is an EpochTimeStamp representing the time.
A number representing a timestamp, given as Unix time in milliseconds.
But this library pass timestamp as string format. ISO 8601
It will be great if an open source map provider like OpenStreetMap added to map control
Google Maps is not rendering when navigating from the component and back.
Steps:
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);
}
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.
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)
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
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)
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. ๐
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
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
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.
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?
Remove net5.0 target and replace with net6.0 target.
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).
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?
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.