Создавать и уничтожать динамически клиентский компонент Blazzor? - PullRequest
Новая
       39

Создавать и уничтожать динамически клиентский компонент Blazzor?

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

Я пытаюсь динамически создавать и уничтожать компонент Blazor, который я создал, например, одним щелчком мыши на кнопке внутри страницы, в любом случае я не могу найти какую-либо информацию или примеры по этой теме.

  • Как динамически создавать и уничтожать компонент Blazor?

Редактировать: Я добавил этот пример блока, чтобы уточнить, что я пытаюсь.

Это внутри "WindowContainer.razor" 

@using System
@implements IDisposable

@using System.Net.Http
@inject HttpClient Http

<div draggable="false" id="UIWindowContainer" class="ui-window-content">
    <div draggable="true" >
        @Caption
        <!-- Minimize -->


    </div>

    @ChildContent
</div>


@code
{
    public void Dispose()
    {
    }
}

Это внутри MainLayout.razor 

div class="main">
    <div class="top-row px-4">
        <button @onclick="onClose">Exit</button>

        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>

    <div class="content px-4">
        <WindowTest1.Components.WindowContainer @ref="sssss">test</WindowTest1.Components.WindowContainer>
    </div>
</div>
  • Какуничтожить WindowTest1.Components.WindowContainer?

1 Ответ

1 голос
/ 12 октября 2019

Если у вас есть только несколько элементов, вы сможете использовать поток if / else, чтобы указать дереву рендеринга показать или удалить компоненты. Если у вас есть список элементов, просто удалите элемент из списка и сделайте так, чтобы компонент повторно отобразил сам себя. Вот пример списка дел, который динамически добавляет / удаляет div. 

<input @bind-value="newItem"/><button @onclick="addItem" >Add Item</button>
@foreach(var item in ToDoList)
{
    <div>@item <button @onclick="(()=>removeItem(item))">Remove</button></div>
}



@code {
    string newItem = "";
    List<string> ToDoList = new List<string>() { "Get Eggs", "Get Milk", "Get Coffee", "Get More Coffee" };
    private void removeItem(string item)
    {
        ToDoList.Remove(item);
    }
    private void addItem()
    {
        ToDoList.Add(newItem);
        newItem = "";
    }

}

Конечно, вы можете заменить «div» на любой компонент блейзора, и он будет работать точно так же. Рендеринг дерева построен для эффективной обработки сценариев, таких как повторный рендеринг после изменения списка.

В реальном мире было бы более реалистично отслеживать изменения, используя свойство, а не просто добавлять и удалять элементы из списка. Таким образом, мы можем упаковать список наших изменений и отправить их на сервер, который по мере необходимости будет выдавать (добавлять, обновлять, удалять) команды. Посмотрите мое быстрое и грязное демо ниже:

Обратите внимание, что я добавил простой класс SimpleString с добавленным свойством ToDo. Я изменил цикл foreach, чтобы проверить свойство и построить разделы To-Do и Completed соответственно. 

<input @bind-value="newItem"/><button @onclick="addItem" >Add Item</button>

<h3>To-Do</h3>
@foreach(var item in ToDoList.Where(x=>x.ToDo))
{
    <div>@item.Value <button @onclick="(()=>removeItem(item))">Remove</button></div>
}

<h2>Completed</h2>
@foreach(var item in ToDoList.Where(x=>!x.ToDo))
{
    <p>@item.Value</p>
}


@code {
    class SimpleString
    {
        public string Value { get; set; }
        public bool ToDo { get; set; }
    }
    string newItem = "";
    bool showComponent = true;
    List<SimpleString> ToDoList = new List<SimpleString>() { new SimpleString { Value = "Get Eggs", ToDo = true }, new SimpleString { Value = "Get Milk", ToDo = true }, new SimpleString { Value = "Get Coffee", ToDo = true }, new SimpleString { Value = "Get More Coffee", ToDo = true } };
    private void removeItem(SimpleString item)
    {
        item.ToDo = false;
    }
    private void addItem()
    {
        ToDoList.Add(new SimpleString { Value = newItem, ToDo = true });
        newItem = "";
    }

}

Стоит также отметить, что компоненты Blazor могут реализовать интерфейс IDisposable в случае, если вам нужно задействовать «утилизацию» компонента для освобождения неуправляемых ресурсов. В Blazor компонент IDisposable инициирует удаление при удалении компонента из пользовательского интерфейса. В моем примере нет необходимости использовать IDisposable, но метод dispose будет вызван после завершения метода removeItem нажатием кнопки.

...