I am trying to integrate Razor views into my ASP.NET Core 8 MVC web application.
The thing is, it works, until I pass parameters. Then, it does not throw any exception, instead the browser says
ERR_INCOMPLETE_CHUNKED_RESPONSE
In Program.cs I added:
builder.Services.AddServerSideBlazor().AddInteractiveServerComponents();Also:
app.MapBlazorHub();I also added a Components folder, and inside that _Imports.razor:
@using System.Net.Http@using System.Net.Http.Json@using Microsoft.AspNetCore.Components.Forms@using Microsoft.AspNetCore.Components.Routing@using Microsoft.AspNetCore.Components.Server@using Microsoft.JSInterop@using Nusstudios@using Nusstudios.ComponentsThen, I added my custom component called CocktailView.razor:
<div class="bubble"><div class="space"> @if (variants.Count() != 0) {<div class="variant">Variáns 1/@(variants.Count()+1)</div> }</div><div class="title">@Cocktail.Name</div><div id="header" class="row"><div class="left">Qty.</div><div class="middle">Összetevő</div><div class="right">ABV</div></div> @foreach (Nusstudios.Models.Cocktails.Ingredient i in Cocktail.Ingredients) {<div class="row"><div class="left">@(i.Quantifier.Amount.ToString() + i.Quantifier.Name)</div><div class="middle">@i.Name</div><div class="right">@(i.ABVPercentage.ToString() +"%")</div></div> }<div id="stats" class="row"><div class="left">@(Math.Round(all, 2))cl</div><div id="alc" class="middle">@(Math.Round(alc, 2))cl</div><div class="right">@(Math.Round(alc / all * 100, 2))%</div></div></div>@code { [Parameter] public Nusstudios.Models.Cocktails.Cocktail Cocktail { get; set; } private double all, alc; IReadOnlyCollection<Nusstudios.Models.Cocktails.Cocktail> variants { get; set;} protected override void OnInitialized() { all = Cocktail.GetCLLength(); alc = Cocktail.GetAlcoholCL(); variants = Cocktail.Variants; }}After that, I created a new layout for this component called _BlankLayout.cshtml:
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>@ViewBag.Title</title><link rel="stylesheet" href="~/css/site.css"></link><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Edu+QLD+Beginner:wght@400..700&family=Grandstander:ital,wght@0,100..900;1,100..900&family=Indie+Flower&family=Klee+One&display=swap" rel="stylesheet"> @RenderSection("styles", false)<base href="~/"/></head><body> @RenderBody() <script src="_framework/blazor.server.js"></script></body></html>Then, in the Cocktails.cshtml view, I am doing the actual rendering of the component, in either of these two ways:
@using Nusstudios.Components@using Nusstudios.Models.Cocktails;@{ Layout = "_BlankLayout"; ViewBag.Title = "Koktéllap";}@section styles {<link rel="stylesheet" type="text/css" href="~/css/cocktails.css">}@model Nusstudios.Models.Cocktails.TailData@foreach (Cocktail c in Model.Cocktails){<component type="typeof(CocktailView)" render-mode="Server" param-Cocktail="@c" />}The other way is:
@using Nusstudios.Components@using Nusstudios.Models.Cocktails;@{ Layout = "_BlankLayout"; ViewBag.Title = "Koktéllap";}@section styles {<link rel="stylesheet" type="text/css" href="~/css/cocktails.css">}@model Nusstudios.Models.Cocktails.TailData@foreach (Cocktail c in Model.Cocktails){ @(await Html.RenderComponentAsync<CocktailView>(RenderMode.Server, new { Cocktail = c }))}This is my Cocktail class if it helps:
public class Cocktail{ public IReadOnlyCollection<Cocktail> Variants => variants.AsReadOnly(); public Cocktail(string name) { Name = name; ingredients = new List<Ingredient>(); } public int Id { get; set; } public string Name { get; set; } public List<Cocktail> variants { get; set; } = new List<Cocktail>(); public string Description { get; set; } private List<Ingredient> ingredients { get; set; } public IReadOnlyList<Ingredient> Ingredients => ingredients.AsReadOnly(); public void AddVariant(Cocktail c) { variants.Add(c); } public void AddIngredient(Ingredient ingredient) { int after = -1; for (int i = 0; i < ingredients.Count; i++) if (ingredients[i].Order < ingredient.Order) after = i; if (after == -1) ingredients.Insert(0, ingredient); else ingredients.Insert(after + 1, ingredient); } public double GetCLLength() => ingredients.Aggregate(0.0, (sum, i) => i.Quantifier.ToCL() + sum); public double GetAlcoholCL() => ingredients.Aggregate(0.0, (sum, i) => i.Quantifier.ToCL() * i.ABV + sum);}However, even though seemingly I am doing it right, I am getting the browser error I described in Google Chrome. Interestingly, the view gets rendered PERFECTLY fine, when I am not trying to pass parameters to the component.
What am I doing wrong?
PS: as a side note I mention that the view which renders the razor component is available at root/Home/Cocktails, not root. I thought it might have anything to do with the base tag in the layout might foolishly assume the Blazor app is running at root, while it's not.
Although I highly doubt that would be the problem since not passing parameters does not produce this issue.
PS 2: trying to pass simple int as parameter WORKS.