Передача неправильной модели в частичное

Question

Я создаю свое первое веб-приложение со страницами .net core.

Я пытаюсь переместить свое меню, чтобы оно было частичным, поэтому я могу использовать его по своему усмотрению, но я, должно быть, что-то делаю не так.

Ошибка:

The model item passed into the ViewDataDictionary is of type 'BrambiShop.UI.Pages.IndexModel', but this ViewDataDictionary instance requires a model item of type 'BrambiShop.UI.Pages.Shared._SideCategoriesMenuModel'.

Я знаю, что есть несколько тем на эту тему, но я изо всех сил "дней после работы, и я не мог найти какое-либо точное решение. Я думаю, я понимаю, я понимаючто я делаю не так. Но я не знаю, как это сделать правильно.

Я пытаюсь загрузить частичное из индекса следующим образом:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
 @{ await Html.RenderPartialAsync("_SideCategoriesMenu"); }

Частичное:

    @page
@model BrambiShop.UI.Pages.Shared._SideCategoriesMenuModel
@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@foreach (var category in Model.Categories)
{
    <button class="font-weight-bold" data-toggle="collapse" href="#MenuCollapse_@Html.DisplayFor(modelItem => category.Id)"
            aria-expanded="false" aria-controls="MenuCollapse_@Html.DisplayFor(modelItem => category.Id)">
        @Html.DisplayFor(modelItem => category.Name)
    </button>

    <!-- Collapsible element -->

    <div class="collapse text-center" id="MenuCollapse_@Html.DisplayFor(modelItem => category.Id)">
        @foreach (var subCategory in Model.SubCategories.Where(x => x.CategoryId == category.Id))
        {
            <form action="/url/to/action" Method="GET">
                <input type="hidden" name="Property" value="@Html.DisplayFor(modelItem => subCategory.Id)" />
                <button type="submit">
                    <i class="fas fa-caret-right pl-1"></i>@Html.DisplayFor(modelItem => subCategory.Name)
                </button>
            </form>
        }
    </div>
    <!-- / Collapsible element -->

}

И, наконец, cshtml.cs

using BrambiShop.API.Models;
using BrambiShop.UI.Services;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace BrambiShop.UI.Pages.Shared
{
    public class _SideCategoriesMenuModel : PageModel
    {
        private readonly IApiClient _Client;

        public _SideCategoriesMenuModel(IApiClient client)
        {
            _Client = client;
        }

        public IList<Category> Categories { get; set; }
        public IList<SubCategory> SubCategories { get; set; }

        public async Task OnGet()
        {
            Categories = await _Client.GetCategoriesAsync();
            SubCategories = await _Client.GetSubCategoriesAsync();
        }
    }
}

Может ли кто-нибудь помочь мне с этим, пожалуйста? Я посмотрел около 10 часов учебников по созданию API и основы Интернета, но эточертовски частично. Я просто нигде не могу найти ответ на этот вопрос.

Большое спасибо за любые усилия.

EDIT --- модель индекса

using BrambiShop.API.Models;
using BrambiShop.UI.Services;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace BrambiShop.UI.Pages
{
    public class IndexModel : PageModel
    {

        public IndexModel()
        {

        }

        public async Task OnGet()
        {
        }
    }
}

Answer 1

Ваш индексный вид имеет модель типа IndexModel.Когда вы поставите эту строку

 @{ await Html.RenderPartialAsync("_SideCategoriesMenu"); }

Та же модель будет передана в _SideCategoriesMenu, что составляет IndexModel.Вот почему вы получаете исключение, потому что модель, переданная в _SideCategoriesMenu, отличается, так как ожидает, что BrambiShop.UI.Pages.Shared._SideCategoriesMenuModel.

Чтобы обойти это, вы должны указать модель в методе RenderPartialAsync.Например:

  @{ await Html.RenderPartialAsync("_SideCategoriesMenu",YOUR_MODEL_HERE); }

Вы можете заменить YOUR_MODEL_HERE любым экземпляром типа _SideCategoriesMenuModel.Вы можете иметь его как свойство внутри IndexModel.Например:

public class IndexModel : PageModel
{

    public IndexModel()
    {

    }

    public SideMenuModel SideMenu { get; set;}
    public BrambiShop.UI.Pages.Shared._SideCategoriesMenuModel SideMenuModel{ get; set;}

    public async Task OnGet()
    {
    }
}
}

А затем используйте его в своем индексном представлении

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
 @{ await Html.RenderPartialAsync("_SideCategoriesMenu",Model.SideMenuModel); }

Answer 2

Модель, которую вы используете для создания страницы, должна содержать полную модель для меню.Затем вам нужно передать модель в RenderPartial.

IE:

 @{ await Html.RenderPartialAsync("_SideCategoriesMenu", Model.SideMenu); }

Редактировать -

Добавить свойство SideMenu в вашу модель, чтобы вы могли получить к нему доступ встраница в приведенном выше примере.

using BrambiShop.API.Models;
using BrambiShop.UI.Services;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace BrambiShop.UI.Pages
{
public class IndexModel : PageModel
{

    public IndexModel()
    {

    }

    public SideMenuModel SideMenu { get; set;}

    public async Task OnGet()
    {
    }
}
}