Error when using C# code in onclick handler of button

[JohnyL]

I am new to Blazor and I liked it very much. I want to put my time into learning it, so I began from beginning. :)
I was watching this video and was trying to set C# code for onclick handler of button. However, I receive error:

Argument 1: cannot convert from 'void' to 'string'

Here's screenshot of TodoList.cshtml:

[lohithgn]

Hi, the right code is as below

<button onclick="@( () => TodoItems.Add(new TodoItem{Text="New Thing"}) )">Add Item</button>

Having said that - i would create a handler and let the handler add the new item. That way it makes it a clean seperation of markup and logic.

@page "/todolist"
@functions {
List<TodoItem> TodoItems  = new List<TodoItem>();
void AddTodo()
{
TodoItems.Add(new TodoItem{Text="New Thing"});
}
}
<button onclick="@AddTodo">Add Todo</button>

Take a look at www.blazor.net/community for many samples/demos created by the community. I recently created a sample called "Blazor Examples". It show cases simple to complex concepts in Blazor. You can find it here - https://blazorexamples.surge.sh

Hope this helps.

[Andrzej-W]

Hi @JohnyL
First I would like to say that it is probably not a good idea to have relatively complex code embedded directly in HTML (Razor). Here https://blazor.net/docs/tutorials/build-your-first-blazor-app.html#build-a-todo-list you can find an example Todo application with step by step instructions.

It looks that @lohithgn has just posted an answer. I will add some more info.

1. If you want to call a parameterless function you can use this simple syntax
   onclick="@MyFunction".
2. If you want to call a function with parameters you have to use lambda expression
   onclick="@( () => MyFunction(SomeParameters) )". Spaces have been added to increase clarity, they are not necessary.

You can also use event data if you want. Basic example:

<button onclick="@OnButtonClick">Click me</button>

@functions{
    void OnButtonClick(UIMouseEventArgs e)
    {
        Console.WriteLine($"X: {e.ClientX} Y: {e.ClientY}");
    }
}

Example with parameters:

<button onclick="@(e => OnButtonClick(e, 1))">Button 1</button>
<button onclick="@(e => OnButtonClick(e, 2))">Button 2</button>

@functions{
    void OnButtonClick(UIMouseEventArgs e, int buttonNumber)
    {
        Console.WriteLine($"Button {buttonNumber} X: {e.ClientX} Y: {e.ClientY}");
    }
}

@lohithgn - nice Blazor sample app 👍

[lohithgn]

@Andrzej-W Thanks :) trying to make Blazor as easy & simple as possible 👍

[JohnyL]

@Andrzej-W, @lohithgn Guys, thanks for such a thorough explanations! :) What I was concerned is that syntax in video doesn't match up with the one you provided. Were there some changes in syntax? 🤔

[Andrzej-W]

Note that this video is more than 1 year old. First public version of Blazor was published at the beginning of 2018. Syntax presented above is valid in Blazor 0.5.1 (current version). If you like videos you can watch this one: https://channel9.msdn.com/Events/dotnetConf/2018/S207 recorded a few days ago.

[JohnyL]

@Andrzej-W I liked initial syntax more. 🙂 Thanks for video! I hope Blazor will make into its Release state. 😊

[danroth27]

Thanks for answering folks!

[ValeriyaBugakovaMT]

Hi @JohnyL
First I would like to say that it is probably not a good idea to have relatively complex code embedded directly in HTML (Razor). Here https://blazor.net/docs/tutorials/build-your-first-blazor-app.html#build-a-todo-list you can find an example Todo application with step by step instructions.

It looks that @lohithgn has just posted an answer. I will add some more info.

1. If you want to call a parameterless function you can use this simple syntax
   onclick="@MyFunction".
2. If you want to call a function with parameters you have to use lambda expression
   onclick="@( () => MyFunction(SomeParameters) )". Spaces have been added to increase clarity, they are not necessary.

You can also use event data if you want. Basic example:

<button onclick="@OnButtonClick">Click me</button>

@functions{
    void OnButtonClick(UIMouseEventArgs e)
    {
        Console.WriteLine($"X: {e.ClientX} Y: {e.ClientY}");
    }
}

Example with parameters:

<button onclick="@(e => OnButtonClick(e, 1))">Button 1</button>
<button onclick="@(e => OnButtonClick(e, 2))">Button 2</button>

@functions{
    void OnButtonClick(UIMouseEventArgs e, int buttonNumber)
    {
        Console.WriteLine($"Button {buttonNumber} X: {e.ClientX} Y: {e.ClientY}");
    }
}

@lohithgn - nice Blazor sample app 👍

Hello, I am writing @page "/counter"

Counter

Current count: @currentCount

Click me

@functions {
private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

}

But it is wiring that cannot convert void to object. Thank you