Как свернуть / развернуть компоненты Razor с помощью синтаксиса Blazor? - PullRequest
Новая
       67

Как свернуть / развернуть компоненты Razor с помощью синтаксиса Blazor?

0 голосов
/ 24 октября 2019

В настоящее время я внедряю форму для создания нового пользователя вместе с соответствующими правами пользователя. В этой форме у меня есть около 30 различных ИТ-систем, и если учетная запись пользователя должна иметь права доступа для этой конкретной ИТ-системы, я хочу предоставить администратору панель, в которую необходимо ввести дополнительную информацию об этой конкретной ИТ-системе. Я хочу реализовать это с помощью бритвенных компонентов. Пока у меня есть основной вид моей «новой пользовательской формы», а также бритвенный компонент для дополнительной информации о конкретной ИТ-системе. Нажав кнопку +, я хочу, чтобы компонент был виден / развернут прямо под ИТ-системой. Вот как это выглядит на данный момент:

enter image description here

новая форма пользователя: 

 <div class="row">
                <div class="col-sm-2 font-weight-bold">GOODWILL PKW/Smart</div>
                <div class="col-sm-2">
                    <label>Add</label>
                    <input type="checkbox" />
                </div>
                <div class="col-sm-2">
                    <label>Change</label>
                    <input type="checkbox" />
                </div>
                <div class="col-sm-2">
                    <label>Remove</label>
                    <input type="checkbox" />
                </div>
                <div class="col-sm-4">                    
                    <button @onclick="@collapseGoodwill">+</button>
                </div>

            </div>
            <ModalGoodwillPKW ></ModalGoodwillPKW>

@code {

public void collapseGoodwill() {     


        }

}

component : 

<div class="panel panel-default border">
    <div class="panel-heading alert-primary">
        <h3 class="panel-title">Goodwill PKW/smart</h3>
    </div>

    <div class="panel-body">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-2 font-weight-bold">Profile</div>

                <div class="col-sm-5">
                    <input type="checkbox" id="CB_c" />
                    <label>Salesman</label>
                </div>
                <div class="col-sm-5">
                    <input type="checkbox" id="CB_r" />
                    <label>Administrator</label>
                </div>                
            </div>
        </div>
    </div>
</div>

Обычно я бы использовал JQuery в методе «collapseGoodwill», чтобы добавить класс .collapse к этому элементу. Но так как я экспериментирую с Blazor, я хотел бы знать, есть ли на 100% бесплатный Javascript / JQuery способ сделать это.

Спасибо!

1 Ответ

2 голосов
/ 24 октября 2019

В Blazor вы всегда следуете шаблону: 

change data 
    --> new view rendered

Каждый раз, когда вы хотите изменить пользовательский интерфейс компонента извне, вы должны сделать это, изменив данные (модель / состояние / параметр / контекст /). ..).

Что касается этого сценария, вы можете добавить поле Collapsed, чтобы указать, свернута ли сейчас сама панель: 

<div class="panel panel-default border @Collapse">
    <div class="panel-heading alert-primary">
        <h3 class="panel-title">Goodwill PKW/smart</h3>
    </div>

    <div class="panel-body">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-2 font-weight-bold">Profile</div>

                <div class="col-sm-5">
                    <input type="checkbox" id="CB_c" />
                    <label>Salesman</label>
                </div>
                <div class="col-sm-5">
                    <input type="checkbox" id="CB_r" />
                    <label>Administrator</label>
                </div>                
            </div>
        </div>
    </div>
</div>

@code{
    [Parameter]
    public string Collapse{get;set;}="collapse"; // hide by default
}

И всякий раз, когда вы хотите свернуть ее,просто установите для этого параметра значение collapse: 

<div class="row">
    <div class="col-sm-2 font-weight-bold">GOODWILL PKW/Smart</div>
    <div class="col-sm-2">
        <label>Add</label>
        <input type="checkbox" />
    </div>
    <div class="col-sm-2">
        <label>Change</label>
        <input type="checkbox" />
    </div>
    <div class="col-sm-2">
        <label>Remove</label>
        <input type="checkbox" />
    </div>
    <div class="col-sm-4">                    
        <button @onclick="e => this.Collapsed = !this.Collapsed">
            @( this.Collapsed ? "+" : "-")
        </button>
    </div>
</div>
<ModalGoodwillPKW Collapse="@( this.Collapsed ? "collapse": "")" ></ModalGoodwillPKW>

@code {
    private bool Collapsed = true;
}

Демо:

enter image description here

[Редактировать]: мы можем даже реорганизовать приведенный выше код для предоставления меньшего количества информации, изменив поле со строкового на логическое.

ModalGoodwillPKW.razor: 

<div class="panel panel-default border <b>@(Collapsed? "collapse": "" )</b> ">
    <div class="panel-heading alert-primary">
        <h3 class="panel-title">Goodwill PKW/smart</h3>
    </div>

   ...


@code{
    [Parameter]
    <b>public bool Collapsed{get;set;}= true; </b>// hide by default
}

UserForm.razor: 

<div class="row">
    ...
    <div class="col-sm-4">                 
       <b> <button @onclick="e => this.Collapsed = !this.Collapsed">
            @( this.Collapsed ? "+" : "-")
        </button></b>
    </div>
</div>
<ModalGoodwillPKW <b>Collapsed="@Collapsed" </b>></ModalGoodwillPKW>

@code {
    private bool Collapsed = true;
}
...