fullstackhero / blazor-wasm-boilerplate

Clean Architecture Boilerplate Template for .NET 6.0 Blazor WebAssembly built for FSH WebAPI with the goodness of MudBlazor Components.

Home Page:https://fullstackhero.net/blazor-webassembly-boilerplate/general/getting-started/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

MudSwitch not working in EditFormContent

anasseb opened this issue · comments

Hello,

The behavior of the MudSwitch is not working inside the EditFormContent section.
The property that the @bind-Checked is linked to is not changing.

Exemple :
<MudSwitch @bind-Checked="@_checked3" ThumbIcon="@(_checked3==true ? Icons.Material.Filled.Done : Icons.Material.Filled.Close)" ThumbIconColor="@(_checked3==true ? Color.Success : Color.Error)">Changing</MudSwitch>

The code above when is inside the EditFormContent will not work, otherwise it's working when outside

@code{bool _checked3 = false;}

The _checked3 is always false even if the switch is done

Can you help me with that please ?
Thanks

I think you have to bind with something on context (which is of type TRequest)... the editformcontent is passed on to the addeditmodal so not sure it can access private fields on the component where your table is defined... It might with a well placed Context.AddEditModal.ForceRender() maybe? (Although probably not in your case... binding back to the property)

The EntityTable (and AddEditModal) are not really ready for prime time yet... I don't like the current design. I'll probably do it over in a while... I already have a much better understanding of the blazor and mudblazor innards now... just have to find time for it ;-)

Thanks for your response.
The problem that I have is that the model doesn't know if the value is changed.
For exemple hiding and showing a text field based on the switch value.
I already tested it with the context but nothing works.
It's really a serious problem, no one is able to use a switch or even a checkbox (not working too)

I liked the Blazor Hero project design, really simple to use and understanding

Hmm... There must be something else going on...

I've been working with checkboxes and all kinds of controls on the dialog without any problems.

I guess you're gonna have to show some code...

I did some changes, now I see the value changing, but ...

I have a text field that I want to enable and disable according to the switch value, that happen only if the switch lose focus 😔

<MudItem xs="12" md="6"> <MudSwitch @bind-Checked="@context.IsDelivery" ThumbIcon="@Icons.Filled.DeliveryDining" Color="Color.Primary" ThumbIconColor="Color.Dark">@(context.IsDelivery ? "Delivery" : "Not delivery")</MudSwitch> </MudItem>

<MudItem xs="12" md="12"> <MudTextField Disabled="@context.IsDelivery" For="@(() => context.DeliveryAddress)" @bind-Value="@context.DeliveryAddress" Label="@L["DeliveryAddress"]" Lines="3" /> </MudItem>

Seems strange indeed... like I said... I have dialogs with checkboxes that hide and show other things on the dialog without any issues... so still... gonna have to see more code to be able to help.
Maybe try with a regular MudTable (or FshTable) first, instead of EntityTable?

OMG finally I found how to solve it.

I removed the @bind-Checked and replace it with CheckedChanged with a function as a parameter, and I was forced to specify the return type with T="bool" (not working without it)

<MudItem xs="12" md="6"> <MudSwitch T="bool" CheckedChanged="ChangeDel" Checked="@context.IsDelivery" ThumbIcon="@Icons.Filled.DeliveryDining" Color="Color.Primary" ThumbIconColor="Color.Dark">@(context.IsDelivery ? "Delivery" : "Not delivery")</MudSwitch> </MudItem>

<MudItem xs="12" md="12"> <MudTextField Disabled="@context.IsDelivery" @bind-Value="@context.DeliveryAddress" Label="@L["DeliveryAddress"]" Lines="3" /> </MudItem>

public void ChangeDel() { Context.AddEditModal.RequestModel.IsDelivery = !Context.AddEditModal.RequestModel.IsDelivery; Context.AddEditModal.ForceRender(); }

With that, the context is updated without losing focus

Glad you found a solution!

Little github tip: you can add blocks of code with tripple backticks above and below. You can even specify c# right next to the top tripple backticks to make it colorful:

Console.WriteLine("Hello world!");

;-)

Thank you ☺