How to add / bind multiple form values to server side blazor method

Question

I try to expand the server side blazor todo app.

I would like to

add a responsible person to a todoitem
add a todoitem after onkeyup inside the input field

This gist contains my attempt to expand the todo app

What works

Adding a list of people inside a select field

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

What does not work

Two things are not working

adding a person to a todoItem inside AddTodo()
adding a todoItem for the event onKeyUp == Enter

The method

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

Questions

How can multiple form values (input, select) be bound to a method?
Why is onkeyup not firing?

Source code of my Todo.razor gist

surfmuggle · Accepted Answer · 2019-08-31 10:32:25Z

The cause for why is onkeyup not firing? was a silly mistake; the event handler was attached to the wrong input. This seems to work

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

To get a value from a selected option from a select-tag to your code you bind the variable @newPerson on the select-tag.

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

You can access it inside the @code section with

@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;
  }
}

Screenshot of the html

Current Code / Gist

I updated my gist - you can see the old code next the revision 4 side by side here

Collectives™ on Stack Overflow

How to add / bind multiple form values to server side blazor method

What works

What does not work

Questions

1 Answer 1

Screenshot of the html

Current Code / Gist

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What works

What does not work

Questions

1 Answer 1

Screenshot of the html

Current Code / Gist

Comments

Your Answer

Sign up or log in

Post as a guest

Related