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.

Did you look in the JS Console to see if there was an error? — H H, Sep 20 '19 at 05:08

Nan Yu · Accepted Answer · 2019-09-20T06:45:13.810

6

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 .

edited Sep 20 '19 at 06:45

answered Sep 20 '19 at 06:31

Nan Yu

26,101
9
68
148

But why? A div within a table in your example isn’t valid markup. – Aaron Hudon Sep 20 '19 at 06:33
2

See [this](https://stackoverflow.com/a/5967613/5751404) , put in `div` is workaround if you want to ,but it's prefer to put table inside form . – Nan Yu Sep 20 '19 at 06:36

H H · Answer 2 · 2021-08-07T09:45:58.820

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.

Fair enough, my bad! I should have known. Was thrown off by thinking `` was just a placeholder and not actually rendered as `
` — Aaron Hudon, Sep 20 '19 at 15:41

EditForm within a table does not render

2 Answers2