Blazor two-way binding

Question

Blazor two-way binding

Bence Mihucza 1

I have a Blazor webassembly client. I want to bind a property to a checkbox type input field via a model class.

Model:

 public class Filter
 {
     public bool Selected { get; set; }
     public ItemType ItemType { get; }

     public Filter(ItemType itemType)
     {
         ItemType = itemType;
     }
    }
}

Binding:

@foreach (var armor in ArmorFilters)
{
    <div class="selector">
        <input type="checkbox" @bind-value="@armor.Selected"/>
        <span>@armor.ItemType.Name</span>
    </div>
}

ArmorFilters:

public IEnumerable<Filter> ArmorFilters { get; private set; } = Enumerable.Empty<Filter>();

My problem is the binding not working. When the checkbox is checked the setter of the Filter.Selected property will run, but when when I try to count the selected filters the result will be 0.

ArmorFilters.Count(af => af.Selected)

And when I update the Selected property from code it does not work as well.

foreach (var armor in ArmorFilters)
{
        armor.Selected = !armor.Selected;
}

Could you help me what am I doing wrong, please?

Anonymous

2021-06-21T02:46:10.98+00:00

Could you please tell me how you call ArmorFilters.Count(af => af.Selected) in your blazor application? I have written a test demo and it works well on my side. I could find this selected count has changed.
Bence Mihucza 1 Reputation point

2021-06-21T08:03:02.267+00:00
Thank you for your reply, I have already found the root cause.

The item of the ArmorFilters collection are selected from an another collection via LINQ. The problem was the .ToList() was missed at the end of the LINQ expression.

Wrong:

ArmorFilters = ItemTypes.Where(it => it.Group.Equals("Armor")).Select(it => new Filter(it));

Correct:

ArmorFilters = ItemTypes.Where(it => it.Group.Equals("Armor")).Select(it => new Filter(it)).ToList();

1 answer

Your answer

Anonymous

2021-06-21T02:46:10.98+00:00

Could you please tell me how you call ArmorFilters.Count(af => af.Selected) in your blazor application? I have written a test demo and it works well on my side. I could find this selected count has changed.
Bence Mihucza 1 Reputation point

2021-06-21T08:03:02.267+00:00

Thank you for your reply, I have already found the root cause.

The item of the ArmorFilters collection are selected from an another collection via LINQ. The problem was the .ToList() was missed at the end of the LINQ expression.

Wrong:

ArmorFilters = ItemTypes.Where(it => it.Group.Equals("Armor")).Select(it => new Filter(it));

Correct:

ArmorFilters = ItemTypes.Where(it => it.Group.Equals("Armor")).Select(it => new Filter(it)).ToList();

Answer 1

#region Radio Groups

builder.OpenComponent<MudRadioGroup<string>>(index);

builder.AddAttribute(index++, "T", "string");

builder.AddAttribute(index++, "Value", customDateRangeSelectionValue);

builder.AddAttribute(index++, "ValueChanged", EventCallback.Factory.Create<string>(this, newValue =>

{

   dynamicModel[customDateRangeSelection_FullPropertyName] = newValue;

   StateHasChanged();

   //HandleRadioGroupValueChanged(customDateRangeSelection_FullPropertyName, newValue);

}));

