Search code examples
asp.netblazorblazor-webassemblyasp.net-blazor

How to change dynamically a blazor component


I need to change the items from a list, the list is a component that shows numbers, but its numbers depend from other component named component2, and if component2 change her value component1 should reset and change to the new numbers. component2 is an other list.

this is component1 :


<div>
    <div class="d-flex listbox-box" @onclick="DropDown" style="height:@(height)px !important; width:@(width)px !important;padding:0px;">

        @if (ItemIsSelected)
        {
            <IterationItem height="@height" width="@width" _Iteration="Iteration[SelectedIndex]" />
        }else{
        <div class="align-self-center" style="width:100%;">
            <div class="float-end">
                <div class=" icon-container" style="transform: rotate(@(rotation)deg) !important;">
                    <i class="bi bi-chevron-compact-down icon-listbox"/>
                </div>
            </div>
        </div>
        }


      </div>
    @if (ShowDropDown && Iteration != null)
    {
            <div class="example dropdown-listbox" style="width:@(width)px !important;height:@(height * 3)px !important">
            @for (int i = 0; i < Iteration.Length-1; i++)
            {
                var index = i;
                        <div id="@i" value="@SelectedIndex" @onclick='eventargs => HandleValueChange(eventargs,index)'>
                            <IterationItem height="@height" width="@width" _Iteration="Iteration[i]" />
                        </div>
                        <hr class="listbox-item-separator"/>
            }
            </div>
    }
</div>

@code {
    int rotation = 0;
    [Parameter] public int SelectedIndex { get; set; } = -1;
    [Parameter] public bool ShowDropDown { get; set; } = false;
    [Parameter] public bool ItemIsSelected { get; set; } = false;
    [Parameter] public Iteration[] Iteration { get; set; }
    public int height { get; set; } = 40;
    public int width { get; set; } = 120;


    private void DropDown()
    {
        ShowDropDown = ShowDropDown ? false : true;

        if (ShowDropDown)
        {
            rotation = 180;
        }
        else
        {
            rotation = 0;
        }
    }

    protected void HandleValueChange(MouseEventArgs evt, int index)
    {
        SelectedIndex = index;
        DropDown();
        ItemIsSelected = true;

    }


}

and this is the event that make swap the numbers:

    void ClickHandler(int num)
    {
        _modelValue = num;
        _selectedModel =   
     XqueryFunctions.CreatrModelById(_modelValue,"");
    }

and this is how im trying to change it right now :

<ListBoxIteration Iteration="@_selectedModel.Iterations" />

@code {
    private string ProyectName { get; set; } = "Fred";
    int _modelValue;
    Model _selectedModel = new ();
    void ClickHandler(int num)
    {
        _modelValue = num;
        _selectedModel =   
        XqueryFunctions.CreatrModelById(_modelValue,"");
    }
}


Solution

  • This code works, i had other problem. I should remove this post ?