标签: blazor-editform

开拓者 vRC1

该EditForm组件似乎存在一些微妙之处，在某些标记情况下它不会呈现其内容。例如，当EditForm将 an 放置在标签内<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>

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

我正在根据本文使用向导组件逻辑创建多步骤 Blazor 表单。项目是.NET 5.0 Blazor 客户端（托管）。有一个父Wizard组件，它有WizardStep子组件。

我正在尝试创建一个简单的两步表单。步骤号。1 包含输入日期控件和步骤号。2/最后一步包含一个文本区域控件。

从上图中可以看出，我的表单第 1 步中的“下一步”按钮的类型为“按钮”。单击“下一步”按钮时，当前组件将被替换，并渲染下WizardStep一个/最终组件。WizardStep此决赛WizardStep包含文本区域控件，并且“下一步”按钮被“提交”按钮取代。但是，可以看到最后一步显示了验证错误。这些验证错误是在最后一步中未单击“提交”按钮时出现的。

我已经调试了该应用程序，并且可以看出，在单击步骤 1 中的“下一步”按钮后，该表单会尝试提交，这就是出现验证错误的原因。这种情况不应该发生，因为“下一步”按钮的类型是“按钮”。

为什么会出现这个问题？该表单只能在单击“提交”类型的按钮后提交，并且该按钮出现在向导的最后一步中。

上图中还需要注意的一件事是，表单下一步/最后一步中的“提交”按钮看起来就像被单击一样。为什么？

形式

 <EditForm Model="model" OnValidSubmit="SubmitValidForm">
        <DataAnnotationsValidator />
        <ValidationSummary />
    
        <Wizard Id="TestForm">
            <WizardStep Name="First Step">
                <div class="form-group">
                    <label>Date:</label>
                    <div>
                        <InputDate @bind-Value="@model.Date" class="form-control" />
                    </div>
                    <ValidationMessage For="@(() => model.Date)" />
                </div>
            </WizardStep>
            <WizardStep Name="Final Step">
                <div class="form-group ">
                    <label>Details:</label>
                    <div>
                        <InputTextArea @bind-Value="@model.Entry" …

我正在尝试为 Blazor 上的 editform 创建一个从输入库派生的定制输入，但是我很难掌握它，因为我这周才刚刚学习 Blazor，一般来说，这个月才学习 C#。

我找到了 https://www.meziantou.net/creating-a-inputselect-component-for-enumerations-in-blazor.htm（或找到下面粘贴的代码）并能够将其用于 inputselect 内部的可为空枚举然而，尝试为可空的输入复选框复制它却没有成功。我想知道是否有人有链接或知道如何调整它以使其发挥作用。

预先感谢您，我几乎整天都在电脑上，所以请随意提问，尽量不要责备我哈哈。

// file: Shared/InputSelectEnum.cs
using System;
using System.ComponentModel.DataAnnotations;
using System.Globalization;
using System.Reflection;
using Humanizer;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Rendering;


// Inherit from InputBase so the hard work is already implemented 
// Note that adding a constraint on TEnum (where T : Enum) doesn't work when used in the view, Razor raises an error at build time. Also, this would prevent using nullable types...
namespace OrderServiceFrontEnd.Shared
{
    public …

我想在绑定到模型值的 blazor 编辑表单中有一个 InputSelect，并且还有一个 onchange 事件，该事件根据新值更改模型中的其他属性。

绑定到 @bind-Value 和 @onchange 不起作用（我猜是因为绑定值同时使用输入的值和值更改属性。

我可以绑定到 oninput，但我想知道是否有更好的方法来做到这一点。

<InputSelect id="inputPeriod" name="inputPeriod" class="form-control" @bind-Value="model.Period" @oninput="periodChanged">


protected void periodChanged(ChangeEventArgs e)
        {}

我可以像这样绑定到 oninput

但理想情况下，我想在更新模型属性后绑定到 @onchange 事件，或者知道最佳实践是什么。如果不使用绑定值，模型验证将无法工作，所以我能想到的唯一替代方法是让更改事件在我的模型中的属性内工作，但这似乎是错误的