EditForm внутри таблицы не отображает - PullRequest
Новая
       46

EditForm внутри таблицы не отображает

1 голос
/ 20 сентября 2019

Blazor vRC1

Кажется, есть тонкости компонента EditForm, когда он не будет отображать свое содержимое в определенных ситуациях разметки.Например, когда EditForm помещается в теги <table>, ничего не происходит . 

<table>
<thead>...</thead>
<EditForm Model="MyModel">
    @foreach(var item in MyModel.Items)
    {
        <tr><td>....</td></tr>
    }
</EditForm>
</table>

Однако, оборачивая <table> с помощью EditForm все рендерится, как и ожидалось . 

<EditForm Model="MyModel">
<table>
<thead>...</thead>   
    @foreach(var item in MyModel.Items)
    {
        <tr><td>....</td></tr>
    }
</table>
</EditForm>

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

Ответы [ 2 ]

2 голосов
/ 20 сентября 2019

Избегайте создания form как дочернего элемента table.В качестве обходного пути вы можете попробовать добавить <div> и переместить EditForm внутри него (хотя неправильно помещать div вложенный в форму), или вы можете поместить форму внутри ячейки таблицы (внутри тега <td>).

<table>
    <thead>...</thead>
    <div>
        <EditForm Model="MyModel">
            @foreach(var item in MyModel.Items)
            {

            }
        </EditForm>
    </div>
</table>

Или: 

<table>
    <thead>...</thead>
    <tr>
        <td>
            <EditForm Model="MyModel">
                @foreach(var item in MyModel.Items)
                {

                }
            </EditForm>
        </td>
    </tr>
</table>

Но, конечно, лучше иметь table внутри form.

1 голос
/ 20 сентября 2019

когда в теги помещается EditForm, ничего не происходит.

Это потому, что 

<table>
  <EditForm Model="MyModel">
  </EditForm>
</table>

переводится в 

<table>
  <form>
  </form>
</table>

Blazor выводит это нормально, но большинство браузеров не отображают его.Это недопустимый HTML.

Помещение <div> вокруг формы, как в ответе @ NanYu, является хаком, но, похоже, работает.

Итак: не проблема Blazor / Razor,просто недействительный HTML.

было бы хорошо, если бы он выдал какую-то ошибку, чтобы предупредить разработчика, что ситуация не поддерживается.

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

...