如何将多个表单值添加/绑定到服务器端 blazor 方法

Question

我尝试扩展server side blazor todo app。

我愿意

• 向待办事项添加负责人
• 在输入框的 onkeyup 之后添加一个 todoitem

这个gist contains my attempt to expand the todo app

什么有效

在 select 字段中添加人员列表

<select>
    @foreach (var person in people)
    { 
       <option value="person">@person</option>
    }
</select>

什么不起作用

有两件事不起作用

1. 在 AddTodo()
中添加一个人到 todoItem
2. 为事件添加 todoItem onKeyUp == Enter

方法

private void AddTodo()
{
    if (!string.IsNullOrWhiteSpace(newTodo))
    {
        todos.Add(new TodoItem { Title = newTodo, Responsible = person});
        newTodo = string.Empty;
    }
}

问题

1. 如何将多个表单值（输入，select）绑定到一个方法？
2. 为什么 onkeyup 没有触发？

my Todo.razor gist

的源代码

Answer 1

why is onkeyup not firing? 的原因是一个愚蠢的错误；事件处理程序附加到错误的输入。这似乎有效

<input placeholder="Something todo" @bind="newTodo" @onkeyup="AddTodoOnEnter" />

要从 select 标签的 selected 选项中获取值到您的代码，您需要在 select 标签上绑定变量 @newPerson。

<select @bind="newPerson">
@foreach (var person in people)
{
    <option value="@person" >@person.name (@person.id)</option>
}
</select>

您可以使用

在@code 部分访问它

@code {
// named tuple list  
private  List<(int id, string name)> people = new List<(int id, string name)>() 
    { 
       (1, "Tom"), (2, "Luise"), (3,"Jane") 
    };

private void AddTodo()
{
  if (!string.IsNullOrWhiteSpace(newTodo))
  {
     todos.Add(new TodoItem { Title = newTodo, Responsible = "who " + newPerson });
     newTodo = string.Empty;
  }
}

html

的屏幕截图

当前代码/要点

我更新了要点 - 你 can see the old code next the revision 4 side by side here