table 中的 EditForm 不呈现

Question

Blazor vRC1

EditForm 组件似乎有些细微之处，在某些标记情况下它不会呈现其内容。例如，当 EditForm 被放置在内 <table> 标签中时，什么也不会发生 。

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

然而，用 EditForm 包装 <table> 一切都按预期呈现 。

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

我同意后者，但是如果渲染引擎无法处理第一个示例，那么它会抛出某种错误以警告开发人员不支持这种情况会很好。

Answer 1

避免将 form 作为 table 的子元素。作为解决方法，您可以尝试添加一个 <div> 并在其中移动 EditForm（尽管将 div 嵌套在表单中是不正确的），或者您可以将表单放入 table 单元格（在 <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 内。

Answer 2

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

那是因为

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

翻译成

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

Blazor 输出正常，但大多数浏览器不会呈现它。无效 HTML.

在表格周围放置一个 <div> ，就像@NanYu 的回答一样，是一种 hack，但它似乎有效。将 <form> 放在 <td> 中是完全有效的。

所以：不是 Blazor/Razor 问题，只是无效 html。

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

将所有（针对不同的浏览器）构建到 razor 引擎中将需要大量工作，而且似乎没有必要。

table 中的 EditForm 不呈现

EditForm within a table does not render

asp.net-core

razor

blazor

blazor-editform