EditForm within a table does not render

Question

Blazor vRC1

There appears to be subtleties of the EditForm component, where it will not render its contents in certain markup situations. For example, when an EditForm is placed within the <table> tags, nothing happens.

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

However wrapping the <table> with the EditForm everything renders as expected.

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

I'm fine with the latter, however if the rendering engine is unable to handle the first example, it would be nice if it'd throw some sort of error to warn the developer the situation is not supported.

Answer 1

Avoiding making form as a child element of a table . As a workaround , you can try add a <div> and move EditForm inside it(although it's not correct to put div nested in form ) , or you can put form inside table cell(inside <td> tag) .

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

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

Or :

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

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

But of course , it's better to have your table inside form .

Answer 2

when an EditForm is placed within the tags, nothing happens.

That is because

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

translates to

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

Blazor outputs this alright but most browsers won't render it. It is invalid HTML.

Putting a <div> around the form , like in @NanYu's answer, is a hack but it seems to work. Putting a <form> inside a <td> is completely valid.

So: not a Blazor / Razor issue, just invalid html.

it would be nice if it'd throw some sort of error to warn the developer the situation is not supported.

Building all (for different Browsers) into the razor engine would be a lot of work and seems unnecessary.