将值从子组件（表单）传递到父组件（提交按钮所在的位置）

Question

我已将大组件一分为二，目前一个是子组件，另一个是父组件。但是，目前在单击父组件上的提交按钮后，值会以某种方式变为空值，并且没有数据传递到数据库中。为什么会这样以及如何解决这个问题？

在Record.razor.cs

[Parameter]
public string Title { get; set; }

[Parameter]
public string Description { get; set; }

[Parameter]
public DateTime SelectedDate { get; set; }

Record.razor:

  <Form Model="this" LabelColSpan="8" WrapperColSpan="16">
    <FormItem Label="Record title" NoStyle>
      <Input @bind-Value="@this.Title" />
    </FormItem>
    <FormItem Label="Description" NoStyle>
      <Input @bind-Value="@this.Description" />
    </FormItem>
    <FormItem Label="Date" NoStyle>
      <DatePicker @bind-Value="@this.SelectedDate" ShowTime="@true" OnChange="this.OnDateSelected" />
    </FormItem>
  </Form>

Index.razor.cs:

private DiaryRecord DiaryRecordModel { get; set; }
private bool isDialogVisible;
private DateTime SelectedDate { get; set; }

public Index()
{
  this.DiaryRecordModel = new DiaryRecord();
  this.SelectedDate = DateTime.Now;
}

Index.razor:

  <Form Model="this.DiaryRecordModel"
        OnFinish="(e) => this.OnCreateNewDiaryRecord()">
    <FormItem>
      <Record Description="@context.Description"
              SelectedDate="this.SelectedDate"
              Title="@context.Title" />
    </FormItem>
    <FormItem WrapperColOffset="8" WrapperColSpan="16">
      <Button Type="@ButtonType.Primary" HtmlType="submit">
        Submit
      </Button>
      <Button OnClick="(e)=>{this.isDialogVisible = false;}">Cancel</Button>
    </FormItem>
  </Form>

DiaryRecord.cs

  public class DiaryRecord
  {
    public Guid Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
  }

例如今天的日期总是被传递到模型中，而不是实际选择的日期（其他值不被纳入模型）：

Answer 1

首先 - 不要在表单中使用表单。只使用 Index.razor.

上的那个

第二：执行此操作后：Description="@context.Description" 您的上下文与字符串发生的任何事情都失去了联系。

这里有两个选择。

1] 使用 two-way binding，这将导致 @bind-Description="@context.Description"，您还需要为 Record 组件内的每个属性创建 EventCaller。

2]（更好的一个）将您的整个模型发送到 Record 组件：

[Parameter] DiaryRecord DiaryRecord {get;set;}

<Input @bind-Value="@DiaryRecord.Title" />

<Record DiaryRecord=this.DiaryRecordModel/>

将值从子组件（表单）传递到父组件（提交按钮所在的位置）

Pass values from child component (form) into parent component (where submit button located)

c#

blazor

blazor-server-side

blazor-webassembly