Ошибка InvalidOperationException:"Object of type 'ProductCard' does not have a property the name 'ProductId' при передаче параметра в Blazor компонент

Я работаю над Blazor приложением и пытаюсь передать ProductId в компонент ProductCard через параметр URL.

Однако получаю ошибку:

System.NullReferenceException: 
"Object reference not set to an instance of an object." productDTO было null.

Catalog.razor — страница, на которой я показываю список продуктов и при клике перехожу на компонент ProductCard с передачей параметра ProductId:

@code {
    protected override async Task OnInitializedAsync()
    {
        var products = await ProductRepository.GetAll();
        productsDTO = products.Select(p => new ProductDTO
            {
                Name = p.Name,
                Img = p.Img,
                Description = p.Description,
                Price = p.Price
            }).ToList();
    }

    private void OnProductClick(ProductDTO product)
    {
        NavigationManager.NavigateTo($"/ProductCard/{product.Id}");
    }
}

Все работает корректно и выводит все необходимое.

ProductCard.razor — компонент, который принимает ProductId в качестве параметра:

@using Core
@using Core.DTO;
@using Core.Entities
@using Infrastructure.Repository

@page "/ProductCard/{ProductId:guid}"
@rendermode InteractiveServer
@inject ProductRepository productRepository

<div class="ProductCard">
    <img src="@productDTO.Img" />
    <div class="card-body"
             <span class ="title">@productDTO?.Name</span>
             <span class="price">@productDTO?.Price</span>
             <span class="description">@productDTO?.Description</span>
            <span class="specs">@productDTO?.Specs</span>
        </div>
</div>


@code {
    [Parameter]
    public Guid productId { get; set; }

    private ProductDTO productDTO;

    protected override async Task OnInitializedAsync()
    {
        var product = await productRepository.GetByIdAsync(productId);
        if (product != null)
        {
            productDTO = new ProductDTO
                {
                    Id = product.Id,
                    Name = product.Name,
                    Img = product.Img,
                    Description = product.Description,
                    Price = product.Price,
                    Specs = product.Specs
                };
        }
        else
        {
            Console.WriteLine("Продукт не найден");
        }
    }
}
}

Blazor не распознает ProductId как параметр в ProductCard, и я получаю исключение.


Ответы (1 шт):

Автор решения: Dev18
Ошибка InvalidOperationException:"Object of type 'ProductCard' does not have a property 
the name 'ProductId' при передаче параметра в Blazor компонент

Ошибка говорит, что нет параметра с таким именем у вашей модели.

тут вы пишите Id

NavigationManager.NavigateTo($"/ProductCard/{product.Id}"); 

затем как Parameter передаете с маленькой буквы

public Guid productId { get; set; }

а дальше с большой.

@page "/ProductCard/{ProductId:guid}"

вот как можно исправить, чтоб сама переменная не создавала конфликта и правильно инициализировалась

@page "/ProductCard/{ProductId:guid}"

@code {
    [Parameter]
    public Guid ProductId { get; set; } // Теперь с большой буквы

    private ProductDTO productDTO;

    protected override async Task OnInitializedAsync()
    {
        var product = await productRepository.GetByIdAsync(ProductId);
        if (product != null)
        {
            productDTO = new ProductDTO
                {
                    Id = product.Id,
                    Name = product.Name,
                    Img = product.Img,
                    Description = product.Description,
                    Price = product.Price,
                    Specs = product.Specs
                };
        }
        else
        {
            Console.WriteLine("Продукт не найден");
        }
    }
}

я бы еще добавила проверку

@if (productDTO != null)
{
    <div class="ProductCard">
        <img src="@productDTO.Img" />
        <div class="card-body">
            <span class="title">@productDTO.Name</span>
            <span class="price">@productDTO.Price</span>
            <span class="description">@productDTO.Description</span>
            <span class="specs">@productDTO.Specs</span>
        </div>
    </div>
}
else
{
    //тут ваш лоадер
}
→ Ссылка