builder.AddAttribute(index++, "ChildContent", (RenderFragment)(innerBuilder1 =>

{

   #region Relative DateRange

   // First MudRadio T="bool" Option: Relative Date Range

   innerBuilder1.OpenElement(index++, "label");

   innerBuilder1.AddAttribute(index++, "class", "mud-radio-label RelativeDateRange");

   innerBuilder1.OpenComponent<MudRadio<string>>(index++);

   innerBuilder1.AddAttribute(index++, "T", "string");

   innerBuilder1.AddAttribute(index++, "Value", CustomReportHelper.RelativeDateRange);

   //innerBuilder1.AddAttribute(index++, "Option", CustomReportHelper.RelativeDateRange);

   ///Bind Child Control.

   innerBuilder1.AddAttribute(index++, "ChildContent", (RenderFragment)(innerNestedBuilder =>

   {

       innerNestedBuilder.OpenComponent<MudSelect<PresetDateRangesEnum>>(0);

       innerNestedBuilder.AddAttribute(1, "Variant", Variant.Text);

       innerNestedBuilder.AddAttribute(2, "T", "PresetDateRangesEnum");

       innerNestedBuilder.AddAttribute(3, "Value", enumPropertyValue); 

       innerNestedBuilder.AddAttribute(4, "MultiSelection", false);

       innerNestedBuilder.AddAttribute(5, "Label", propertyName);

       innerNestedBuilder.AddAttribute(6, "Style", "color: #1e88e5");

       innerNestedBuilder.AddAttribute(7, "ValueChanged", EventCallback.Factory.Create<DashboardPresets.PresetDateRangesEnum>(this, (newValue) => HandleRelativeValueChanged(fullPropertyName, newValue, relativeAlias: customDateRangeSelection_FullPropertyName)));

       innerNestedBuilder.AddAttribute(8, "ChildContent", (RenderFragment)(innerBuilder =>

       {

           int seq = 9;

           innerBuilder.OpenComponent<MudSelectItem<PresetDateRangesEnum>>(seq);

           innerBuilder.AddAttribute(seq++, "Value", PresetDateRangesEnum.Today);

           innerBuilder.AddContent(seq++, "Today");

           innerBuilder.CloseComponent(); // Close MudSelectItem for Today

           innerBuilder.OpenComponent<MudSelectItem<PresetDateRangesEnum>>(seq++);

           innerBuilder.AddAttribute(seq++, "Value", PresetDateRangesEnum.Yesterday);

           innerBuilder.AddContent(seq++, "Yesterday");

           innerBuilder.CloseComponent(); // Close MudSelectItem for Yesterday

           innerBuilder.OpenComponent<MudSelectItem<PresetDateRangesEnum>>(seq++);

           innerBuilder.AddAttribute(seq++, "Value", PresetDateRangesEnum.Tomorrow);

           innerBuilder.AddContent(seq++, "Tomorrow");

           innerBuilder.CloseComponent(); // Close MudSelectItem for Tomorrow

           innerBuilder.OpenComponent<MudSelectItem<PresetDateRangesEnum>>(seq++);

           innerBuilder.AddAttribute(seq++, "Value", PresetDateRangesEnum.ThisWeek);

           innerBuilder.AddContent(seq++, "This week");

           innerBuilder.CloseComponent(); // Close MudSelectItem for This week

           innerBuilder.OpenComponent<MudSelectItem<PresetDateRangesEnum>>(seq++);

           innerBuilder.AddAttribute(seq++, "Value", PresetDateRangesEnum.NextWeek);

           innerBuilder.AddContent(seq++, "Next week");

           innerBuilder.CloseComponent(); // Close MudSelectItem for Next week

           innerBuilder.OpenComponent<MudSelectItem<PresetDateRangesEnum>>(seq++);

           innerBuilder.AddAttribute(seq++, "Value", PresetDateRangesEnum.ThisMonth);

           innerBuilder.AddContent(seq++, "This Month");

           innerBuilder.CloseComponent(); // Close MudSelectItem for This Month

           innerBuilder.OpenComponent<MudSelectItem<PresetDateRangesEnum>>(seq++);

           innerBuilder.AddAttribute(seq++, "Value", PresetDateRangesEnum.LastWeek);

           innerBuilder.AddContent(seq++, "Last Week");

           innerBuilder.CloseComponent(); // Close MudSelectItem for Last week

           innerBuilder.OpenComponent<MudSelectItem<PresetDateRangesEnum>>(seq++);

           innerBuilder.AddAttribute(seq++, "Value", PresetDateRangesEnum.LastMonth);

           innerBuilder.AddContent(seq++, "Last Month");

           innerBuilder.CloseComponent(); // Close MudSelectItem for LastMonth

           innerBuilder.OpenComponent<MudSelectItem<PresetDateRangesEnum>>(seq++);

           innerBuilder.AddAttribute(seq++, "Value", PresetDateRangesEnum.ThisYear);

           innerBuilder.AddContent(seq++, "This Year");

           innerBuilder.CloseComponent(); // Close MudSelectItem for ThisYear

           innerBuilder.OpenComponent<MudSelectItem<PresetDateRangesEnum>>(seq++);

           innerBuilder.AddAttribute(seq++, "Value", PresetDateRangesEnum.LastYear);

           innerBuilder.AddContent(seq++, "Last Year");

           innerBuilder.CloseComponent(); // Close MudSelectItem for LastYear

           innerBuilder.OpenComponent<MudSelectItem<PresetDateRangesEnum>>(seq++);

           innerBuilder.AddAttribute(seq++, "Value", PresetDateRangesEnum.Last60Days);

           innerBuilder.AddContent(seq++, "Last 60 Days");

           innerBuilder.CloseComponent(); // Close MudSelectItem for Last60Days

           innerBuilder.OpenComponent<MudSelectItem<PresetDateRangesEnum>>(seq++);

           innerBuilder.AddAttribute(seq++, "Value", PresetDateRangesEnum.Last90Days);

           innerBuilder.AddContent(seq++, "Last 90 Days");

           innerBuilder.CloseComponent(); // Close MudSelectItem for Last90Days

           innerBuilder.OpenComponent<MudSelectItem<PresetDateRangesEnum>>(seq++);

           innerBuilder.AddAttribute(seq++, "Value", PresetDateRangesEnum.All);

           innerBuilder.AddContent(seq++, "All");

           innerBuilder.CloseComponent(); // Close MudSelectItem for All

       }));

       innerNestedBuilder.CloseComponent(); // Close MudSelect

   }));

   innerBuilder1.CloseComponent(); // Close MudRadio for Relative Date Range

                                   //innerBuilder1.AddContent(10, "Relative Date Range");

   innerBuilder1.CloseElement(); // Close label

   #endregion

   #region Custom DateRange

   // Second MudRadio T="bool" Option: Custom Date Range

   innerBuilder1.OpenElement(index++, "label");

   innerBuilder1.AddAttribute(index++, "class", "mud-radio-label CustomDateRange");

   innerBuilder1.OpenComponent<MudRadio<string>>(index++);

   innerBuilder1.AddAttribute(index++, "T", "string");

   innerBuilder1.AddAttribute(index++, "Value", CustomReportHelper.CustomDateRange);

   //innerBuilder1.AddAttribute(index++, "Option", CustomReportHelper.CustomDateRange);

   ///Bind Child Control.

   innerBuilder1.AddAttribute(index++, "ChildContent", (RenderFragment)(innerNestedBuilder =>

   {

       innerNestedBuilder.OpenComponent<MudDateRangePicker>(36);

       innerNestedBuilder.AddAttribute(37, "Label", "Custom range picker");

       innerNestedBuilder.AddAttribute(38, "DateRange", dateRangePropertyValue);

       innerNestedBuilder.AddAttribute(39, "DateRangeChanged", EventCallback.Factory.Create<DateRange>(this, (newValue) => HandleCustomDateRangePickerValueChanged(fullPropertyName, newValue, customAlias: customDateRangeSelection_FullPropertyName)));

       innerNestedBuilder.CloseComponent();

   }));

   innerBuilder1.CloseComponent(); // Close MudRadio for Custom Date Range

   innerBuilder1.CloseElement(); // Close label

   #endregion

}));

builder.CloseComponent(); // Close MudRadioGroup

#endregion

here is my radio group this will make my radio check or uncheck

Share via

Blazor two-way binding

1 answer

Your answer