I want to pass a object from .cshtml view to .razor component like the link below.
https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/component-tag-helper?view=aspnetcore-6.0
Section : Pages/MyPage.cshtml
I could get the value from controller and set it to a view correctly, but get javascript error at blazor.webassembly.js:1. I want to set new value with onclick event, but blazor doesn't work with this error.
Create Blazor Webassembly App with ASP.NET Core Hosted
Enable ServerPrerendered following by this instruction
MyClass.cs
namespace BlazorAppTest.Shared.Models
{
public class MyClass
{
public int Id { get; set; }
public string Name { get; set; } = "";
public MyClass() { }
}
}
MyPage.cshtml
@page
@using BlazorAppTest.Client.Pages
@model BlazorAppTest.Server.Pages.MyPageModel
@{
ViewData["Title"] = "Test";
Layout = "~/Pages/_Layout.cshtml";
}
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<div>MyPage.cshtml string.</div>
<hr />
<component type="typeof(MyComponent)" render-mode="WebAssemblyPrerendered" param-MyObject="Model.MyObject" />
MyComponent.razor
@using BlazorAppTest.Shared.Models
<div>MyComponent.razor string.</div>
<div>Id:@(MyObject?.Id)</div>
<div>Name:@(MyObject?.Name)</div>
<div><input type="button" @onclick="ChangeStr" value="Button" /></div>
@code {
[Parameter]
public MyClass? MyObject { get; set; }
private void ChangeStr()
{
MyObject.Id = 2;
MyObject.Name = "ChangeStr";
}
}
MyPage.cshtml string.
[Border]
MyComponent.razor string.
Id:1
Name:OnGet
[Button]
This output is no problem, but the button cannot work.
System.AggregateException: One or more errors occurred. (The parameter 'MyObject' with type 'BlazorAppTest.Shared.Models.MyClass' in assembly 'BlazorAppTest.Shared' could not be found.)
---> System.InvalidOperationException: The parameter 'MyObject' with type 'BlazorAppTest.Shared.Models.MyClass' in assembly 'BlazorAppTest.Shared' could not be found.
at Microsoft.AspNetCore.Components.WebAssemblyComponentParameterDeserializer.DeserializeParameters(IList`1 parametersDefinitions, IList`1 parameterValues)
at Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder.InitializeRegisteredRootComponents(IJSUnmarshalledRuntime jsRuntime)
at Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder..ctor(IJSUnmarshalledRuntime jsRuntime, JsonSerializerOptions jsonOptions)
at Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder.CreateDefault(String[] args)
at Program.<Main>$(String[] args) in C:\Users\xtlab\source\repos\BlazorAppTest\BlazorAppTest\Client\Program.cs:line 5
--- End of inner exception stack trace ---
callEntryPoint @ blazor.webassembly.js:1
await in callEntryPoint (async)
At @ blazor.webassembly.js:1
await in At (async)
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Windows10
Visual Studio 2022 17.3.4
.NET 6.0
Reproducing project files are here.
I want to set new value with onclick event
I needed to place the model file to the client project, not shared project. Then I could achieve it.
Though I don't know this is the best solution or not, it served my purpose.