Событие изменения флажка Blazor с параметром - PullRequest
Новая
       84

Событие изменения флажка Blazor с параметром

0 голосов
/ 18 июня 2020

У меня работает следующий код: 

@if (data == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <button class="btn btn-primary" @onclick="Save">Save all changes</button>

    <table class="table">
        <thead>
            <tr>
                <th>Concern ID</th>
                <th>CDC</th>
                <th>Context</th>
                <th>Reporting</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var c in data)
            {
                <tr>
                    <td>@c.ConcernId</td>
                    <td><input type="checkbox" @bind="@c.PassingAllowed" /></td>
                    <td><input type="checkbox" @bind="@c.ContextPassingAllowed" /></td>
                    <td><input type="checkbox" @bind="@c.ReportingPassingAllowed" /></td>
                </tr>
            }
        </tbody>
    </table>
}

@code{
    private ConcernData[] data;  

    protected override async Task OnInitializedAsync()
    {
        await GetData().ConfigureAwait(false);
    }

    private async Task GetData()
    {
        data = await Http.GetFromJsonAsync<ConcernData[]>("ConcernFilter").ConfigureAwait(false);
    }

    private async Task Save()
    {
        await Http.PostAsJsonAsync<ConcernData[]>("ConcernFilter/Update", data).ConfigureAwait(false);
    }

    private async Task Update(int concernId)
    {
        Console.Write(concernId);
    }
}

Однако он отправляет все данные (измененные и неизменные) обратно на сервер, где мне нужно выяснить (или просто обновить один за другим), который данные нуждаются в обновлении в базах данных.

Это кажется неправильным, поскольку я отправляю слишком много данных по сети и отправляю слишком много операторов обновления в базы данных (в данном случае 3).

Я могу придумать несколько способов решить эту проблему:

  1. на клиенте сравните измененный список с исходным списком и отправьте на сервер только те элементы, которые действительно нуждаются в обновлении.
  2. найдите способ написать в Blazor для флажка в таком списке, как вызвать метод Update и передать правильный идентификатор беспокойства в качестве параметра.

Я ищу помощь выполнить sh вариант 2.

1 Ответ

2 голосов
/ 18 июня 2020

В Blazor нет «magi c». У него нет возможности узнать, какие именно строки были обновлены, если вы не отслеживаете это. И это только половина дела. Ваш код - метод Save(), фактически отправляет на сервер полный массив data.

Похоже, что вы ищете, чтобы решить обе эти проблемы. Для этого вам понадобятся:

  1. Logi c для отслеживания измененных строк и возможного сохранения их в отдельном массиве
  2. Обновите метод Save, чтобы вместо этого использовать этот новый список , чтобы отправлять на сервер только данные из измененных строк, а не весь набор данных.

Часть, которая здесь c определена Blazor, - это то, как вы фактически обнаруживаете строки, которые были изменены . На самом деле вы можете упростить это, немного изменив свою модель данных, введя logi c отслеживания состояния и предоставив его через свойство. Следующее - только простая демонстрация: 

public class ConcernData
{
  internal bool StateChanged {get; private set;}

  public bool PassingAllowed
  {
    get => _passingAllowed;
    set
    {
      if (value != _passingAllowed)
      {
        _passingAllowed = value;
        StateChanged = true;
      }
    }
  }

  // Similar change detection logic goes for the rest of the properties
}

Обратите внимание, что это очень наивная реализация, которая не учитывает ситуации, когда пользователи снова меняют данные обратно на их исходное значение. Но это позволит вам обновить метод Save следующим образом: 

private async Task Save()
{
  await Http.PostAsJsonAsync<ConcernData[]>("ConcernFilter/Update", data.Where(c=>c.StateChanged)).ConfigureAwait(false);
}

Надеюсь, это поможет.

...