C#: Too Many Characters in Character Literal

The Problem

During the development of a new web application with .NET and Blazor, I encountered a perplexing error. My goal was to create a Cancel button that would redirect users to a page named Tickets upon being clicked.

The error message:

CS1012: Too many characters in character literal

And here is the exact code that caused the error:

<button type="button" class="btn btn-sm btn-secondary" @onclick="() => NavigationManager.NavigateTo('/tickets')">Cancel</button>

The error references the ‘/tickets’ part. However, the error isn’t actually caused by ‘/tickets’ itself. The issue arises from the way the lambda expression is written in the @onclick attribute. Razor syntax in Blazor doesn’t support inline lambda expressions directly within the attribute like that.

When you write @onclick=”() => NavigationManager.NavigateTo(‘/tickets’)”, Blazor tries to parse the entire string as a single expression, which leads to the “too many character literal” error. Once again, this is because the Razor engine doesn’t support inline lambda expressions directly in the markup.

The Next Step

I looked up the code reference CS1012 on Microsoft Learn to find a solution.

An attempt was made to initialize a char constant with more than one character.

CS1012 can also occur when doing data binding. For example the following line will give an error:

<%# DataBinder.Eval(Container.DataItem, 'doctitle') %>

Try the following line instead:

<%# DataBinder.Eval(Container.DataItem, "doctitle") %>

The problem with this solution is that in my code, adding double quotes around the lambda expression in the @onclick attribute doesn’t work because Blazor’s Razor syntax doesn’t interpret it as a valid expression. Blazor expects a method name or a delegate, not an inline lambda expression within the attribute.

The Solution

So what now!? The recommended solution from Microsoft wasn’t going to work and I needed to fix this without sacrificing the functionality I was trying to achieve.

By defining a separate method and referencing it in the @onclick attribute, you provide Blazor with a clear, valid method to call when the button is clicked. This approach aligns with Blazor’s event handling model.

Here is what I did:

Step 1: Define a method in the component class

private void NavigateToTickets()
{
    NavigationManager.NavigateTo("/tickets");
}

Step 2: Update the button to call the method

<button type="button" class="btn btn-sm btn-secondary" @onclick="NavigateToTickets">Cancel</button>

Hopefully this little trick will help if you encounter the same issue.