Question

我正在使用.net核心剃须刀页面构建我的第一个Web应用程序。

我正在尝试将菜单移到部分菜单，以便可以随意重用它，但是我必须做错了事。

错误是：

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和网络基础，但是这真是不完整。我只是在任何地方都找不到答案。

非常感谢您的付出。

编辑 ---索引模型

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

用于创建页面的模型需要包含菜单的完整模型。然后，您需要在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()
    {
    }
}
}

Answer 2

您的索引视图的模型类型为IndexModel。当您放置此行

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

相同的模型将传递到_SideCategoriesMenu的{{1}}。这就是为什么您收到异常的原因，因为传递给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()
    {
    }
}
}

将错误的模型传递给部分模型

2 个答案: