MudBlazor.Extensions from https://www.mudex.org is a small extension for MudBlazor from https://mudblazor.com
Home Page: http://www.mudex.org
License: MIT License
No response
After updating to 1.7.67 when using the MudExFileDisplayZip I get the following error
System.InvalidOperationException: Cannot provide a value for property 'MudExConfiguration' on type 'MudBlazor.Extensions.Components.MudExFileDisplayZip'. There is no registered service of type 'MudBlazor.Extensions.Options.MudExConfiguration'.
at Microsoft.AspNetCore.Components.ComponentFactory.<>c__DisplayClass7_0.<CreateInitializer>g__Initialize|1(IServiceProvider serviceProvider, IComponent component)
at Microsoft.AspNetCore.Components.ComponentFactory.PerformPropertyInjection(IServiceProvider serviceProvider, IComponent instance)
at Microsoft.AspNetCore.Components.ComponentFactory.InstantiateComponent(IServiceProvider serviceProvider, Type componentType)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateChildComponentOnFrame(RenderTreeFrame& frame, Int32 parentComponentId)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
This was working fine on an older version of the project so I'm not sure what may have changed between then and now. I dont see anything in the release notes or readme about it.
Zip content would render in the dialog.
No response
ServerRendered
No response
1.7.67
6.10.0
Chrome, Firefox
No response
No response
Hello,
I have this error on my server :
Error: Microsoft.JSInterop.JSException: Failed to fetch dynamically imported module: http://my-service/_content/MudBlazor.Extensions/js/components/MoveContent.min.js
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at BlazorJS.BlazorJSExtensions.ImportModuleAsync(IJSRuntime js, String file)
at BlazorJS.BlazorJSExtensions.ImportModuleAndCreateJsAsync(IJSRuntime js, String file, String jsCreateMethod, Object[] args)
at MudBlazor.Extensions.Components.Base.MudExJsRequiredBaseComponent`1.ImportModuleAndCreateJsAsync()
at MudBlazor.Extensions.Components.MoveContent.ImportModuleAndCreateJsAsync()
at MudBlazor.Extensions.Components.Base.MudExJsRequiredBaseComponent`1.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
runtime/sdk : .net 7
build chain: -c Release -r linux-x64 --self-contained false
Any idea? The MudExFileDisplay.min.js file doesn't seem to be a problem.
HI,
If you refresh page F5 the layout is not correct.
after refresh
Best reagrds
Hi,
Would it be possible to give a string property a readonly prefix?
I try to achieve the following:
I have two properties:
` meta.Property(m => m.Category)
.WithOrder(1)
.WithLabel(_localizer[LK.TranslationsFormCategory])
.RenderWith<CategorySelect, TranslationCategoryDTO>(c => c.Value)
.WrapInMudItem(i => i.xs = 12); ;
meta.Property(m => m.Key)
.WithOrder(2)
.WithLabel(_localizer[LK.TranslationsFormKey])
.WithAdditionalAttributes<MudTextField>(true, t => t.Variant = Variant.Filled);`
I would like to use the category selected as prefix for the key making them a unique combination. The user can only create the key.
So for example
Selected Category is registration.
The key text shows: registration_XXXXXX where the user can only change the XXXXX
Would this somehow be possible?
Thanks in advance
Dennis
Hi,
My app runs on that version and if I follow the instructions in the README my solution will not compile. Have you completely dropped support of .NET 6?
Thanks
No response
With Blazor server, when I try to use the same dialog across 2 different browser sessions, the dialog on the first browser session fails to load after the second session is used. If I refresh the first session, then that one can use the dialogs and now the second session cant. In 1.7.34 it's throwing the below error, but in 1.7.63 an error is never thrown, but the dialog never loads.
Microsoft.JSInterop.JSException: 'Cannot read properties of null (reading 'querySelector')
TypeError: Cannot read properties of null (reading 'querySelector')
at new MudBlazorExtensionHelper (https://localhost:7030/_content/MudBlazor.Extensions/MudBlazor.Extensions.lib.module.js:1:4120)
at Object.setNextDialogOptions (https://localhost:7030/_content/MudBlazor.Extensions/MudBlazor.Extensions.lib.module.js:1:10276)
at https://localhost:7030/_framework/blazor.server.js:1:3501
at new Promise (<anonymous>)
at kt.beginInvokeJSFromDotNet (https://localhost:7030/_framework/blazor.server.js:1:3475)
at https://localhost:7030/_framework/blazor.server.js:1:72077
at Array.forEach (<anonymous>)
at kt._invokeClientMethod (https://localhost:7030/_framework/blazor.server.js:1:72063)
at kt._processIncomingData (https://localhost:7030/_framework/blazor.server.js:1:70105)
at connection.onreceive (https://localhost:7030/_framework/blazor.server.js:1:64508)'
Here's the code to spawn the dialog:
<MudButton Class="d-flex align-center justify-center mud-width-full mud-paper mud-elevation-1 pa-4" @onclick="@(() => _dialogService.OpenFullScreenDialog<EnrolleeDialogList>(DialogPosition.BottomCenter, SharedDialogParameters))">
public static async void OpenFullScreenDialog<TDialogType>(
this IDialogService _dialogService,
DialogPosition destinationPosition,
DialogParameters dialogParameters = null,
Action<DialogResult> callback = null) where TDialogType : ComponentBase
{
var options = new DialogOptionsEx
{
MaximizeButton = false,
CloseButton = false,
//NoHeader = true,
Resizeable = false,
Position = destinationPosition,
Animations = new AnimationType[] { AnimationType.Slide },
AnimationDuration = TimeSpan.FromMilliseconds(500),
FullScreen = true,
FullWidth = true,
FullHeight = true,
DisablePositionMargin = true,
DisableSizeMarginY = true,
DisableSizeMarginX = true
};
if (dialogParameters == null)
{
dialogParameters = new DialogParameters();
}
var dialog = await _dialogService.ShowEx<TDialogType>(string.Empty, dialogParameters, options);
if (callback != null)
{
callback(await dialog.Result);
}
}
The dialog should appear no matter how many sessions try to use it
No response
Chrome
No response
No response
Because of MudBlazor/MudBlazor#4639 , the extension cannot run with the new version of mudblazor.
Please update the nuget package dependencies and recompile the release
No response
On page load:
After opening any file preview and then closing it:
And also, can you please add to documetation that ContentStream field on FileDisplay & FileDisplayZip needs NOT closed/disposed stream?
Thanks a lot for this library! I'm really enjoying it
No response
Chrome
No response
No response
Other
No response
Your code sample use the component properties grid which makes it very easy to try them. That is really great. But it is very hard to understand what to do it something does not work as expected and there is there code setting properties. After all I will not embed you components with the component grid but by setting properties in Razor/C# code.
Your code sample use the component properties grid which makes it very easy to try them. That is really great. But it is hard to understand what to do if something does not work as expected and there is code setting properties. After all I will not embed your components with the component grid but by setting properties in Razor/C# code. A nice approach would be to generate sample code for the component using the input to the component properties editor. That would be a KILLER feature!
Note: the component grid should be built-in into Visual Studio. In the god old days that was a key selling point for VB, Delphi and VS.
A nice approach would be to generate sample code for the component using the input to the component properties editor. That would be a KILLER feature!
Else provide manually crafter code samples
A nice approach would be to generate sample code for the component using the input to the component properties editor. That would be a KILLER feature!
Else provide manually crafter code samples
No response
Is is possible to add MudGrid support in context of a MudDialog. At present it seems a MudGrid within a MudDialog doesn't react to the dialog being resized.
When trying out the https://mudblazor.com/components/grid#grid-with-breakpoints example and also applying the resize ability (provided by this MudBlazor.Extensions library) the controls always stay in their original locations. Only resizing of the main browser document does the MudGrid on the dialog react and subsequently re-layout its controls.
We haven't decided on whether to use the MudGrid or our own flex based solution but would prefer the former approach. As always we will contribute to this issue should we find a solution ourselves.
Got a 'Could not find Microsoft.JSInterop.JSException: Could not find MudBlazorExtensions.setNextDialogOptions (MudBlazorExtenions was undefined)
I had to add this to my _Layout.cshtml
<script src="_content/MudBlazor.Extensions/js/mudBlazorExtensions.js"></script>To solve it. Strangely I did not run into this locally, only after release.
@inject IJSRuntime jsRuntime
...
var res = await DialogService
.ShowConfirmationDialogAsync("Confirmation",
$"Are you sure you want to remove?",
"Remove",
"No",
Icons.Material.Filled.Quiz,
new DialogOptionsEx() { JsRuntime = jsRuntime });
Hi,
Thanks for your corrections (1.7.28 & .29), I have another layout error, a new div appeared and breaks the full-height css property any idea ?
MudBlazor : 6.1.7
MudBlazor.Extensions : 1.7.29
Enhance component
MudExUploadEdit
MudExUploadEdit does not support custom validation on form submission.
Add custom validation to the components. Ideally, they would extend MudFormComponent and so integrate with other MudBlazor form components. For example, I want to add validation such that the user must upload a specific set of 3 files with specific names and form validation should fail if that's not the case when they hit submit.
MudBlazor FileUpload.
I've created a wrapper component to add validation to arbitrary components. This works well enough, but ideally the extension components would act like MudBlazor Form components on its own. Here's the code I used if interested in implementing this request. A real solution would likely have the components inherit from MudFormComponent to integrate with mud forms and call validation whenever the user adds a file (not after the file is fully read from like this workaround).
ValidationWrapper.razor
@typeparam T
@inherits MudFormComponent<T, string>
<MudInputControl Class="@Class" Style="@Style" Error="HasErrors" ErrorText="@GetErrorText()" Required="@Required">
<InputContent>
@ChildContent
</InputContent>
</MudInputControl>
@code {
/// <summary>
/// The value of the ValidationWrapper component. This will be passed to the set validation function.
/// </summary>
[Parameter]
[EditorRequired]
public T? Value
{
get => _value;
set
{
if (_value != null && _value.Equals(value))
{
return;
}
_value = value;
}
}
public ValidationWrapper() : base(new DefaultConverter<T>()) { }
[Parameter]
public RenderFragment? ChildContent { get; set; }
}
And then the usage:
<ValidationWrapper @ref="FileUploadValidator"
T="IReadOnlyList<UploadableFile>"
Required="true"
Value="@Files"
Class="fileUploadContainer"
Validation="@FilesValidator">
<MudExUploadEdit @ref="UploadComponent"
T="UploadableFile"
Extensions="@(new string[]{".xlsx"})"
TextUploadFile="Click here to upload files"
TextDropZone="Drag and Drop files here"
ColorizeIcons="true"
MinHeight="80"
AllowFolderUpload="false"
AllowExternalUrl="false"
Class="MudExUploadExCustom"
AllowRename="true"
UploadRequests="@Files"
UploadRequestsChanged="OnFilesChanged"
AllowPreview="false"></MudExUploadEdit>
</ValidationWrapper>
@code {
private ValidationWrapper<IReadOnlyList<UploadableFile>> FileUploadValidator = default!;
private List<UploadableFile> Files = new();
private Func<IReadOnlyList<UploadableFile>, string?> FilesValidator { get; private set; }
private Task OnFilesChanged(IList<UploadableFile> files)
{
return FileUploadValidator.Validate();
}
}
No response
On the latest version of VS 2022, I create a project from the MudBlazor template, install MudBlazorExtensions from the Nuget package on it, and call the display method from the ShowEx extension, but I get the error
"Value cannot be null. (Parameter 'jsRuntime')"
Help me learn how to use your extension, maybe I'm not specifying the necessary link to the JS of your extension or somethin
Using it in new project gives an error when fluent validation is already installed.
I have a table where each cell uses a MudExPopover for editing the cell value.
I noticed that if the parameters on the page have changed several times, then the page begins to behave very slowly.
I've tracked this issue down to the MudExPopover and the fact that each time the component re-renders, more and more click event listeners are getting added to the document.
I have enabled 'DisposeEvent' on the component but that doesn't appear to solve the issue, in fact it only serves to cause the following error to appear in the browser log each time the popover component is rendered:
Uncaught (in promise) Error: System.ArgumentException: There is no tracked object with id '7'. 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 kt.endInvokeDotNetFromJS (blazor.server.js:1:3700) at blazor.server.js:1:72077 at Array.forEach (<anonymous>) at kt._invokeClientMethod (blazor.server.js:1:72063) at kt._processIncomingData (blazor.server.js:1:70105) at connection.onreceive (blazor.server.js:1:64508) at o.onmessage (blazor.server.js:1:48842)
Refreshing the page solves the problem as all of the JS events will be cleared.
Using the command getEventListeners(document); in the browser console shows that the list of 'click' listeners increases with each render of the popover.
Disposing of a MudExPopover component should be properly disposing the JS click event.
Screenshot of browser log error
Screenshot of usage of MudExPopover in code
Screenshot of JS function adding click event listener
https://trymudex.azurewebsites.net/snippet/wkQHvbEwoRUrrWnK
ServerRendered
No response
1.7.75
6.11.0
Edge
No response
No response
After upgrading to 1.7.68, we are now seeing the following exception at application startup. (When we roll back to 1.7.67, we do not see this exception).
System.AggregateException
HResult=0x80131500
Message=Some services are not able to be constructed (Error while validating the service descriptor 'ServiceType: MudBlazor.Extensions.Services.MudExFileService Lifetime: Transient ImplementationType: MudBlazor.Extensions.Services.MudExFileService': Unable to resolve service for type 'System.Net.Http.HttpClient' while attempting to activate 'MudBlazor.Extensions.Services.MudExFileService'.) (Error while validating the service descriptor 'ServiceType: MudBlazor.Extensions.Services.MudExFileService Lifetime: Transient ImplementationType: MudBlazor.Extensions.Services.MudExFileService': Unable to resolve service for type 'System.Net.Http.HttpClient' while attempting to activate 'MudBlazor.Extensions.Services.MudExFileService'.)
Source=Microsoft.Extensions.DependencyInjection
StackTrace:
at Microsoft.Extensions.DependencyInjection.ServiceProvider..ctor(ICollection`1 serviceDescriptors, ServiceProviderOptions options)
at Microsoft.Extensions.DependencyInjection.ServiceCollectionContainerBuilderExtensions.BuildServiceProvider(IServiceCollection services, ServiceProviderOptions options)
at Microsoft.Extensions.Hosting.HostApplicationBuilder.Build()
at Microsoft.AspNetCore.Builder.WebApplicationBuilder.Build()
at Program.<Main>$(String[] args) in C:\temp\TestApp3\Program.cs:line 11
This exception was originally thrown at this call stack:
[External Code]
Inner Exception 1:
InvalidOperationException: Error while validating the service descriptor 'ServiceType: MudBlazor.Extensions.Services.MudExFileService Lifetime: Transient ImplementationType: MudBlazor.Extensions.Services.MudExFileService': Unable to resolve service for type 'System.Net.Http.HttpClient' while attempting to activate 'MudBlazor.Extensions.Services.MudExFileService'.
Inner Exception 2:
InvalidOperationException: Unable to resolve service for type 'System.Net.Http.HttpClient' while attempting to activate 'MudBlazor.Extensions.Services.MudExFileService'.
using MudBlazor.Extensions;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddHttpContextAccessor();
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddMudExtensions();
builder.Services.AddMudServicesWithExtensions();
var app = builder.Build();
app.UseDeveloperExceptionPage();
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();
No exception
ServerRendered
No response
1.7.68
6.10.0
Chrome
No response
Hi,
Thank you for this great extension.
I have a small issue and I can't figure it out myself. I'm using the MudExObjectEdit in a dialog.
How would I be able to change the text on the cancel and submit button as well as the color of the submit when I use dialogService.EditObject?
I tried already a lot with adding parameters like:
var parameters = new DialogParameters();
parameters.Add("CancelText", _localizer[LK.Global_DialogCancelText].Value);
parameters.Add("SubmitText", _localizer[LK.Global_DialogSubmitText].Value);
parameters.Add("Color", Color.Primary);
But it doesn't seem to find the values I need. Could you help me?
Thanks,
Dennis
No response
I recently updated my project from v1.7.34 to v1.7.63 both are using MudBlazor 6.7.0, but the issue also happens in 6.2.0.
When I go to open any dialog, using the same code as I had before, I am getting the following error:
Microsoft.JSInterop.JSException: 'Cannot read properties of null (reading 'innerText')
TypeError: Cannot read properties of null (reading 'innerText')
at MudExDialogHandler._updateDialog (https://localhost:7030/_content/MudBlazor.Extensions/MudBlazor.Extensions.lib.module.js:1:9236)
at new MudExDialogHandlerBase (https://localhost:7030/_content/MudBlazor.Extensions/MudBlazor.Extensions.lib.module.js:1:7904)
at new MudExDialogHandler (https://localhost:7030/_content/MudBlazor.Extensions/MudBlazor.Extensions.lib.module.js:1:12239)
at new MudBlazorExtensionHelper (https://localhost:7030/_content/MudBlazor.Extensions/MudBlazor.Extensions.lib.module.js:1:18331)
at Object.setNextDialogOptions (https://localhost:7030/_content/MudBlazor.Extensions/MudBlazor.Extensions.lib.module.js:1:18924)
at https://localhost:7030/_framework/blazor.server.js:1:3501
at new Promise (<anonymous>)
at kt.beginInvokeJSFromDotNet (https://localhost:7030/_framework/blazor.server.js:1:3475)
at https://localhost:7030/_framework/blazor.server.js:1:72077
at Array.forEach (<anonymous>)'
I don't think I'm missing anything that would lead to this error, here is the method I use to show the popup:
public async void OpenFullScreenDialog<TDialogType>(
DialogPosition destinationPosition,
DialogParameters dialogParameters = null,
Action<DialogResult> callback = null) where TDialogType : ComponentBase
{
var options = new DialogOptionsEx
{
MaximizeButton = false,
CloseButton = false,
NoHeader = true,
Resizeable = false,
Position = destinationPosition,
Animations = new AnimationType[] { AnimationType.Slide },
AnimationDuration = TimeSpan.FromMilliseconds(500),
FullScreen = true,
FullWidth = true,
FullHeight = true,
DisablePositionMargin = true,
DisableSizeMarginY = true,
DisableSizeMarginX = true
};
if (dialogParameters == null)
{
dialogParameters = new DialogParameters();
}
var dialog = await _dialogService.ShowEx<TDialogType>("Test", dialogParameters, options);
if (callback != null)
{
callback(await dialog.Result);
}
}
And just in case it's something new on the dialog that I'm missing, here is one of the razor components that it's trying to show:
<MudDialog Class="mud-ex-dialog-initial">
<DialogContent>
<MudStack Class="pt-3" Justify="Justify.FlexStart" Row="true">
<MudItem Class="pl-4">
<MudIconButton Icon="@Icons.Material.Filled.Close" Variant="Variant.Outlined" Size="Size.Medium" OnClick="Close" />
</MudItem>
<MudText Class="pl-4" Typo="Typo.h4">Room Status</MudText>
</MudStack>
<MudContainer Style="width:50vw; overflow-y: scroll">
<MudAlert Severity="Severity.Normal">The reactor type is RBMK-1000</MudAlert>
<MudAlert Severity="Severity.Info">The reactor was fired up successfully</MudAlert>
<MudAlert Severity="Severity.Success">The reactor is running at optimum temperature</MudAlert>
<MudAlert Severity="Severity.Warning">The reactor temperature exceeds the optimal range</MudAlert>
<MudAlert Severity="Severity.Error">Meltdown is imminent</MudAlert>
</MudContainer>
</DialogContent>
</MudDialog>
@code
{
[CascadingParameter]
MudDialogInstance MudDialog { get; set; }
private void Close()
{
MudDialog.Close();
}
}
Would have expected the dialog to animate in like it does in v1.7.34
No response
Chrome
No response
No response
MudBlazor 6.1.6
MudBlazor.Extensions 1.7.27
Crashes on startup AddMudExtensions()
Unable to load one or more of the requested types.
Method 'get_RenderCompleteTaskCompletionSource' in type 'MudBlazor.Extensions.Core.MudExDialogRef`1' from assembly 'MudBlazor.Extensions, Version=1.7.0.0, Culture=neutral, PublicKeyToken=null' does not have an implementation.
Enhance component
MudExUploadEdit
No response
When you upload a larger file or upload many files the component "hangs" and there is no update that the files are being added to the component. Users may try to re-upload because of no visual indication. Maybe the file can show up as soon as it is added then instead of the rename/delete icons it has a loading wheel until it is finished?
No response
No response
No response
Created a MudDialog containing only a MudExUploadEdit. Upon trying to open said dialog, the screen darkens as if a dialog was opened, but nothing renders. Tried testing with another component (Mud DataGrid) within the dialog, same issue. Removing the MudExUploadEdit and just leaving the DataGrid made the dialog render correctly. The MudExUploadEdit uses the following definition (also included in screenshots):
<MudExUploadEdit MimeTypes="@mimeTypes" TextDropZone="Drop Files Here or Click Upload Files" T="UploadableFile"
DropZoneClickAction="DropZoneClickAction.UploadFile" ShowFileUploadButton="false" @ref="component" MinHeight="68"
AllowFolderUpload="false" AllowExternalUrl="false" Style="border: grey 3px dashed;" AllowRename="true"
ShowProgressForLoadingData="true" ColorizeIcons="true">
</MudExUploadEdit>
//Which has MudExUploadEdit<UploadableFile> component; and a string[] of valid mimeTypes in the code block.
The dialog should display the MudExUploadEdit, either alone or with another component within the dialog.
No response
ServerRendered
No response
1.7.76
6.11.0
Chrome
No response
No response
Is there a way to apply the MudBlazor.Extensions functionality for an Inline MudBlazor Dialog? If not, are there any future plans for adding such support or are the static IDialogService.ShowEx methods the only planned supported technique?
Hi,
how can i customize the edit form for MudExObjectEditForm?
Best regards
HI,
I have object with one or more collections.
It is possible to customize dialog size?
It is possible to customize any property of the object contained in the collection?
Best regards
While poping-up multiple non-modal dialog windows and closing them in different order than it was opened causes user to click two times on X icon (or close button) and also new dialog reappears...
Closing multiple dialog windows should not be dependent on order of theirs opening and aslo should not cause automatic reopening of a new dialog...
ServerRendered
No response
1.7.66
6.9.0
Chrome
No response
No response
No response
Hello, Florian -- Since the 1.7.64 release, we are now seeing a Microsoft.JSInterop.JSDisconnectedException message in the browser console when we call DialogService.ShowEx after a hard page refresh.
var options = new DialogOptionsEx { CloseOnEscapeKey = true, DragMode = MudDialogDragMode.Simple, CloseButton = true };
await DialogService.ShowEx<TestDialog>("Test Dialog", options);
(Admittedly this sounds like a strange scenario. We do these hard page refreshes when we are editing code / hot module reloading.)
Suspect it has something to do with recent changes around InitializeMudBlazorExtensionsAsync()...the call to which we did not remove, even though it is marked as obsolete.
If we do remove the InitializeMudBlazorExtensionsAsync() then it appears we have to pass a JsRuntime reference as part of DialogOptionsEx (which we actually tried, but it still resulted in this exception).
Error: Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at MudBlazor.Extensions.Helper.JsRuntimeExtensions.IsNamespaceAvailableAsync(IJSRuntime js, String ns)
at MudBlazor.Extensions.Helper.JsImportHelper.InitializeMudBlazorExtensionsCoreAsync(IJSRuntime runtime, Boolean force)
at MudBlazor.Extensions.Helper.JsImportHelper.GetInitializedJsRuntime(Object field, IJSRuntime fallback)
at MudBlazor.Extensions.DialogServiceExt.InjectOptionsAsync(IDialogReference dialogReference, DialogOptionsEx options)
at MudBlazor.Extensions.DialogServiceExt.InjectOptionsAsync(Task`1 dialogReference, DialogOptionsEx options)
at MudBlazor.Extensions.DialogServiceExt.ShowAndInject(IDialogService dialogService, Type type, String title, DialogOptionsEx options, DialogParameters parameters)
at MudBlazor.Extensions.Core.MudExDialogReferenceExtensions.AsMudExDialogReferenceAsync[TComponent](Task`1 dialogReference)
at TestApp.Index.OnOpenTestDialogClick() in C:\temp\TestApp\Index.razor.cs:line 15
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at MudBlazor.MudBaseButton.OnClickHandler(MouseEventArgs ev)
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
We are going to pin to 1.7.63 for the time being.
I will try to create a minimal sample application and upload it here soon.
Thanks for all your work on this project. It is much appreciated.
No exception
No response
Chrome
No response
I followed the readme trying to use the dialog extensions but I cannot get it to work.
Should I also add your js and css files in my _Host.cshtml / index.html?
Enhance component
MudExUploadEdit
If you have the drag & drop area it makes sense to the user to be able to click on that same area to upload a file. (Click or drop files here)
When you click on the drop area it pulls up the file upload just like you clicked on the Upload File button.
JQuery Dropzone
No response
No response
Hello,
I find your project awesome, but i am faced to a problem when i have tried the MudExObjectEditForm
here you are the code
<MudExObjectEditForm OnValidSubmit="@OnSubmit" Value="@MyModel"></MudExObjectEditForm>
@code{
private Model MyModel { get; set; } = new Model();
private void OnSubmit()
{
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
await JsRuntime.InitializeMudBlazorExtensionsAsync();
await base.OnAfterRenderAsync(firstRender);
}
public class Model
{
public int Id{ get; set; }
public string Name{ get; set; }
public DateTime CreadtionDate{ get; set; }
public bool Activate{ get; set; }
}
}I have followed correctly and i have done it several times but i got this error each time i load the page having the form.
I got this error
blazor.webview.js:1
Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
Error: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
at https://0.0.0.0/_framework/blazor.webview.js:1:328
at Array.forEach (<anonymous>)
at s.findFunction (https://0.0.0.0/_framework/blazor.webview.js:1:296)
at S (https://0.0.0.0/_framework/blazor.webview.js:1:2442)
at https://0.0.0.0/_framework/blazor.webview.js:1:3330
at new Promise (<anonymous>)
at beginInvokeJSFromDotNet (https://0.0.0.0/_framework/blazor.webview.js:1:3311)
at https://0.0.0.0/_framework/blazor.webview.js:1:42799
at EventTarget.<anonymous> (<anonymous>:7:62)
at EmbeddedBrowserWebView.<anonymous> (<anonymous>:1:37578)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at MudBlazor.MudCollapse.UpdateHeight()
at MudBlazor.MudCollapse.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
How to reproduce:
Hope it helps, thanks for your work :)
Not sure where else to ask this
@fgilde nice work on the components!
I am not sure if you have seen what @mckaragoz has done with the codebeam Mudblazor extensions but I think it would be great to see them combined.
https://github.com/CodeBeamOrg/CodeBeam.MudBlazor.Extensions
I appreciate the knowledge sharing by the community.
No response
MudBlazor: 6.8.0
Ex: 1.7.64
When I try to upload files (or even select them), server freezes and after some time this happens:
It happens always besides when I try to upload this one file, but even it breaks everything:
It saves same way then:
My code:
<MudExUploadEdit @bind-UploadRequests="files" MimeTypes="@mimeTypes" T="UploadableFile" Style="height: 400px; max-height: 400px; width: 800px" AllowMultiple="true" />
<MudButton OnClick="@UploadFiles">upload</MudButton>
@code {
private string[] mimeTypes =
{
"image/*"
};
IList<UploadableFile> files;
private async Task UploadFiles()
{
string fileStorage = Configuration.GetValue<string>("FileStorage")!;
foreach (var file in files)
{
Directory.CreateDirectory(Path.Combine(fileStorage, "CARD"));
string newName = Path.GetRandomFileName();
string newFileName = Path.ChangeExtension(newName, Path.GetExtension(file.FileName));
string path = Path.Combine(fileStorage, "CARD", newFileName);
await File.WriteAllBytesAsync(path, file.Data);
}
}
Edit: I managed to upload one webp file too somehow, but others don't work.
To not freeze
No response
Chrome
No response
No response
No response
I have a Blazor Server with a upload folder where files are uploaded.
If i want to display one of these files from stream using the following command:
await DialogService.ShowFileDisplayDialog(stream, uploadedFile.uploaded_file_orig_file_name, mimetype, HandleContentError, ex => ex.JsRuntime = JS);
the display control shows as follows:
I checked if the stream is available, which it is.
Unfortunately i cannot use the newest version of MudEx because of a bug in MudBlazor since 6.5.
The file should be displayed.
No response
Other
Server
1.7.61
6.4.1
Chrome
No response
No response
Hello,
I've been fiddling around with this extension now for a whole day and I'm really liking it so far. I have a product owner who insists on having dialogs fly in from from different sides depending on different scenarios. The dialog needs to fly in from a given side and take up the entire screen until the user closes it.
This extension is almost perfect in meeting that requirement, but there's some extra space that appears on the sides that I can't figure out how to resolve without some JS/CSS hacks. When setting the DialogOptionsEx Position to anything other than custom or center, there's always a 32 pixel space on the top/bottom/left/right depending on what the position is set to. Setting DisableSizeMarginY, DisableSizeMarginX, and DisablePositionMargin aren't having an effect if the animation is moving along that axis.
For example, setting the animation to SlideIn, FullScreen to true, DisableSizeMarginY to true, and Position to BottomCenter leaves a 32 pixel gap at the bottom and pushes the top side of the dialog off screen by the same amount. Alternatively, setting the animation to SlideIn, FullScreen to true, DisableSizeMarginX to true, and Position to CenterRight leaves a 32 pixel gap on the right side pushing content off screen to the left. This happens no matter the animation, and the same gap is present whether fullscreen is true or false. Setting the Position to Center resolves the offsetting issue but then the animations don't move in the desired directions.
I could be missing something, as there's a GIF on the dialog section of the readme that shows a dialog flying out in the way I would expect but with no gap on the side. Here's the function I've been testing with:
private void OpenFullScreenDialog<TDialogType>(string title = "") where TDialogType : ComponentBase
{
var options = new DialogOptionsEx
{
MaximizeButton = true,
CloseButton = true,
Position = DialogPosition.CenterRight,
Animations = new AnimationType[] { AnimationType.SlideIn },
AnimationDuration = TimeSpan.FromMilliseconds(500),
FullScreen = true,
DisableSizeMarginX = true,
};
_dialogService.ShowEx<TDialogType>(title, options);
}
Project is a Blazor Server.
When opening a dialog with basic settings from mudex.org, dialog first shows with zoom transition, disappears and then shows again with actual configured animation.
Code looks as follows:
public DialogOptionsEx Options { get; set; } = new()
{
MaximizeButton = true,
CloseButton = true,
FullHeight = true,
CloseOnEscapeKey = true,
MaxWidth = MaxWidth.Medium,
FullWidth = true,
DragMode = MudDialogDragMode.Simple,
Animations = new[] { AnimationType.SlideIn },
Position = DialogPosition.CenterRight,
DisableSizeMarginY = true,
DisablePositionMargin = true
};
public async Task OpenMudExDialog()
{
await Task.Delay(1000);
IDialogReference dlgReference = await DialogService.ShowEx<DlgYesNoPrompt>("Simple Dialog", dialog => { dialog.ContentText = "Hello from dialog sample page"; }, Options);
}Dialog should not be shown using the MudBlazor standard animation before getting shown correctly
No response
ServerRendered
No response
1.7.68-prev-2309182049-stream-and-blob
6.10.0
Chrome
No response
No response
No response
We have run into problems being able to consistently be able to get focus into the Filter textbox when using MudExChipSelect.
Your response from another (unrelated) issue:
I will have a look at it. I know MudBlazor have had a bug and it was solved. You can see it here its working https://cae4f752.mudblazor-extensions.pages.dev/chip-select but now it looks like the Bug is back and now here its no more working https://www.mudex.org/chip-select. But I didnt changed anything in MudExChipSelect or dependent logic.
Maybe I need to rebuild the chipselect. However can I then close this issue? For the chip select you can create a new one.
Focus is given to the Filter textbox when clicking on it
No response
Chrome
No response
Enhance component
MudExUploadEdit
Before the latest release, UploadRequestsChanged would be called when data for files was available. Now, the files appear immediately with loading symbols, and UploadRequestsChanged is called before the data is available. I like the loading symbols, but there's no way of knowing when the data is available now.
Another callback for when files have available data.
Prior versions of this component.
No response
No response
blazor.webview.js:1
Could not find 'BlazorJS.addCss' ('BlazorJS' was undefined).
Error: Could not find 'BlazorJS.addCss' ('BlazorJS' was undefined).
at https://0.0.0.0/_framework/blazor.webview.js:1:328
at Array.forEach ()
at s.findFunction (https://0.0.0.0/_framework/blazor.webview.js:1:296)
at S (https://0.0.0.0/_framework/blazor.webview.js:1:2437)
at https://0.0.0.0/_framework/blazor.webview.js:1:3325
at new Promise ()
at beginInvokeJSFromDotNet (https://0.0.0.0/_framework/blazor.webview.js:1:3306)
at https://0.0.0.0/_framework/blazor.webview.js:1:40711
at EventTarget. (:7:62)
at EmbeddedBrowserWebView. (:1:38156)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at BlazorJS.BlazorJSExtensions.AddCss(IJSRuntime runtime, String cssContent)
at MudBlazor.Extensions.Helper.JsImportHelper.InitializeMudBlazorExtensionsAsync(IJSRuntime runtime, Boolean force)
at AerosealUI.Shared.MainLayout.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
This is what an input field looks like as you type without your library.
So with the extension
Maybe I'm doing something wrong.
If I remove this call from the project, everything is the same as before.
await Js.InitializeMudBlazorExtensionsAsync();
My browse is chrom
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.