Question

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>

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

Answer 1

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

在标签中放置EditForm时，没有任何反应。

那是因为

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

翻译成

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

Blazor可以输出此结果，但是大多数浏览器不会渲染它。这是无效的HTML。

像在@NanYu的答案中一样，在表单周围放置<div>是一个hack，但它似乎可以工作。

因此：不是Blazor / Razor问题，只是无效的html。

如果抛出某种错误来警告开发人员不支持这种情况，那就太好了。

将所有工具（用于不同的浏览器）构建到剃须刀引擎中将需要大量工作，而且似乎没有必要。

表中的EditForm无法呈现

2 个答案: