Thiết kế website giá rẻ

Question

I am trying to integrate Razor views into my ASp.NET MVC Web Application using dotNET 8.0.

The thing is, it works, until I pass parameters. Then, it does not throw any exception, instead the browser says “ERR_INCOMPLETE_CHUNKED_RESPONSE”.

So in Program.cs I added:

builder.Services.AddServerSideBlazor().AddInteractiveServerComponents();

Also:
app.MapBlazorHub();

I also added the “Components” folder, and in 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.Components

Then, 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 made 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:[email protected]&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 “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 }))
}

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 teh component.

What am I doing wrong?

Thiết kế website giá rẻ

Danh mục

Why trying to pass parameters to razor components cause problem in Server Blazor?