如何使用 Blazor 語法折疊/展開 Razor 組件？

我目前正在實施一個表單來創建一個新使用者以及他們各自的使用者權限。在這個表格中，我有大約 30 個不同的 IT 系統，如果使用者帳戶應該具有該特定 IT 系統的訪問權限，我想為管理員提供一個面板，其中必須輸入有關該特定 IT 系統的一些額外資訊。我想使用剃須刀組件來實現這一點。到目前為止，我所擁有的是“新使用者表單”的核心視圖以及特定 IT 系統附加資訊的剃須刀組件。通過點擊 + 按鈕，我希望組件在 IT 系統正下方可見/展開。這就是它到目前為止的樣子：

新使用者表單：

<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() {     


       }

}

組件：_

<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>

通常，我會在“collapseGoodwill”方法中使用 JQuery 來為這個元素添加一個 .collapse 類。但由於我正在嘗試使用 Blazor，我想知道是否有 100% Javascript /JQuery 免費的方式來執行此操作。

謝謝！

在 Blazor 中，您始終遵循以下模式：

change data 
   --> new view rendered

每當您想從外部更改組件的 UI 時，都應該通過更改數據（模型/狀態/參數/上下文/…）來實現。

對於這種情況，您可以添加一個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;
}

展示：

---

$$ Edit $$：我們甚至可以通過將欄位從字元串更改為布爾值來重構上面的程式碼以暴露更少的資訊。

ModalGoodwillPKW.razor: _

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

...


@程式碼{
[範圍]
   **public bool Collapsed{get;set;}= true;** // 預設隱藏
}

UserForm.razor: _

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

@程式碼 {
私人布爾折疊=真；
}

引用自：https://stackoverflow.com/questions/58538154