Блог

У меня есть следующий код в серверном приложении Blazor:

 <div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Email</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var applicationUser in ApplicationUsers)
            {
                string userId = applicationUser.Id;
                Guid? personId = applicationUser.PersonId;

                <tr>
                    <td>@applicationUser.Email</td>
                    <td>@applicationUser.PersonName</td>
                    @if (personId != null)
                    {
                        <td>
                            <button class="btn btn-block btn-primary" @onclick="() => ShowEditPersonDialog(personId)" style="color: rgb(255, 255, 255); background-color: rgb(49, 56, 215);" @type="button">Edit Person</button>
                        </td>
                    }
                </tr>
            }
        </tbody>
    </table>
</div>
  

Однако это:

@onclick="() => ShowEditPersonDialog(personId)"

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

Я пробовал:

• @onclick="() => ShowEditPersonDialog(personId)" — исключение, показанное выше
• @onclick="(e) => ShowEditPersonDialog(e, personId)" — исключение, показанное выше
• @onclick="e => ShowEditPersonDialog(e, personId)" — исключение, показанное выше
• @onclick="@(e => ShowEditPersonDialog(e, personId))" — исключение, показанное выше
• @onclick="(e) => ShowEditPersonDialog(e)" — исключение, показанное выше
• @onclick="e => ShowEditPersonDialog(e)" — исключение, показанное выше
• @onclick="@(e => ShowEditPersonDialog(e))" — исключение, показанное выше
• @onclick="() => ShowEditPersonDialog()" — исключение, показанное выше
• @onclick=@"() => ShowEditPersonDialog(personId)" — не компилируется, синтаксические ошибки
• @onclick="@(() => ShowEditPersonDialog(personId))" — исключение, показанное выше
• onclick="() => ShowEditPersonDialog(personId)" — компилируется, запускается и визуализируется, но кнопка не отвечает
• onclick="@(() => ShowEditPersonDialog(personId))" — не компилируется — Не удается преобразовать лямбда-выражение в тип ‘object’, потому что это не тип делегата
• onclick="(e) => ShowEditPersonDialog(e, personId)" — компилируется, запускается и визуализируется, но кнопка не отвечает
• onclick="e => ShowEditPersonDialog(e, personId)" — компилируется, запускается и визуализируется, но кнопка не отвечает
• onclick="@((e) => ShowEditPersonDialog(e, personId))" — не компилируется — Не удается преобразовать лямбда-выражение в тип ‘object’, потому что это не тип делегата
• onclick="@(e => ShowEditPersonDialog(e, personId))" — не компилируется — Не удается преобразовать лямбда-выражение в тип ‘object’, потому что это не тип делегата
• onclick="@(e => ShowEditPersonDialog(e))" — не компилируется — Не удается преобразовать лямбда-выражение в тип ‘object’, потому что это не тип делегата

Как, черт возьми, мне написать эту вещь?? Я просто хочу, чтобы кнопка передавала соответствующий PersonID для данной строки в метод ShowEditPersonDialog.

Измените свою кнопку на эту — удалите @ из type="button" и используйте @onclick="@(() => ShowEditPersonDialog(personId))"

 <button class="btn btn-block btn-primary" 
    @onclick="@(() => ShowEditPersonDialog(personId))" 
    style="color: rgb(255, 255, 255); background-color: rgb(49, 56, 215);" 
    type="button">Edit Person</button>
  

Также полезно переместить встроенные CSS-стили кнопок в класс в файле css, чтобы HTML-разметка была понятнее для чтения 🙂