.NET Core 2.0 Razor Pages局部视图模型类型不匹配错误求助

Hey there, let's break down why you're hitting that model mismatch error and fix it up.

The problem here is straightforward: when you call @await Html.PartialAsync("Shared/_Sidebar") without explicitly passing a model, Razor automatically passes the parent page's model (your IndexModel) to the partial view. But your partial view is expecting a _SidebarModel, hence the type mismatch.

Here are a few solid solutions tailored to your Razor Pages project:

Solution 1: Explicitly Pass the Correct Model to the Partial #

This approach keeps your _SidebarModel with its business logic, and you just need to pass its instance to the partial view.

1. First, ensure your _SidebarModel is set up to fetch data (inject your database context and add data retrieval logic):

using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace MyWeb.Pages.Shared
{
    public class _SidebarModel : PageModel
    {
        private readonly YourDbContext _dbContext;
        public List<string> SidebarImageUrls { get; set; }

        public _SidebarModel(YourDbContext dbContext)
        {
            _dbContext = dbContext;
        }

        public async Task OnGetAsync()
        {
            // Replace with your actual query to fetch image URLs from the database
            SidebarImageUrls = await _dbContext.Images
                .Select(img => img.ImageUrl)
                .ToListAsync();
        }
    }
}

2. In your parent page's IndexModel, create an instance of _SidebarModel, run its OnGetAsync method to load data, and expose it as a property:

public class IndexModel : PageModel
{
    private readonly YourDbContext _dbContext;
    public _SidebarModel SidebarModel { get; set; }

    public IndexModel(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public async Task OnGetAsync()
    {
        SidebarModel = new _SidebarModel(_dbContext);
        await SidebarModel.OnGetAsync();
    }
}

3. Update the partial view call in Index.cshtml to pass the correct model:

@await Html.PartialAsync("Shared/_Sidebar", Model.SidebarModel)

Your _Sidebar.cshtml can stay as is, using @model MyWeb.Pages.Shared._SidebarModel to access the SidebarImageUrls property.

Solution 2: Use a ViewComponent (Recommended for Razor Pages) #

Razor Pages encourages using ViewComponents for reusable, logic-driven UI elements—this avoids model mismatch issues entirely because ViewComponents are self-contained.

1. Create a ViewComponent class (you can place it in a ViewComponents folder or directly in Pages/Shared):

using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace MyWeb.ViewComponents
{
    public class SidebarViewComponent : ViewComponent
    {
        private readonly YourDbContext _dbContext;

        public SidebarViewComponent(YourDbContext dbContext)
        {
            _dbContext = dbContext;
        }

        public async Task<IViewComponentResult> InvokeAsync()
        {
            var imageUrls = await _dbContext.Images
                .Select(img => img.ImageUrl)
                .ToListAsync();
            return View(imageUrls); // You can also use a dedicated ViewModel here if needed
        }
    }
}

2. Create the corresponding view for the ViewComponent. Make a folder structure: Pages/Shared/Components/Sidebar/ and add a Default.cshtml file:

@model List<string>

<div class="sidebar">
    @foreach (var url in Model)
    {
        <img src="@url" alt="Sidebar image" class="sidebar-img" />
    }
</div>

3. Call the ViewComponent in your Index.cshtml instead of the partial view:

@await Component.InvokeAsync("Sidebar")

This is cleaner because the ViewComponent handles its own data fetching, no need to tie it to the parent page's model.

Solution 3: Inject the DB Context Directly in the Partial View #

If you prefer to keep things simple without extra classes, you can inject your database context directly into the partial view and fetch data inline:

Update your _Sidebar.cshtml to remove the @model declaration and inject the context:

@inject YourDbContext DbContext

<div class="sidebar">
    @{
        var imageUrls = await DbContext.Images
            .Select(img => img.ImageUrl)
            .ToListAsync();
        foreach (var url in imageUrls)
        {
            <img src="@url" alt="Sidebar image" />
        }
    }
</div>

Then you can call it as you originally did:

@await Html.PartialAsync("Shared/_Sidebar")

This works because the partial view no longer expects a specific model type, so there's no mismatch.

All three methods will fix your error—pick the one that fits your project's structure and coding style best.

内容的提问来源于stack exchange，提问作者Minh Giang