I have created a .net 8.0 blazor web application solution. The web project is standard with the following code:
App.razor
<!DOCTYPE html>
<html lang="en-GB">
<head>
<base href="/"/>
<title>My Awesome Web Application</title>
<HeadOutlet/>
</head>
<body>
<Routes/>
<script src="_framework/blazor.web.js"></script>
</body>
</html>
Layout.razor
@using myawesomeproject.shared.components
@inherits LayoutComponentBase
<Header @rendermode="InteractiveWebAssembly"/>
@Body
Myawesomehomepage.razor
@page "/"
<h1>Home page</h1>
Myawesomeotherpage.razor
@page "/myawesomeotherpage/{message}"
<h1>@(message)</h1>
@code
{
[Parameter]
public string? message { get; set; }
}
In a project of shared razor components, I have the following:
Header.razor
<header>
<input @bind="message"/>
<button @onclick="Send">Send message</button>
</header>
@code
{
[Inject]
private NavigationManager? navigation { get; set; }
private string? message { get; set; }
public void Send()
{
navigation!.NavigateTo("/myawesomeotherpage/" + message);
}
}
he layout razor component contains the header razor component, which in turn contains a text input, bound to a local string called 'message' and a button.
Clicking the button does nothing.
How do I send the string 'message', as a parameter, to myawesomeotherpage, please?
There was more in the header, albeit not pertinent to the problem, but it was required to run client side. This is not the solution I would like, but it works.
Layout.razor
@using myawesomeproject.shared.components
@inherits LayoutComponentBase
<Header @rendermode="InteractiveWebAssembly"/>
<Message @rendermode="InteractiveServer"/>
@Body
I created a separate component for handling the messages:
Message.razor
<input @bind="message"/>
<button @onclick="Send">Send message</button>
@code
{
[Inject]
private NavigationManager? navigation { get; set; }
private string? message { get; set; }
public void Send()
{
navigation!.NavigateTo("/myawesomeotherpage/" + message);
}
}